Changes to global styles in Gutenberg 9.1

Carolina    Updated
Published under: News

In Gutenberg version 9.1, the structure of the experimental-theme.json file is being changed.

Jump straight to the details on Github

The JSON is still separated in two scopes (contexts), global and block type.

What was previously two different objects, presets and features, are now bundled together inside settings. Styles remain unchanged.

In your existing JSON file, create a new object called settings and place the contents of the presets and features objects inside of it. These are now nested at the same level in the hierarchy.

Example structure of a experimental-theme.json file before the change:

{
	"global": {
		"presets": {
		     ....
		},
                "features": {
		     ....
		},
		"styles": {
			"typography": {
				...
			},
			"color": {
				...
			}
		}
	},
	"core/site-title": {
		"styles": {
			"typography": {
				...
			}
		}
	}
}

After:

{
	"global": {
		"settings": {
		     ....
		},
		"styles": {
			"typography": {
				...
			},
			"color": {
				...
			}
		}
	},
	"core/site-title": {
               "settings": {
		     ....
		},
		"styles": {
			"typography": {
				...
			}
		}
	}
}

I am going to update the code examples and lessons but because Gutenberg is on such a short release schedule, I can not guarantee that everything will be updated in time for 9.1, since I am also working on the new default theme.

VS Code autocomplete for block grammar

Carolina    Updated
Published under: News

I have created an auto complete snippet for VS Code that outputs the block grammar/markup for 52 blocks.

VS Code users can enable the snippet, and simply type group to add the markup for a group block. Start typing para… for the option to add the paragraph block, and so on.

The snippets work in PHP and HTML files. -If you want to use them in on the files, you can edit the file to remove the scope.

You can download the snippet from the course Github repository: https://github.com/carolinan/fullsiteediting/blob/course/Resources/FSE.code-snippets

July 2 update and a hiccup

Carolina    Updated
Published under: Uncategorized

Beta 1 panic mode?

We are getting closer to WordPress 5.5 Beta 1 that will include Gutenberg versions 7.6 – 8.5.

Right now, work is being done to decide which of the block patterns that will be added to WordPress core: https://github.com/WordPress/gutenberg/pull/23608

It looks like the testimonial, features and services and the numbered features blocks will be removed, and the pattern categories are being updated.

I am still hoping that the accessibility of the inserter can be improved. There is hopefully time to fix regressions, but new features would need to be merged soon.

https://github.com/WordPress/gutenberg/issues/22864

https://github.com/WordPress/gutenberg/issues/22858

https://github.com/WordPress/gutenberg/issues/23042

Updates to the official documentation

Yesterday, we had a block based theme meeting focused on documentation.
I was happy to learn that the documentation for the global styles has been updated, and it now includes a list of settings that are available. This list was previously only available on Github.

You can find this documentation here: https://developer.wordpress.org/block-editor/developers/themes/theme-json/

Kjellr has volunteered to update the block based theme documentation, and this will be very helpful.

The meeting notes have not been published yet.

Website updates

On the course website, I am investigating an issue with the email notification signup form, that I think is related to recaptcha.

I have added a FAQ page and will be adding questions and answers to it starting today. If you have questions, please send them in.

Starting today, I am going to go through all the lessons to see what needs to be refreshed. I will probably not have the time to do the actual update of course videos today, but I will have an overview that will make the updates easier.

-I have received some questions about how to navigate the lesson pages and I will be adding an update about how to use the course.

LearnDash -Problems with 3.2.0

LearnDash has been updated to 3.2.0 -This brought unexpected bugs to their blocks and short codes, hopefully they will be resolved in 3.2.1. The LearnDash support team has been very helpful and confirmed the problem, but has not been able to give an ETA on when we can expect an update.

June 24 Update

Carolina    Updated
Published under: News

This past week I have not found the time to blog to keep you up to date about the course progress.

There are both positive reasons: -I currently have two client projects to complete -these are the first payed projects I have had in months so I am very happy and relieved about that.

-I’ve also had a flare of joint pain and tiredness which means I have not been able to work my normal hours or at my normal speed. This is a little frustrating, especially since they always seem to show up when you are the busiest 😉 but I know its a flare that will pass.

The lesson about global styles is almost complete, and I have seen that some updates are also being made for the experimental themes repository, and I hope there will be more examples of themes that uses global styles soon.

On Friday the 26th at 18:00 UTC, I will join Birgit, Eileen and Kjell on a live Q&A about block based themes and full site editing. This is exciting and I’m a little nervous! You are welcome to join and ask any questions you might have!

Gutenberg times has also been amazingly kind to support the course by sponsoring!

June 13 update

Carolina    Updated
Published under: News

I am working hard to put more content for you on the site. Here is what I have been working on the last 3 days:

Moving course material and examples to Github, and doing bug fixes for the block reference and the site in general.

A lot of testing of Global styles: The concept is there, but it’s not working as I expected, or the part that I am testing is not implemented yet. Going to do some further testing and reading the source code.

Gutenberg version 8.3 fixed the issue with the default templates in the Site Editor, but when I sat down to re-record vital parts, I found one more major problematic bug, so the site editor lessons are still on hold for now.

I have been working on a pull request for adding descriptions to register_block_pattern, but the full site editing taxonomy block is currently on hold because I need help with parts of the code.

June 10 update

Carolina    Updated
Published under: News

First I want to thank Justin and WordPress Tavern for this article and for asking great questions!

Begin Prepping for Full-Site Editing With New Course on Block-Based Themes

Today I have been testing RC-1 of Gutenberg 8.3. I am hoping that I can finally publish the first lesson about the site editor. –But to be honest, there isn’t a great deal to show you yet because it is in the early stages.
It is more about a shift in how we work with templates, than it is about the technical solutions, because the site editor works very similar to the current editor.

I have received the final approval from Github to be able to use Github Sponsors, so that’s some positive news for me.

Some setbacks with LearnDash and the site

I had a small setback today when I tried to do some customizations for LearnDash. The website is not as accessible as I need it to be. I am going to continue to work hard on that and to do more careful testing.

It is going to take me some time because I am going to have to do changes to the current theme, and, like our beloved block editor, LearnDash is also lacking developer documentation.

For now, I have opted out of using the registration modal from LearnDash, and added a basic registration and login button on the homepage instead.

Removal of the forum

I chose to remove the forum because the number of plugins I needed to have installed was growing and I did not want it to slow down the site.

Communication is important and I will work on other ways to for us to share ideas and themes. I want to provide an easy way for you to ask questions.

I considered Slack as one solution, but I feel that we all (hi friend!) spend a lot of time on Slack already, so I am now thinking about other solutions.

Sharing your full site editing theme

With the forum removed, so is the section where you could share your themes publicly.

If you have a theme to share, please submit it to the official WordPress Github repository for experimental themes.

I want to be clear that I do not run this repo. This is a WordPress project, and it is the best place to share your themes if you want someone to test it and give you feedback.

If you want my feedback specifically, I would love to see your themes, you can email me a link to your repository or similar at carolina@fullsiteediting.com

June 7 update

Carolina    Updated
Published under: News

Just as short Sunday update, because I wanted to check what progress has been made this week and during the contributor day.

The site editor bug- Since 8.2 there has been a PHP notice in the site editor when you enable a full site editing theme. The bug has been localized and there is a PR being worked on: https://github.com/WordPress/gutenberg/issues/22800 https://github.com/WordPress/gutenberg/pull/22893

Site title block update – A pull request that adds the “wp-block-site-title” CSS class name, alignments and heading levels to the site title has been merged. See https://github.com/WordPress/gutenberg/pull/22843 for details.

There has been another important update that is worth mentioning even though it is not related to full site editing, and that is the new image editing controls.

The new image controls lets us rotate, flip and crop images. With the crop controls we can select an aspect ratio and orientation, and zoom in to crop a part of an image. Love it!

The controls in the image block toolbar lets us rotate the image to the left or right.

https://github.com/WordPress/gutenberg/pull/21024

June 4 update

Carolina    Updated
Published under: News

Thank you all for the encouraging comments and feedback about the course so far! I have not been able to reply to everyone, but I am not ignoring you, I am doing my best to make time for everyone. 🙂

Today is the WCEU online contributor day and I have mainly been focused on that, so there has not been much time for updates to this site.

I have added the first full site editing blocks cheat sheet.

The progress on global styles was presented during the block based theme’s meeting on wednesday. Hopefully we can test that during the contributor day and provide fedback. It looks very interesting but it’s a different way to think about styles from what we are used to.

Block-based Theme Meeting Notes 3 June, 2020

Ps: To be notified of new posts, you can subscribe to the WordPress.org Themes Team blog here: https://make.wordpress.org/themes/

Announcing my new course

Carolina    Updated
Published under: Announcements

Hi everyone!

For the past week I have been writing, recording and editing a new course about full site editing and block based themes.

I have never created a complete course before so I am super excited and a little nervous. Will my voice last? Will the course material be easy to understand and follow? Did I miss anything, and how do I add it later?

Why this course is needed

Full site editing is targeted for release with WordPress version 5.6 in december 2020.

A stable version of full site editing in the Gutenberg Plugin, without the experimental flag, is targeted for WordPress 5.5 in august 2020.

As a themer, I have struggled to stay up to date with changes to the block editor. And I have done my best to support clients who use a wide range of WordPress and plugin versions as well as the classic editor.

As a volunteer reviewer on the WordPress.org Theme’s team, I spend hours every week testing themes and reading theme code. I know underscores better than my favorite books and I read it more often than I read the newspaper.

And I have voiced my concern about the lack of support for blocks in the themes that I review.

The team that I am part of at WordPress.org has recognized this.
But it is not until recently, with great help from members of the core teams and the Gutenberg developers that we have been able to shift focus more towards themes that has support for the block editor.

I have done hours of testing, poking, breaking, reading and asking questions about full site editing to be able to get a better picture of what full site editing and block-based themes are, and what they will be.
–What I need to learn, and how I need to change my mindset about themes.

Why I have created this course now

A few weeks ago, I watched my friend and team member struggle with learning about block-based themes and the site editor, and a spark was lit:

I had already done that. I knew why this was problematic,
and I knew the answer.

So, I started writing the outline for this course. Even though full site editing is not complete. Even though everything is not stable.

As theme developers and site creators, we can not wait six months and then find out what’s in store for themes.

If we want to be able to continue creating themes, we need to learn about the new block based themes. We need to find new niches for designs and block patterns.

We need to test the new site editor now, and we need to engage and come up with suggestions for improvements, if we want full site editing to work for us and for our clients.

About the course

It is not going to be perfect.

Gutenberg changes fast with nearly daily updates.
The basics of full site editing theme are somewhat stable, and that is what I am including in the first version of the course.

Gutenberg is on a two week release schedule. I am not aiming for, and I can not promise, updates as frequent as that. But I will do may best to create updates when significant changes are made.

It is going to be free until January 2021.

I want to do more in depth lessons as full site editing becomes stable, and if I am able to, those will be free too.

If you have the means to sponsor me, please consider it. You can email me on carolina@fullsiteediting.com. If you have an interesting remote, part time job opportunity for a junior dev, I am also looking for work or an internship.

Here are some of the topics covered in the course:

  • Block attributes, block styles and block patterns.
  • The new full site editing blocks.
  • Theme structure and theme files.
  • Creating templates and template parts.
  • Working with templates in the site editor.

Be notified when the course is available

I have not set a date for when the first parts of the course will be published. First, I want the lessons to be reviewed for correctness.

If you want to be notified when the course is available, you can sign up for notifications here.