Three Ways to Extend the WordPress Block Editor Speaker nme Daisy Olsen Developer Relations Wrangler, Automattic

Aside: Reusable Blocks

A reusable blocks is a block (or multiple blocks) that are saved to allow management from a central location. Changes made to a global block will apply to every instance of the global block across an entire website. What are Reusable Blocks?

Block Patterns

The Block Patterns feature provides access to a catalog of pre-made patterns (made of blocks) that allow users to easily create and modify engaging layouts for their content. What are Block Patterns?

Registering Block Patterns

Register Block Pattern Category register_block_pattern_category( 'my-block-patterns',My Block Patterns', 'my-plugin' ) ) );

Register Block Pattern register_block_pattern( 'my-plugin/awesome-paragraph-pattern', array( 'title' => __( 'Awesome Paragraph', 'my-plugin' ), 'description' => _x( 'Just a Paragraph Pattern', 'my-plugin' ), 'categories' => array('my-block-patterns'), 'content' => ‘

This is Awesome!

’, ) );

Let’s Register a Block Pattern

Register Block Pattern function my_register_block_patterns () { if ( class_exists( 'WP_Block_Patterns_Registry' ) ) { register_block_pattern_category( 'my-block-patterns', array('label' => __('Team Page', 'my-plugin')) ); register_block_pattern( 'my-patterns/team-listing', array( 'title' => __( 'Team Listing', 'my-plugin' ), 'description' => _x( 'Team Listing Block Pattern', 'my-plugin' ), 'categories' => array('my-block-patterns'), 'content' => \n\n", ) ); } } add_action( 'init', 'my_register_block_patterns' );

Block Styles

Block Styles allow providing alternative styles to existing blocks. They work by adding a className to the block’s wrapper. This className can be used to provide an alternative styling for the block if the block style is selected in the block settings panel. What are Block Styles?

Register Block Style (Server Side Inline Style) function my_register_block_styles () { register_block_style( 'core/quote', array( 'name' => 'my-quote', 'label' => __( 'My Quote Style' ), 'inline_style' => '.wp-block-quote.is-style-my-quote { color: purple; }', ) ); } add_action( 'init', 'my_register_block_styles' );

Register Block Style (Server Side w/CSS File) function my_register_block_styles () { wp_register_style( 'myblockstyle', get_template_directory_uri() . '/block-styles.css' ); register_block_style( 'core/quote', array( 'name' => 'my-quote', 'label' => __( 'My Quote Style' ), 'style_handle' => 'myblockstyle', ) ); } add_action( 'init', 'my_register_block_styles' );

Register Block Style (CSS File - block-styles.css) .wp-block-quote.is-style-my-quote { color: purple; } .wp-block-quote.is-style-my-quote:before { font-size: 85px; line-height: 1em; font-style: italic; } .wp-block-quote.is-style-my-quote p, .wp-block-quote.is-style-my-quote cite, { padding-left: 45px; }

Block Variations

Block Variations allow a block to have different versions, all sharing common functionality. Each block variation is differentiated from the others by setting initial attributes or inner blocks. When a block is inserted, the defined attributes and/or inner blocks are applied. What are Block Variations?

Register Block Variations function my_editor_assets() { wp_enqueue_script( 'my-block-variations', get_template_directory_uri() . '/block-variations.js', array( 'wp-blocks' ) ); } add_action( 'enqueue_block_editor_assets', 'my_editor_assets' );

Register Block Variations (block-variations.js) wp.blocks.registerBlockVariation ( 'core/columns', { name: 'team-listing', title: 'Team Listing', innerBlocks: [ ['core/column', {}, [ ['core/heading', { level: 2, placeholder: 'Enter name' }], ['core/image', { }], ]], ['core/column', {}, [ ['core/paragraph', { placeholder: 'Enter bio’ }], ]], ], } );

20 Thank you Daisy Olsen Email: [email protected] Twitter: @daisyolsen WordPress: @daisyo Github: @daisyolsen LinkedIn: linkedin.com/in/daisyolsen/ @wordpressdotorg @wordpress @wordpress https://wordpress.org/