The Basics

The Block Editor provides new functionality to take advantage of Gutenberg blocks.

Add Theme Supports

Editor Color Palette

Editor Text Size Palette

Responsive Embeds

Frontend & Editor Styles

Dark Mode

Editor Color Palette

						function sideways_setup_theme_supported_features() {
							add_theme_support(
								'editor-color-palette',
								[
									[
										'name'  => __( 'sidetrack purple', 'themeLangDomain' ),
										'slug'  => 'sidetrack-purple',
										'color' => '#773B7A',
									],
								]
							);
						}
						add_action( 'after_setup_theme', 'sideways_setup_theme_supported_features' );					
					

Opt In Features

The block editor also provides opt-in opinionated styles you can access.

Wide Alignment

					add_theme_support( 'align-wide' );
				

Some blocks such as the image block have the possibility to define a “wide” or “full” alignment by adding the corresponding classname to the block’s wrapper ( alignwide or alignfull ).

Default Block Styles

add_theme_support( 'wp-block-styles' );

Core blocks include default styles. The styles are enqueued for editing but are not enqueued for viewing unless the theme opts-in to the core styles.

Floats

The block editor adds additional markup to floated images and images with captions to make styling them easier.

Block Color Palettes

					add_theme_support( 'editor-color-palette', array(
					array(
					'name' => __( 'sidetrack dark space', 'themeLangDomain' ),
					'slug' => 'sidetrack-dark-space',
					'color' => '#a156b4',
					),
					array(
					'name' => __( 'sidetrack neon purple', 'themeLangDomain' ),
					'slug' => 'sidetrack-neon-purple',
					'color' => '#d0a5db',
					),
					) );
				

Different blocks have the possibility of customizing colors. The block editor provides a default palette, but a theme can overwrite it and provide its own.

Color Palettes Deep Dive

name is a human-readable label that appears in the tooltip and provides a meaningful color description.

slug is a unique identifier used to generate the CSS classes for the block editor color palette.

color is the hexadecimal code to specify the color.

Disable Custom Colors

					add_theme_support( 'disable-custom-colors' );
				

This flag will make sure users are only able to choose colors from the editor-color-palette the theme provided or from the editor default colors if the theme did not provide one.

Block Gradient Presets

					add_theme_support(
					'editor-gradient-presets',
					array(
					array(
					'name'     => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ),
					'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
					'slug'     => 'vivid-cyan-blue-to-vivid-purple'
					),
					)
					);
				

Different blocks have the possibility of selecting from a list of predefined gradients. The block editor provides a default gradient presets, but a theme can overwrite them and provide its own

CSS for Block Gradient Presets

					.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
					background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
				}
			

Themes are responsible for creating the classes that apply the gradients. To apply the gradient, implement the corresponding class.

Deep Dive

name is a human-readable label that appears in the tooltip and provides a meaningful gradient description.

gradient is the CSS value of a gradient applied to a background-image of the block

slug is a unique identifier for the gradient used to generate CSS classes used by the block editor

Disable Block Gradient

				add_theme_support( 'disable-custom-gradients' );
			

When set, users will be restricted to the default gradients provided in the block editor or the gradients provided via the editor-gradient-presets theme support setting.

Block Font Sizes

				add_theme_support( 'editor-font-sizes', array(
				array(
				'name' => __( 'Small', 'themeLangDomain' ),
				'size' => 12,
				'slug' => 'small'
				),
				array(
				'name' => __( 'Regular', 'themeLangDomain' ),
				'size' => 16,
				'slug' => 'regular'
				) );
			

Blocks may allow the user to configure the font sizes they use, e.g., the paragraph block. Blocks provide a default set of font sizes, but a theme can overwrite it and provide its own.

Block Font Sizes

				.has-regular-font-size {
					font-size: 16px;
				}
			

Themes are responsible for creating the classes that apply the correct font size styles. The class name is built appending ‘has-‘, followed by the font size name using kebab case and ending with -font-size.

Disable Block Font Sizes

				add_theme_support('disable-custom-font-sizes');
			

When set, users will be restricted to the default sizes provided in the block editor or the sizes provided via the editor-font-sizes theme support setting.

Editor styles

				add_theme_support('editor-styles');
			

The block editor supports the theme’s editor styles, however it works a little differently than in the classic editor.

Enqueuing the editor style

				add_editor_style( 'style-editor.css' );
			

Use the add_editor_style function to enqueue and load CSS on the editor screen. For the classic editor, this was the only function needed to add style to the editor.

Responsive embedded content

				
...
			

Embed blocks automatically apply styles to embedded content to reflect the aspect ratio of content that is embedded in an iFrame. A block styled with the aspect ratio responsive styles would look like.

Responsive embedded content

				add_theme_support( 'responsive-embeds' );
			

To make the content resize and keep its aspect ratio, the element needs the wp-embed-responsive class. This is not set by default, and requires the theme to opt in to the responsive-embeds feature.

What are Block Templates?

Block Templates are a set of predefined blocks for content defined in the editor and stored in post_content.

Why Use Block Templates?

Block templates allow theme builders to provide the admin user with guiderails to add content.

Block Templates
vs Page Templates

Block Templates impose structure on post content,
and can be used independently or within current page templates.

Declaring Block Templates

option 1 Use PHP to associate the Block Template
with a Post Type

OR

option 2 Use JS to create Block Template as a freestanding block that can be inserted anywhere.

Ref:WordPress Block Editor Handbook

Via PHP

				function sidetrack_register_template() {
					$post_type_object = get_post_type_object( 'post' );
					$post_type_object->template = array(
						array( 'core/media-text' ),
						array( 'core/heading' ),
						array( 'core/list' ),
						array( 'core/paragraph' ),
					);
				}
				add_action( 'init', 'sidetrack_register_template' );
			

Creates a function that adds an array of blocks for admin users to populate.

Using Within a Page Template

				function sidetrack_register_page_template() {
					$post_type_object = get_post_type_object( 'post' );
					$post_type_object->template = array(
						array( 'core/media-text' ),
						array( 'core/heading' ),
						array( 'core/list' ),
						array( 'core/paragraph' ),
					);
				}
				add_action( 'init', 'sidetrack_register_page_template' );
			

JS

					
						import { __ }  from '@wordpress/i18n';
						import { registerBlockType } from '@wordpress/blocks';
						import {
							InnerBlocks,
						} from '@wordpress/block-editor';

						const SIDESTREET_PROPERTY_TEMPLATE = [
							[ 'core/heading', { placeholder: 'Listing Price'} ],
							[ 'core/paragraph', { placeholder: 'Listing Description' } ],
							[ 'core/image', {} ],
							[ 'core/list', { placeholder: 'Property Features' } ],
							[ 'core/gallery', {} ],
						];

						registerBlockType( 'sidetrack/property-template', {
							title: __( 'Sidetreet Property Template', 'sidetrack' ),
							icon: {
								foreground: '#fff',
								background: '#773B7A',
								src: 'multisite',
							},
							category: 'sidetrack',
							attributes: {
								content: {
									type: 'string',
								},
							},

							edit: ( props ) => {
								const { className } = props;
								return (
									

										 
											)}
										/>
									
								);
							},

							save: ( props ) => {
								const { className } = props;
								return (
									

										
									
								);
							},
						});
					
				

Custom Post Type

					function sidetrack_register_property_post_type() {
						$args = array(
							'public' => true,
							'label'  => 'Property',
							'template_lock' => all,
							'show_in_rest' => true,
							'template' => array(
								array( 'core/image', array(
								'align' => 'left',
								) ),
								array( 'core/heading
								', array(
								'align' => 'right',
								) ),
								array( 'core/heading', array(
								'placeholder' => 'Price',
								) ),
								array( 'core/paragraph', array(
								'placeholder' => 'Property Description',
							) ),
						),
					);
					register_post_type( 'property', $args );
				}
				add_action( 'init', 'sidetrack_register_property_post_type' );
			

Attributes

				'show_in_rest' => true,',
			

Ensures attribute is shown in block editor.

Attributes

				'placeholder' => 'Listing price',
			

Add placeholder text

Attributes

				'align' => 'left',
			

Block Alignment

Attributes

				'template_lock' => 'all',
			

Locks blocks so admin can't move or insert

Attributes

				'template_lock' => 'insert',
			

Locks blocks so admin can't insert new blocks but can move blocks in the template.

Modular Design

					$post_type_object->template = array(
					array( 'core/media-text' ),
					array( 'core/heading' ),
					array( 'core/list' ),
					array( 'core/paragraph' ),
					);
			

By creating block templates we can more clearly see the modular components of our sites.

Better User Experience

By eliminating the options, the admin user can quickly get this listing onto the site.

New and Noteworthy

Patterns are predefined block layouts for a page ready to insert.

Creating Block Patterns

New API introduced in Gutenberg 7.8.

Experimental and subject to change.

Not a part of core...yet.

Ref:WordPress Block Editor Handbook

Register Block Paterns

The register_block_pattern function receives the name of the pattern as the first argument and an array describing properties of the pattern as the second argument.

Ref:WordPress Block Editor Handbook

Register Block Paterns

The properties of the style array must include name and label:

title:A human-readable title for the pattern.

content:Raw HTML content for the pattern.

Ref:WordPress Block Editor Handbook

Register Block Paterns

						function sidetreet_register_block_pattern() {
							if ( function_exists( 'register_block_pattern' ) ) {
								register_block_pattern(
									'sidestreet-listing-pattern',
									array(
										'title'   => __( 'Intro paragraph with two columns', 'sidestreet-listing-pattern' ),
										'content' => "\n
\n
\n
\n\n\n\n
\n
\n\n\n\n
h3 heading/features
\n\n\n\n
\n
\n\n\n\n
\n\n\n\n
\n
\n\n\n\n
h4 heading/gallery
\n\n\n\n
\n
\n\n\n\n
\n",
									)
								);
							}
						}
						add_action( 'init', 'sidetreet_register_block_pattern' );
				

Block Templates
vs Block Patterns

Block Templates are a predefined set of blocks that can be used programatically.

Block Patterns are a combination of blocks used to produce a layout.

Faceoff

So Meta

The rise of the meta box came about from the limitation of structuring content in the Classic WordPress editor.

So Meta

Using meta boxes to create page layouts has direct ramifcations on your database and where things are stored.

Namely, it moves what should be post_content into meta.

So Meta

Similarly, now blocks can take what we want stored as meta and place it instead into post_content.

Meta as a Block

When you have information that is meta data not post content, you can create a specific block.block attributes

Meta as a Block

					attributes: {
						image: {
							type: 'object',
							source: 'meta',
							meta: 'propertyimg'
						},
						price: {
							type: 'string',
							source: 'meta',
							meta: 'price'
						},
					},				
				

Meta as a Block

					function sidetrack_property_meta() {
						register_post_meta(
							'post',
							'image',
							array(
								'type'          => 'string',
								'single'        => true,
								'show_in_rest'  => true,
								'auth_callback' => function() {
									return current_user_can( 'edit_posts' );
									},
							)
						);
						register_post_meta(
							'post',
							'price',
							array(
								'type'          => 'string',
								'single'        => true,
								'show_in_rest'  => true,
								'auth_callback' => function() {
									return current_user_can( 'edit_posts' );
									},
							)
						);
					}
					add_action( 'init', 'sidetrack_property_meta' );