In this presentation we will go through how anyone with a WordPress site can make their editing process more efficient by using block patterns … and how anyone who can do a little bit of coding can create their own set of custom block patterns and wrap it all up in a little plugin.

1. Creating a custom block pattern plugin
Jeff McNear
https://plasterdog.com
https://webprosmeetup.org
jeff@plasterdog.com
847/849-7060

2. The Gutenberg editor is here to stay
• Block based editing is efficient and user friendly
• You can do most things with core blocks
• Structural blocks facilitate complex layouts
• The interface is consistently improving
• We can pick and choose which elements to use

3. You can build almost anything with the core
set of blocks

4. A quick (and opinionated) pass
through the default set of
Gutenberg blocks:

5. Text Group
• Most are related to typography
• Classic reverts to the old style
• Code is handy for some of us
• Tables are not for layout

6. Media Group
• HTML5 video & audio players
• Sophisticated image controls
• Easily embed files

7. Design Group
• Pre formatted buttons
• Container blocks
• Superior control over spacing
• Promotes the nesting of blocks

8. Widgets Group
• Kind of a hodge podge
• Custom HTML for in-line editing
• Some plugins that generate
shortcodes will not have a block
• Common queries and feeds

9. Theme Group
• Header elements
• Query loops
• Query loop components
• Full site editing features that can
be used in places where the
block editor is active

10. • More query loop components
• Archive components
• Login form

11. Embed Group

12. While there is justification for
adding supplemental blocks
and/or creating a custom block –
usually this will be an over-
complication
Many times, when you think you
would need a custom block, what
you really need is a configuration
of nested blocks

13. It only makes sense to make provisions for saving
block configurations for reuse in other places…

14. Reusable blocks are like Illustrator symbols
First assemble the group of blocks
Then save the group as a reusable block

15. Once saved there will be a ”reusable” tab
For some reason there is no link to “/wp-admin/edit.php?post_type=wp_block” Except for in this tab…

16. Via the “manage” link the reusable block can be edited like any
other post type

17. You can import & export reusable block JSON files

18. Each instance of a reusable block will reflect any changes made
in the “parent”
But any instance of a
reusable block can be
converted back to a
collection of “regular”
blocks

19. So that sort of works…

20. There has got to be a better way to insert preformatted sections
that are intended to be modified and edited

21. Block patterns are assembled groups of blocks that are
intended to be editable
There are dozens of patterns within 9 existing categories

22. Block patterns are for all intents and purposes page (or post)
template parts that you can use at will in any part of the site
that uses the block editor

23. More block patterns can be found at: https://wordpress.org/patterns/

24. But using these supplemental patterns is a little clunky –
• You need to copy and paste the pattern
• To effectively paste you need to be in code view

25. … and worst of all they won’t be saved in the block insertor

26. Unlike with reusable blocks, there has been no provision
to edit, export or import block patterns

27. There are a couple of block pattern builder plugins, but they
are not in wide use and do not have an export function either

28. But creating a bespoke plugin creating custom patterns is not
too difficult.
<?php
/**
* Plugin Name: Bill Murray Pattern
* Description: Bill Murray pattern demo
* Version: 1.05
* Author: Jeff McNear
*/
/**
* Register Custom Block Pattern Styles
*/
Name and describe the plugin

29. add_action('init', function() {
remove_theme_support('core-block-patterns');
});
This block of code will remove most of the core block
patterns
add_action('init', function() {
if (!function_exists('unregister_block_pattern'))
{
return;
}
unregister_block_pattern('core/two-buttons');
unregister_block_pattern('core/three-buttons');
});
This block of code will remove two specific block
patterns: two-buttons & three-buttons
There are some things that can be done to clean up the interface
(usually)

30. add_action('init', function() {
if (!function_exists('unregister_block_pattern_category'))
{ return; } unregister_block_pattern_category('buttons');
});
This block of code will remove the block category
“buttons”
Note:
Themes are increasingly including custom patterns and block pattern categories – this means that the snippets above
will only work when there is no contradiction in the theme
add_action('init', function() {
remove_theme_support('core-block-patterns');
});
This block of code will (usually) remove all of
the core block patterns

31. Organizing custom patterns in a custom category will make
things easier
register_block_pattern_category(
'bill',
array( 'label' => __( 'Bill Murray', 'bmp' ) )
);
This block of code will
create a new category
to supplement the
core group of
categories

32. Once these decisions are made it is time to define the new
patterns
add_action('init', function() {
if (!function_exists('register_block_pattern')) {
return;
}
Opens the function registering new
block patterns
}); Closes the function
The definitions for the new patterns are placed in this section

33. Each pattern is defined by five elements:
// starts the pattern
register_block_pattern(‘bmp/bill-murray-bio', [
'title' => __(Bill Murray Bio', ‘bmp'),
'keywords' => [Bill Murray, bio'],
'categories' => ['featured’ , ‘bill’],
'viewportWidth' => 1000,
'content' => " ",
]);
// ends the pattern
Register the pattern
Name the pattern
Relevant keywords
Relevant categories
Viewport width
Content*
*This is the “tricky” part
Ends the pattern

34. The most straight forward way to compose the
content section is to first build the assembled group of blocks
in the Gutenberg editor.
Note: it is best to draw
images from offsite sources
such as:
https://picsum.photos
https://holderjs.com
https://fillmurray.com
https://placekeanu.com
https://placekitten.com
https://placebear.com
https://placedog.net/

35. Switch to the code editor view and select the code:
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>A new Pattern</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>some descriptive text</p>
<!-- /wp:paragraph -->
<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"service":"facebook"} /-->
<!-- wp:social-link {"service":"youtube"} /-->
<!-- wp:social-link {"service":"twitter"} /-->
<!-- wp:social-link {"service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.fillmurray.com/g/400/400" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

36. HTML markup contains strings
which need to be ”escaped” to
work properly here

37. This tool will make sure the escapes are correctly written:
https://onlinestringtools.com/escape-string

38. <!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading -->
<h2>A new Pattern</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>some descriptive text</p>
<!-- /wp:paragraph -->
<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"service":"facebook"} /-->
<!-- wp:social-link {"service":"youtube"} /-->
<!-- wp:social-link {"service":"twitter"} /-->
<!-- wp:social-link {"service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.fillmurray.com/g/400/400" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->n
… and here is the result!

39. Once your plugin is installed and
activated you will have access to
your custom block pattern

40. Like any other block pattern once inserted each individual
block will remain completely editable
(in that instance)

41. Then you can change out the contents of each block within the
pattern for each specific use case

42. Questions?