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.

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.

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 ).

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.

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.

They make it easier for the user to get content on the page by limiting the design choices they need to make.

Block Templates
vs Page Templates

Block Templates impose structure on post content,
they are unrelated to page templates found in themes.

Block Templates
vs Block Patterns

Block Patterns are a layout grid that allow an admin user to quickly get a layout.

How do we add Block Templates to our Themes?

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.

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' );
			

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

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,',
			

Add placeholder text

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.