The video recording of this presentation is available on YouTube.
Let’s Build a Custom Block in 15 Minutes
Presented By
Nick Diego
This presentation is best viewed on desktop.
WordCamp US
//
September 9, 2022
WordCamp US
//
September 9, 2022
Why, What, and How?
Let’s Build
Resources
WordCamp US
//
September 9, 2022
Why, What, and How?
Why attempt this?
Blocks are the foundation of modern WordPress design and development
Historically, building custom blocks was challenging
Today, getting started with block development has never been easier
Every WordPress builder can add custom blocks to their toolset
WordCamp US
//
September 9, 2022
Why, What, and How?
What are you going to build?
????
WordCamp US
//
September 9, 2022
Why, What, and How?
How are you going to build this custom block?
The Create Block package
A code editor — VS Code
A local WordPress development environment — Local WP
The original Hello Dolly plugin by Matt Mullenweg
WordCamp US
//
September 9, 2022
Why, What, and How?
Let’s Build
Resources
WordCamp US
//
September 9, 2022
Let’s Build
Step 1
Scaffold the dynamic block plugin using Create Block.
Navigate to the plugin folder and get it up and running.
WordCamp US
//
September 9, 2022
Let’s Build
Step 2
Examine the original plugin.
Install and activate Hello Dolly
Open hello.php
Review the functions hello_dolly() and hello_dolly_get_lyric()
WordCamp US
//
September 9, 2022
Let’s Build
Step 3
Strip Hello Dolly for parts.
Copy hello_dolly() and hello_dolly_get_lyric()
Paste both functions in hello-dolly-block.php
Prefix and rename each function to avoid plugin conflicts
WordCamp US
//
September 9, 2022
Let’s Build
Step 4
Replace printf() with return sprintf() and update markup.
hello-dolly-block.php
function hello_dolly_block_render_lyric() {
$chosen = hello_dolly_block_get_lyric();
$lang = '';
if ( 'en_' !== substr( get_user_locale(), 0, 3 ) ) {
$lang = ' lang="en"';
}
return sprintf(
'<p id="dolly"><span class="screen-reader-text">%s </span><span dir="ltr"%s>%s</span></p>',
__( 'Quote from Hello Dolly song, by Jerry Herman:', 'hello-dolly-block' ),
$lang,
$chosen
);
}WordCamp US
//
September 9, 2022
Let’s Build
Step 5
Update the frontend template to include the render lyric function.
src/template.php
<p <?php echo get_block_wrapper_attributes(); ?>>
<?php echo hello_dolly_block_render_lyric(); ?>
</p>WordCamp US
//
September 9, 2022
Let’s Build
Step 6
Update the Editor message with a default lyric.
src/edit.js
export default function Edit() {
return (
<p { ...useBlockProps() }>
{ __( 'Well, hello, Dolly', 'hello-dolly-block' ) }
</p>
);
}WordCamp US
//
September 9, 2022
Let’s Build
Step 7
Remove the default block styles.
src/editor.scss
.wp-block-create-block-hello-dolly-block {
border: 1px dotted #f00;
}src/style.scss
.wp-block-create-block-hello-dolly-block {
background-color: #21759b;
color: #fff;
padding: 2px;
}WordCamp US
//
September 9, 2022
Let’s Build
Step 8
Add supports for block alignment, color, and border.
src/block.json
"supports": {
"align": true,
"color": {
"background": true,
"text": true
},
"__experimentalBorder": {
"radius": true,
"color": true,
"width": true,
"style": true
},
"html": false
},WordCamp US
//
September 9, 2022
Let’s Build
Step 9
Add supports for padding, margin, and typography.
src/block.json
...
"html": false,
"spacing": {
"margin": true,
"padding": true
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontStyle": true,
"__experimentalFontWeight": true,
"__experimentalTextTransform": true,
"__experimentalTextDecoration": true,
"__experimentalLetterSpacing": true
}
},WordCamp US
//
September 9, 2022
Let’s Build
Step 10
Add a few finishing touches—update the block icon and description.
src/block.json
{
...
"title": "Hello Dolly Block",
"category": "widgets",
"icon": "format-audio",
"description": "Display a random lyric from the song Hello Dolly, by Louis Armstrong.",
...WordCamp US
//
September 9, 2022
Let’s Build
Introducing the New
Hello Dolly Block
Quote from Hello Dolly song, by Jerry Herman: Well, hello, Dolly
Hello Dolly, by Louis Armstrong
WordCamp US
//
September 9, 2022
Why, What, and How?
Let’s Build
Resources
WordCamp US
//
September 9, 2022
Resources
View this presentation at nickdiego.com/wcus-2022
Download block at github.com/ndiego/hello-dolly-block
WordCamp US
//
September 9, 2022
So, what will you build?
Nick Diego
WordCamp US
//
September 9, 2022
How I Built This
To take advantage of functionality not yet released in WordPress.
To display all SVG icons.
To conditionally display slide headers and footers on mobile devices.
The experimental block theme powers the design of this presentation.
WordCamp US
//
September 9, 2022