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

Headshot of Nick Diego.

Nick Diego

Developer Advocate

@

WP Engine

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?

Custom block suggestions on Twitter.

🤔

The original Hello Dolly plugin by Matt Mullenweg.

WordCamp US

//

September 9, 2022

Why, What, and How?

How are you going to build this custom block?

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.

Prerequisites

…/wp-content/plugins/

% npx @wordpress/create-block --variant dynamic hello-dolly-block
% cd hello-dolly-block
% npm start

The scaffolding process can take a few minutes.

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: Have a little faith in me, fellas

Hello Dolly, by Louis Armstrong

WordCamp US

//

September 9, 2022

Why, What, and How?

Let’s Build

Resources

WordCamp US

//

September 9, 2022

So, what will you build?

WordCamp US

//

September 9, 2022

How I Built This

WordCamp US

//

September 9, 2022