Extending the WordPress Block Editor (even if you don’t know JavaScript) - Daisy Olsen

Creating blocks for the WordPress Block editor can be intimidating if you don’t already know JavaScript and React. But did you know that there are other ways to build with the block editor without coding blocks from scratch? In this workshop you will learn three ways to do more with existing core blocks! We will explore block styles, block variations, and block patterns. We’ll also discuss when and how to use each and also build real-world examples of how you can incorporate these powerful tools in your WordPress projects. At the end of the workshop you will be ready to use these new skills, whether it’s for a client site or your own project.

Transcript

1. Three Ways to Extend the WordPress Block Editor Speaker nme Daisy Olsen Developer Relations Wrangler, Automattic
2. Aside: Reusable Blocks
3. 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?
4. Block Patterns
5. 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?
6. Registering Block Patterns
7. Register Block Pattern Category register_block_pattern_category( 'my-block-patterns',My Block Patterns', 'my-plugin' ) ) );
8. 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' => ‘ <!-- wp:paragraph --> <p>This is Awesome!</p> <!-- /wp:paragraph --> ’, ) );
9. Let’s Register a Block Pattern
10. 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' => <!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"placeholder\":\"Enter name\"} -->\n<h2></h2>\n<!-- /wp:heading -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:paragraph {\"placeholder\":\"Enter bio\"} -->\n<p></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) ); } } add_action( 'init', 'my_register_block_patterns' );
11. Block Styles
12. 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?
13. 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' );
14. 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' );
15. 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; }
16. Block Variations
17. 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?
18. 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' );
19. 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. 20 Thank you Daisy Olsen Email: daisy.olsen@automattic.com Twitter: @daisyolsen WordPress: @daisyo Github: @daisyolsen LinkedIn: linkedin.com/in/daisyolsen/ @wordpressdotorg @wordpress @wordpress https://wordpress.org/