Let’s Build a Custom Block in 15 Minutes
Presented By
Nick Diego
This presentation is best viewed on desktop.
You’re a bit too early. This presentation won’t be visible until 9/9/2022 @ 2:00 PM PST
WordCamp US
//
September 9, 2022
Why, What, and How?
Let’s Build
Resources
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
What are you going to build?
🤔
How are you going to build this custom block?
Why, What, and How?
Let’s Build
Resources
Step 1
Scaffold the dynamic block plugin using Create Block.
Navigate to the plugin folder and get it up and running.
Step 2
Examine the original plugin.
Install and activate Hello Dolly
Open hello.php
Review the functions hello_dolly() and hello_dolly_get_lyric()
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
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
);
}
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>
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>
);
}
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;
}
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
},
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
}
},
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.",
...
Introducing the New
Hello Dolly Block
Hello Dolly, by Louis Armstrong
Why, What, and How?
Let’s Build
Resources
How I Built This
