Very excited I was when Ana Silva and Jenny Wong reached out to me about a UK WP Community led event series called Guten Tag. They, along with some Core developers, Plugin developers, designers, managers, agencies and others to discuss the finer points of the roll out of Gutenberg and what it meant to everyone involved.
The first day of free online sessions took place this Monday, March 5th.
With: Gary Pendergast, Jenny Wong, Matt Haines-Young & Omar Reiss
A discussion based on the experience of developers who are already working with Gutenberg.
The roundtable will focus on exploring the barriers preventing people from adopting Gutenberg in their projects, and reviewing the mental and technical transitions that need to occur for developers to embrace the project in their professional environments.
With: Mark Wilkinson, Matías Ventura, Miguel Fonseca & Tammie Lister
A session exploring the reasons behind the Gutenberg feature plugins’ existence and the problems it aims to solve.
We’ll be asking the Gutenberg core team what common concerns they hear from the community, and how far Gutenberg is from being merge proposal ready.
With: David Lockie & Robby McCullough
A session exploring the relationship between the WordPress page builder market and the Gutenberg Project. We’ll be asking Page builders how they see Gutenberg affecting their business, users, and what steps they are taking towards the future.
With: Zac Gordon
We are inviting various people across the community to share practical solutions to getting to grips with the new Gutenberg editor.
In this session, Zac Gordon is going to share how he stays on top of the noise and shifts through all the chatter to find the latest Gutenberg information.
Get Noticed of Upcoming Sessions
I highly encourage you subscribe for future events, get on the UK Slack Channel, and look for the #gutentagWP hashtag on Twitter.
This is a community driven event, so if you have ideas for other sessions, please reach out and let me know and I can help connect you with everyone.
There is a great community series on Gutenberg starting called Guten-Tag. One of the first sessions I am doing with this series is on “How to Stay Up to Date on Changes in Gutenberg.”
This has been a really relevant topic for me because I have released a course on Gutenberg Development, a Live Gutenberg Q&A, and have worked with some other educators on Gutenberg related development. So staying up to date on the rapid changes with Gutenberg has been super important.
Luckily, it has gotten easier and easier. In this post I want to outline a few places where you can go to stay up to date on the latest changes in Gutenberg Development. This is what I have used, but I know it is not comprehensive, so if you notice things missing, please post them up in the comments!
There are a few important Slack channels to follow to stay up to date on Gutenberg:
- #core-editor – This channel is specific to changes and discussions around the Gutenberg Editor
- #core-customize – As Gutenberg expands into the Customizer I would highly suggest following this channel as well
While these channels are great for reading and following changes, it can also be a good place to ask your questions if you are not sure about how something works in GB.
Make WordPress Blog
The make.wordpress.org blog has great regular posts on Gutenberg.
- Check the sidebar for official meeting times in Slack
- “What’s new in Gutenberg” posts – Look for posts coming out every other week outlining the latest changes in Gutenberg from the last sprint
- Any other posts related to Gutenberg. There are a few other posts on Gutenberg that are different than the What’s new posts
- Changes to Customizer – This is also a place you can find out more about the changes in the Customizer to Gutenberg.
The best thing about the Gutenberg repo on Github is that you can track all of the issues and changes happening to the plugin.
You can also post up issues if you notice bugs in Gutenberg.
A number of great accounts on Twitter have popped up to help you track changes in Gutenberg.
- @zgordon and @jcasabona – We are both doing courses on GB and share a number of updates
- @riadbenguella @gziolo @andrew_duthie @matias_ventura @karmatosed – Good Core Gutenberg Developers to follow
- @thegutes @GutenbergHub @gutenbergtimes – Twitter accounts dedicated to GB
- #Gutenberg #gutentag-events #gutentagWP- It is a good idea to follow the #Gutenberg related hastag
Did I Miss Anything?
How do you stay up to date on Gutenberg Development?
Folks mentioned this one as well 🙂
While working on my Gutenberg Development Course I was really happy to find out that the core developers ported over much of the internationalization features we are familiar with on the PHP side into a client side library available as
Example of __() in Action
Since wp.i18n is available in the global scope, you can access it directly without needing to officially “import” anything. In this example we are pulling out the
__ function from the
wp.i18n library it exists within.
Notice when we call the function, we do not need to pass in a second parameter with the text domain for our plugin or theme. This will be automatically sorted out for you.
Additional Internationalization Functions
We also have access to some other helpful internationalization functions that you may recognize from the PHP side.
Most of the time you only need
__(), but if you are familiar with these other functions already in PHP or just want to dig deeper, you can explore the core library readme file here.
Learn More About Gutenberg Development
If you would like to learn more about building with the new editor in WordPress, please check out my Gutenberg Development Course 🙂
While working on my Gutenberg Development Course, one of the hardest things I found to research was how to add block templates to your WordPress theme or plugin.
Example of a simple template with image and paragraph block
Block templates are a way to have certain blocks show up by default for a new post, page or custom post type. You can also “lock” the template to prevent users from adding or removing blocks.
Thank You Matías and Riad For Showing Us How
I could only find two code example of how to write block templates.
One was by freezing Matías Ventura’s Gutenberg Demo from the State of the Word 2017 at WordCamp US.
Blurry example but best I could find
The other was from a Gutenberg Custom Fields Plugin from Gutenberg core developer Riad Benguella. If you reverse engineer that plugin you can see how templates are added.
How Block Templates Work
Templates are added as a parameter when registering a post type in WordPress. Sometimes this is done for your own custom post type. But it can also be done for existing and native post types like Posts and Pages.
The block template setting itself is an array of blocks that you want included. There is also an additional setting called “template_lock” that can be set to true or false to lock down the template to users.
You can also add additional configurations like custom placeholder text for blocks or set the alignment.
An Example of Block Templates
You can add the code below to any plugin or theme to modify template setting for post types of your choice.
Some notes on this code:
- Notice the conditional statement determining what post type to apply this to. Can change for your own needs.
- The template_lock argument determines whether users can add or remove blocks with this post type.
- The name used for blocks is the name used when creating them. See a list here of all default blocks, which you can use to lookup (or guess) the programatic name for a block.
- You can add additional configurations like placeholder text, alignment, or other block attributes you want set by default.
Learn More About Gutenberg Development
To learn more about developing with blocks in WordPress, please check out my course Gutenberg Development Course.
While working on my Gutenberg Development Course I realized that default toolbar buttons have a nice Tooltip that appears over them on hover.
Example of the tooltip component in action with the Bold button
I also remembered seeing a Tooltip component in Gutenberg when walking through the source code. It turns out it is pretty easy to add these in our own block as well.
Setting Up the Tooltip Component
In order for the Tooltip component to work you simply have to get it from the wp.components library. It is found at wp.componentns
Then you simply wrap
<Tooltip></Tooltip> around whatever you want to trigger the tooltip.
The Tooltip takes two parameters:
- text [required] = What text should appear in the tooltip
- position [default “top”] = Determines where the tooltip will appear in relation to the child content
Here is an example of Tooltip in action:
NOTE: This example also includes the Button and Dashicon components. This is not necessary. Tooltip can be wrapped around other components, but I have only been able to get it working in the editor, not on the frontend.
Here is a look at what the code above can create:
Example of tooltip applied to custom block button
Want to Learn More About Gutenberg?
At WordCamp US in early Dec 2017 I set out a goal to release a Gutenberg Development Course by the end of the year. As of writing it is New Years Eve 2017 and I just made it!
One of the important functions I learned about while working on the course is registerBlockType, which is used to register to setup blocks. This video gives an overview of the function.
An Introduction to registerBlockType
In this video we discuss the following:
- What the registerBlockType function does
- What major parameters and setting you need when looking at it
- A few simplified code examples
- Sneak peak of the blocks we will use to learn more about registerBlockType
CORRECTION: At 05:10 in the slide should look like below:
Corrected Slide at 05:10 in with function and JSX braces
To Learn More About Gutenberg Development
If you would like to learn more about developing with the new editor in WordPress, please check out my Gutenberg Development Course.
One of the cool things I picked up while working on my Gutenberg Development Course was how to set a default color palette for all blocks inside your theme.
Interestingly, as far as I can tell, defining custom color schemes is something only a theme should do and this cannot be set from within a custom block.
Block Color Palettes in Gutenberg
One of the features that blocks can have in WordPress is the ability change a color. For example, the core paragraph block has the ability to change the background and text color in the block inspector panel.
Example of Default Block Color Scheme in WordPress
One of the cool things you can do as a theme developer, is set your own custom color palette for your theme. This can help users choose colors that match the design of the theme.
Setting Custom Color Palettes in Gutenberg
To set a custom color palette (or color scheme) you would simply add add_theme_support( ‘editor-color-palette’ ) to your functions.php file and then continue to pass in the hexadecimal values for colors you want.
You can add as many colors as you like (I think), but I would suggest limiting the selection to colors that work well with your theme.
You will then want to hook that add_theme_support() into ‘after_setup_theme’.
What This Looks Like in Action
Using the color combinations set above, the default color options for blocks would now look like this.
Example of custom color scheme applied to WordPress blocks
I think that if you have a theme with a specific color palette that you should definitely take the extra few minutes to set a default color scheme for the blocks.
Learn More About Developing with Gutenberg
To learn more about building custom blocks or customizing Gutenberg with your theme, please check out my course on Gutenberg Development Course.