WordPress & JavaScript in 2019: Coding a Customized Block Sort for Gutenberg Block Editor

by birtanpublished on July 3, 2020

okay you excited for the new year

excited about New Year's Eve no all

right let's go code then hello everyone

this video is gonna get uploaded right

before the start of 2019 in fact

depending on where you live in the world

it already is 2019

just a few weeks ago in the first week

of December 2018 something huge happened

in the WordPress universe WordPress

officially launched their new block

editor now there's a lot of hype

surrounding the editor there's a lot of

fear and confusion

so hopefully this tutorial demystify

some of that and also I thought this was

the perfect video to follow on the heels

of the ten days of JavaScript because

the new block paradigm in WordPress is

primarily powered by JavaScript not PHP

so in this lesson we are going to

continue to practice and develop our

JavaScript skill set just a quick

shameless promotion I actually filmed

this lesson as part of my 25 hour

premium WordPress developer course if

you find this lesson helpful you might

enjoy the full course you can always

check it out on you to me there's a link

to it in the description for this video

also if you're wondering where in the

world the full stack premium JavaScript

course is don't worry it's coming soon

having said all of that I want to send

out a huge thank you to all of my

subscribers I hope you have a beautiful

2019 and let's enjoy this video

[Music]

[Applause]

[Music]

hello everyone in this lesson we are

going to learn how to code our own new

block type

now when I say block what does that mean

what's the context here well in versions

50 and later of WordPress whenever you

create or edit a page or post so posts

add new this editing experience for the

content uses a block paradigm so as we

type each new paragraph is considered an

independent block right and you can

click to reorder them or drag and drop

to reorder them now these are just

simple paragraphs but there are other

types of blocks out of the box by

default WordPress comes with paragraphs

heading lists columns buttons images you

get the idea but aside from these

default block types that WordPress comes

with we can create our own new custom

block types as developers so right now

let me give you a sneak peek of what we

are going to be building together in

this lesson we see this block type named

my cool border box with a smiley face

and if I click that we see this your

cool border box there's an input where I

can type strawberry and then there's a

color picker

so maybe I will choose a color that

matches strawberry okay and then I can

go ahead and publish this post and then

if I view it on my front end we can see

here are the default paragraph blocks

but here is that custom border box block

we see the word that I typed in and we

also see that color that I chose and

just to show you the reusable nature of

blocks I could add another my cool

border box so if I added it again maybe

this time I will say I like oranges and

then for the color obviously I would

choose orange and maybe I want this

orange box to sit down below the other

paragraph so I can just click move down

to send

down go ahead and click update and if i

refresh the front-end there you have it

now I realize this is very ugly right

this is not the pinnacle of graphic

design but that's not the point of this

lesson our goal with this lesson is just

to get you familiar with the very basics

of coding your own new block type once

you've got a grasp of the basic concepts

it's up to you to take the idea and run

with it

and create something that's actually

good looking and actually useful so

without further ado let's get started

behind the scenes I just removed all of

the code that was powering that custom

block type so now we can start together

and move forward in order to create and

register a new custom block type let's

begin by creating a new plug-in now

earlier in this course we already

learned how to create a plug-in so

that's nothing new so for the next few

steps I'm going to move pretty quickly

but let's begin by navigating to the

directory where you've installed

WordPress and we are looking for the

folder named WP content inside that

we're looking for the folder named

plugins and inside this plugins folder

let's just create a brand new empty

folder we can name it whatever we want

but I'm going to call it my cool border

box okay then let's open up this new

folder in our favorite text editing

program okay in this new folder let's

use the text editor to create a new file

the name doesn't matter as long as it

ends in dot PHP so I chose plug-in dot

PHP and I'm actually just going to paste

in a bit of boilerplate code you can

find this code in the description or

linked resources for this video lesson

because we've already created a plug-in

earlier in the course I'm not going to

type this out letter-by-letter with you

that would just be a waste of time

there's not a whole lot of educational

material going on in this code we're

basically just registering a new plug-in

and then we are loading a javascript

file at

right place at the right time this is

because the new block paradigm is

primarily powered by JavaScript not by

PHP so again I will include a link to

this code so you can just copy and paste

it into your PHP file just like I did

here

okay let's go ahead and save that file

and now let's create another new file

but this time a JavaScript file so use

my text editor new file I'm going to

name it my dash block dot J yes

technically you can name it anything you

want as long as it ends in dot J yes

I'm going with my dash block because

that's what I've included in the

boilerplate PHP right that's the file

that our PHP is going to try to load

okay now let's jump into that javascript

file and before we write any real code

let's first write an annoying alert

popup message just as a test to see if

our file is being loaded and let's say

this is a test let's go ahead and save

this and then back in the WordPress

admin dashboard let's go activate our

new plugin so in the left hand sidebar

look for plugins so here it is my cool

border-box

version 10 by brad let's go ahead and

click activate and now let's test things

out to see if our javascript file is

being loaded so let's go to the edit

screen write posts add new awesome

there's that pop-up this is a test that

means our JavaScript is loading at the

right place at the right time and now we

can finally get down to business and get

to the actual educational part of this

lesson so let's get rid of this test

alert and what we actually want to do is

begin working with the WP object that

WordPress adds to the global scope we

can look inside the WP object for

another object named blocks and it

contains a method named register block

type okay within the parentheses we want

to give this method two arguments

so just as placeholders we could say a

comma B the first argument is a name

that we make up for our new block type

I'm going to say Brad slash border-box

the first part of the name before the

slash is the namespace the idea here is

that even if a different plug-in had a

custom block type named border-box there

would not be a naming conflict because

of the beginning few letters and then

the slash so you can just choose your

name or a few unique letters and then

obviously you could name your block type

whatever you want as well okay

the second argument that we want to pass

this register block type method so

instead of B we want to pass it an

object so curly brackets to create an

object literal and then inside these

brackets let's drop down okay and in

this object we want to include several

different properties so type these out

with me title colon for now let's just

set all the properties to a temporary

placeholder X let's just get the

skeleton up and running and then we can

come back and place real values the

title icon category attributes edit and

finally save so this is the overall

Anatomy or skeleton of a block type now

let's start filling in each one of these

values so for title instead of X let's

include a string of text and I will say

my cool border box so you could think of

it as this is the human friendly

readable name and this is the computer

friendly variable name okay next up icon

I'm going to include string of text and

say smiley earlier in the course we

already learned about dasha cons

remember you can google for wordpress –

cons and then choose from any of the

tons of different icons that WordPress

ships with it's up to you I'm going with

the smiley face icon for category I'm

going to say common this just controls

where your block type shows

in the block user interface so there's

common there's layout embeds formatting

widgets you get the idea

I'm going with common four attributes we

want to include an object so curly

brackets let's drop down we can think of

attributes as sort of the raw data that

powers our block when it comes to the

border box that we're building we only

need to keep track of two pieces of data

number one we need to keep track of

whatever text the user types in and

number two we need to keep track of the

color that they select so for attributes

let's say content you could make up

whatever name you want you could call

this text you could call this pizza call

a unicorn the name does not matter I'm

just gonna call it content then we set

this to an object and then we just

describe what it should be so type it

should be a string of text so the

content should not be an array it should

not be a number it should just be a

simple string of text okay let's include

comma here we also want to keep track of

the color that the user selects so color

set that to an object let's also say the

type should be a string right a string

of text or a color code and that's all

we need for attributes right we just

have those two pieces of data they want

to keep track of okay and finally let's

take care of edit and save this is where

the real magic happens so edit controls

the interface that the user sees in the

word press editing screen and save

controls what HTML actually gets output

into the post right so save controls

what you would see on the front end for

that block now for both of these instead

of X what we actually want is a function

so function parentheses curly brackets I

like to drop down inside the body of the

function let's do the same thing for

save instead of X give it a function

parentheses curly brackets now within

the parentheses for both of these

functions let's include a parameter

named props

I don't want to jump into the rabbit

hole of what props is for now all we

need to know is that when WordPress

works with our custom block type when it

calls these edit and save functions it's

going to pass into it different methods

and data and by including props here we

will have access to those methods and

that data all right now within the edit

and save functions we want to return

something so really oversimplify things

we want to return HTML but it's not like

we can just include a string of simple

HTML this will not work instead we need

to construct our HTML in a way that

WordPress will understand and as of the

date that I'm recording this lesson

WordPress is using a library named react

so we want to create our HTML or our

user interface or our Dom elements in a

reactive way now if you've never worked

with the react library before or maybe

if you've never even heard of react

that's a-ok we don't need to know very

much at all about react in order to get

up and running here for now all we need

to know is that in react there are two

main ways of creating an element there's

the manual technical way and then

there's a super easy and intuitive way

let's begin with the easy and intuitive

way now this might seem like a tangent

but trust me it's super related right

now I want you to open up a new tab in

your web browser and visit babel j SEO

or you can just Google for babel j s

from this website i want you to click on

the try it out link up in the navigation

menu okay now check this out in the

left-hand column let's type a bit of

HTML let's create a div element right so

opening tag closing tag and maybe inside

the div tags let's just say hello okay

now let's look at what the babel tool

automatically generated for us in the

right-hand column so we can see that

it's using the reacts library and its

use

a method named create elements and then

it's passing that method three arguments

so the first thing is the type of

element that you're creating so this

could be a div or a heading level three

or a paragraph right so if I come over

to the left-hand column and change this

from a div to a a four an anchor or link

you can see the automatically generated

code updates right we see an a here all

right now the second argument that

create element takes is the attributes

for this element so check this out over

on the left hand side if we give our

opening a tag an href of just a pound

sign for a test well we see that

reflected in the generated code right

that's the second argument any

attributes for the element and then

finally the third argument is the

content or the children for the element

in this case is just a string of text

right hello but over in the left hand

column what if instead of hello we

wanted to nest a span element inside our

link and that's where we would say hello

well now we can see that the third

argument is another call to react create

element right

this element is nested inside this

element now remember when I said there's

two main ways of creating an element in

react I said that there's the manual or

technical way and there's the super easy

and intuitive way now you might be

scratching your head saying what's going

on I mean the left-hand column is just

HTML but it's not so this looks like

HTML but it's actually a syntax named

JSX JSX is an incredibly useful syntax

where we can write code that looks like

HTML and then behind the scenes it does

all of the hard work for us and converts

it into the appropriate react dot create

element code and that is the type of

code that WordPress wants or needs so

let's get back to the real task at hand

here we want to create an HTML user

interface with maybe a label that says

you're cool border box and then below

that we want an in

field where the user can type in their

words so over on the left-hand column

let's make that happen so maybe we would

have a heading level 3 that says you're

cool border-box and then below that we

would have an input field now I see an

error message right here and that's

because in JSX

you can only have one top level or root

element to get around this we usually

just wrap all of our JSX

in a wrapper div right so div close that

wrapper div out down here we can indent

just to stay organized and now we see a

different error and that's because in

JSX every element needs to be closed so

inside the input let's include the self

closing forward slash now in html5 we

wouldn't need this but this isn't

technically HTML it's JSX

and it's got its own rules and corks and

tips and tricks okay let's say that this

input has a type of text okay now a bit

later on in the lesson below the input

we would include the color picker tool

right about here but for now let's not

worry about the color picker let's just

get our input field up and running first

so we just wrote this intuitive easy to

work with JSX code now what we want to

do is copy and paste the right-hand

column into our JavaScript file we don't

need to include the use strict so I'm

just gonna select and copy all of this

copied into my clipboard back in our

JavaScript file within our edit method

what do we want to return we don't want

to return a simple string of text what

we want to return is the code that's in

our clipboard so paste it in now

technically we could leave this code as

is and it would work as of today because

as of the date that I'm filming this

WordPress loads the react library into

the global scope so we can access it

just like this but there's no guarantee

that it's always going to be that way

right WordPress might change in the

future so the official WordPress e way

of doing this is to get rid of the word

react and

instead say WP dot element dot create

element currently the official wordpress

software is using the exact react create

element method but who knows maybe six

months to a year from now they will need

to modify that method or maybe they

would adopt a different library that's

very similar to react but isn't react

exactly basically this is just an

official WordPress abstraction layer and

while you could technically write react

dot create element this is the

future-proof way of doing things this is

the WordPress way of doing things so

it's a bit sloppy of me to leave react

here as well as down here but I don't

want to waste time in this video having

you watch me change this to WP elements

each time we copy and paste from the

babel tool okay moving on before we save

this file and test it out in the

WordPress admin let's come down to our

save method and within the body of our

function let's just return null this is

just a temporary placeholder eventually

we will want to output HTML for the

front end of our website but for now

just so we can test our edit interface

this will do the trick

so let's go ahead and save the file and

then back in WordPress go ahead and

refresh your edit screen your post edit

screen and now if I try to add a block

it shows up under most used for me but

since you've never used it before you

would need to click into common blocks

that's the category that we chose and

there it is my cool border box go ahead

and click on it and there we see it

there's our heading level 3 and there's

our input field however if we type into

this field green apple and try to save

this wordpress post so publish an update

if I leave this screen and then come

back to that screen so go back into that

post you can see that it did not save

what I typed into that field and this is

because we never told WordPress that

that input field has any sort of

relationship to our content

tribute remember we've got these two

attributes and they are the pieces of

data that we need to hold on to our text

content and the color so let me show you

what I would do let's jump back into

Babel to work with our intuitive JSX

code at this point you might be thinking

to yourself I wish we didn't have to

work in the browser because now we're

gonna have to re copy and paste and it's

awkward to keep jumping back and forth

between the browser and our text editor

well I will let you know that in the

real world professional developers are

not jumping back and forth between their

text editor and their browser like this

in the real world you can set up an

automated workflow so that we could

write intuitive JSX code right in our

JavaScript file here however in order to

set up that automated workflow you would

need to be at least a little bit

familiar with things like node and NPM

in the command line and in this lesson I

don't want to assume that you're

familiar with all of those things so in

this lesson we are going to keep

awkwardly jumping back and forth between

our text editor and the Babel website

but if you are a bit more advanced and

you are familiar with the JavaScript

ecosystem things like node and NPM and

the command line I recommend you check

out this popular package named create

guten block it's going to set up that

automated workflow for you I'm not going

to use it in this lesson so I'm not

gonna run through the instructions but

if you're familiar with NPM and the

command line these instructions are

super easy to follow so this is what I

would use in the real world

so that I could write JSX directly in my

text editor here but in this lesson I

don't want to exclude people who maybe

aren't familiar with the command line

and node and NPM and all of that so

stick with me let's just keep using the

Babel tool for the simplicity of this

lesson okay back to the task at hand we

need to tell WordPress that this input

element is related to our content

attribute right so that that data

actually gets saved and stored so what I

would do is on this input elements I

would give it an

on change handler so on change equals

and then let's include a pair of curly

brackets in this context the curly

brackets tell JSX that we want to do

something dynamic now let's make up a

function name that we will create in a

minute or two from now could be anything

but I'm going to call it update content

so now after every keystroke when the

user is typing into this field this

function is going to be called so then

we can create a function with this

matching name and in it we can update

the content attribute to whatever the

value of this input field currently is

set to now before we re copy and paste

this code into our text editor let's

first add one more attribute to the

input let's say value equals and then

curly brackets and let's say props dot

attributes dot content this way when a

user edits an existing post that's using

this block type the existing or previous

value will be pre-populated into the

input field all right now let's go ahead

and recopy and paste this into our text

editor so copy this back in our edit

method let's change what gets returned

so I'm just going to delete from right

after the word return down to the

parentheses semi-colon delete that and

just re paste in okay and if we just

told this element to run a function

named update content after every

keystroke or every change we better

create a function with that matching

name so within our edit method maybe

right above the line where we return

something let's create a function so

function I chose a name of update

content parentheses curly brackets and

what do we want to do we want to update

the content attribute to do that we can

work with props which is going to get

passed into our function and it has a

method named set attributes we passed

this method an object and we let it know

which attribute we want to up

in this case its content and we want to

set it to whatever that input field

currently contains right whatever the

user is typed in now every time that

input field calls this function it's

going to pass along the event as an

argument

so let's receive that event as a

parameter so in these parentheses I will

say event okay and then what did we want

to set the content to we can just say

event dot target dot value in other

words whatever element called this

function grab its value okay now let's

go ahead and save and take it for a test

drive back in WordPress be sure to

refresh this screen and now in this

field I will type green apple

click update to save that and then if I

leave this screen and come back to it

awesome you can see that it saved my

input alright next let's work on adding

a color picker field right about here

now I have some good news we do not need

to code and develop our own color picker

from scratch we do not need to reinvent

the wheel WordPress has a bunch of

pre-existing components that we can

leverage so check this out if you open

up the JavaScript console for your web

browser while you're on the edit screen

and if you type in WP dot components and

push enter and then if we expand this

you can see that there are all sorts of

different built-in components that we

can leverage and there just so happens

to be one named color picker so let me

show you how we can use this in our JSX

code let's jump back over to Babel and

over in our left-hand column right below

the input field let's create a new

element and just say color picker well

to be more precise in front of color

picker we should say WP components dot

color picker be sure to capitalize the C

in color and the P in picker the beauty

of react is the

can leverage reusable components like

this and basically pretend that they are

native HTML elements now just like we

tied our input fields to our content

attribute we need to tie the color

picker to our color attribute right so

that the value actually gets saved so

let's do this on this element let's give

it a few attributes instead of on change

we want to give it an attribute named on

change complete this way when the user

is dragging the color selector the color

value doesn't get updated a thousand

times per second so the word complete

here will just make sure that whatever

function we pass this will only be

called an appropriate number of times so

let's say unchanged complete equals

curly brackets let's make up a function

name I will say update color okay and

just like with our input field we want

to pre populate it with the existing

value if it has one

now instead of value for the color

picker we want to use an attribute named

color that's just what the creator of

this component chose so let's say color

equals curly brackets and then props dot

attributes dot color okay now let's go

ahead and read copy and paste the

generated code over on the right hand

call them so copy that back in our text

editor now inside our edit method be

sure to keep our update content function

that we created and the only part that

we want to update is what's getting

returned so right after the word return

down to the parentheses semi-colon re

pasted in okay now every time the color

picker field gets updated it's going to

try to call a function named update

color so we want to be sure to create a

function with that name so right above

the return we can just say function

update color parentheses curly brackets

just like we did before we want to call

props set attributes of props dot set

attributes pass it an object and we want

to update the color attribute its value

is going to come from the color picker

component

now every time that color picker

component calls this function it's going

to pass it its value so within these

parentheses let's include a parameter we

call it value to receive it and then

down here let's say color should equal

value dot hex because we are interested

in the hexadecimal color code

specifically all right at this point

let's go ahead and save the file and

test it out so back in the admin

dashboard be sure to refresh the Edit

screen see green-apple let's go ahead

and choose a matching green color now I

will save or update the wordpress post

and if I leave this screen and then come

back to it awesome you can see that it

saved our green color now let's change

gears the editing experience for our

block is done at this point now let's

focus on the HTML that it actually

outputs right the content that you would

see on the front-end of the website for

this block because at the moment if I

save this post and try to view it on the

front end you can see that the content

area is completely blank and that's

because back in our text editor remember

down at the very bottom of our code the

save method isn't returning anything

it's just returning null so let's write

a bit of JSX that would create the

appropriate HTML that we would want to

see on the front end so let's jump over

to Babel I want to clean slate so I'm

going to completely erase the left-hand

column if you want to copy and paste

this into a blank text editor just for

reference that's okay but I'm going to

delete it okay and at the end of the day

what do we want this block to generate

what do we actually want to see on the

front end of our site how about a

heading level 3 and inside the heading

we would want to see whatever text the

user typed into the field so curly

brackets and we would just say props dot

attributes dot content okay and then we

want to give it a thick border of this

selected color so on the opening h3 tag

we can

say style equals curly brackets to do

something dynamic and then inside those

curly brackets let's include another

inner pair of curly brackets because we

want to pass style an object so the

property would just be the name of the

CSS property in this case border border

: and then we could include a string of

text here so quotes and then say a 5

pixel thick solid red border but we

don't want to hard-code the color value

so instead of quotes for a simple string

of text we can swap out the quotes for

back ticks this is the character to the

left of the one key on your keyboard be

sure to change the closing quote to a

back tick as well and now that lets us

do something dynamic inside this string

of text actually it's no longer a simple

string of text the back ticks turn it

into a template literal and now we have

a superpower so we can get rid of red

and say dollar sign curly brackets

inside the curly brackets we can pull it

in a dynamic value so we can just say

props dot attributes dot color if you're

having a hard time typing this out don't

worry in the resources or description

for this lesson I will include a link

with the final product JavaScript that

you can just copy and paste if you want

to anyways let's go ahead and copy and

paste this generated code into our

JavaScript file so copy that down at the

bottom in our save method instead of

returning null we want to return our

clipboard so paste it in before I save

this one final public service

announcement remember that in the real

world you don't want to leave this as

react you'd want to swap this out for WP

element I haven't been doing this every

step of the way just to speed up the

lesson a bit but you get the idea okay

let's go ahead and save that and jump

back into WordPress now if we refresh

the front-end for that post nothing is

going to change and that's because

WordPress doesn't directly use your

block type anywhere except the Edit

screen so we can't retro

actively update blocks with our code

like that we need to actually go back in

to the Edit screen for that post and as

soon as we refresh this edit screen

WordPress is actually going to show an

error message for the block so check

this out if i refresh we see this

message this block contains unexpected

or invalid content now my own personal

opinion I'm not sure if I agree with

this decision that WordPress made but I

realized that they had good intentions

so essentially any time the output for

your block changes at all so previously

it was set to null when we saved our

block and then obviously this code is

way different than null but anytime the

output of our save method changes at all

it's going to invalidate our block and

WordPress is going to say uh-uh

no way your blocks code is not allowed

to change the users content without the

users permission so it's going to show

this message to the end user they have a

few different options in our case we

just want to delete this block so we can

insert the new updated version of the

block so I'm just going to click convert

to HTML and then delete the block

entirely so remove block and then just

reinsert a new copy of the block so my

cool border box insert it again I'll

need to type in the value again so

green-apple

choose a green color click update and

now if we go check the front-end and

refresh awesome there's our text and

there is the appropriate border color

just to show the reusable nature of

blocks why don't we add another block

that says banana and it has a yellow

border so back in here we could just add

another my cool border box say banana

choose a yellow

update go refresh the front-end awesome

now that concludes the hands-on portion

of this lesson but at the end here I do

want to address a few common concerns or

questions you might have and I will also

give you an extra credit assignment so

first of all let's talk about that weird

situation where WordPress did not want

us updating the save method let me show

you how this works

so back in our code even if we change

something super subtle so if we change

this from a heading level 3 to a heading

level 4 even something super subtle like

this if I save that and then go back

into WordPress and refresh the Edit

screen WordPress goes nope no way this

block now has unexpected or invalid

content when I first saw this behavior I

thought I was doing something wrong as a

developer or that I had ran into a bug

but this is actually the intended

behavior of WordPress the creators of

WordPress really do not want a plug-in

to be able to change the HTML content of

a post basically without the express

written consent of the user or author

now I understand why WordPress would set

things up this way but in my opinion

this greatly reduces the usefulness of

blocks personally I would never use a

block like this on any of the websites

that I maintain to me the whole idea of

a block is that I would want to be able

to change the code in one location and

potentially have an update hundreds of

instances across my website I think that

would be awesome

however by default that is not how

blocks work you would need to go into

each individual post and not only resave

the post but you would need to delete

the invalidated or outdated instance of

the block and reinsert it so as a web

developer and maintainer of large

websites I can't really endorse using

blocks like this however this type of a

block is great for a sort of site

builder experience or a WYSIWYG

experience or a drag-and-drop editor but

because the data or attributes are so

closely tied and married to the H

tml the whole situation is just super

unattractive to me as a developer and

maybe that's okay right the whole idea

of the new block editor is that it gives

the end user more control but not

necessarily the developer now if you are

a control hungry developer you maintain

websites and you want all the control in

the world from within your code I do

have some good news instead of this

default block that we just created you

can create something called a dynamic

block now I've seen conversations on

github where the creators of the new

block editor sort of discourage you from

using dynamic blocks unless you really

need to so the idea behind a dynamic

block is that you use JavaScript for

your edit method right you use

JavaScript for the user interface in the

Edit screen but then you would use PHP

to generate the output HTML on the fly

and your JavaScript save method would

take a hands-off approach and simply

return null now again I've seen the

creators of WordPress say that you

should really only use a dynamic block

if you really need to use PHP to fetch

something dynamic from the database or

some other PHP heavy task however and

this is the control hungry developer in

me speaking what I think is pretty cool

is to use a dynamic block even if I

don't need to do anything inherently PHP

ish because a dynamic block does not

throw a fit if the output changes

basically if you want to create a

dynamic block you would just set your

save method to return null just like we

had before earlier in the lesson return

null and you would let PHP generate the

output on the fly to do that and again

you can pull up the same documentation

that I'm looking at by googling

WordPress creating dynamic blocks but to

achieve this in your PHP plug-in file

you would just say register block type

include the short name or variable name

of your block type and then give it a

render call back so this is a PHP

function

you can choose whatever name you want

here and then that function can just

return a simple string of HTML again the

reason I would do this is because you

are free to update the HTML that

function returns as many times as you

want in the future and it's not going to

show this little message right this

block contains unexpected invalid

content now the question is is this

abusing the whole idea of a dynamic

block is this really how the creators of

WordPress want you to create your blocks

probably not or maybe it is the new

block editor has only been out for about

a month or less at the time of this

recording so only time will tell all I

can say is that as a web developer and

maintainer of large websites I love the

idea of dynamic blocks my end users

would be free to use blocks throughout

hundreds or even thousands of blog posts

and then if I just make one change in

that PHP function the users don't need

to go into each individual post on the

admin the front-end of the website is

just automatically updated to me this is

the best of both worlds

the admin editing experience is really

intuitive it's using the react library

it's very fast and modern but the data

isn't so married to the final HTML that

it leaves a bit of freedom from the

developer side all right now the next

thing I want to address at the end here

is the idea of using a custom block to

store a meta value like you would with a

custom field instead of using a block

just to generate HTML in order to show

you what I mean and also just to learn

more about blocks in general let's take

a look at my database all right so this

is the database entry for that post that

I was working on and here is the post

content field before the block editor

this is where just our standard HTML

would live right paragraphs headlines

unordered lists and that's still

basically what's going on I think you'll

be surprised how simple the new block

editor actually is in terms of what it

saves to the database so this is that

first instance the green-apple box and

this is the second instance the yellow

banana box

let's look at the first instance in the

middle we just see a bit of static plain

old-fashioned HTML this is the output

that our block generates but you can see

that before and after that HTML there

are comments the comments say which

block type this section is using and

then right after that on this opening

comment we see an object a JavaScript

object with our different attributes

right content and color at the end of

the day that's all a block is from the

database perspective now we can start to

see why the creators of WordPress did

not want to let your save method change

the HTML output the idea is that the

HTML in this field should be considered

sacred or untouchable once the end user

has generated a bit of HTML nothing

should be able to change it without

their permission and at the end of the

day even though I'm a control hungry

developer I can totally understand and

respect the decision my WordPress to

invalidate your block if this would

change

now obviously the user is free to change

the dynamic aspects of this output like

the color or the text content but

anything that's not dynamic anything

that's coming from our save method is

not allowed to change now if we were

using a dynamic block this content would

not exist because we set the output to

just be null but these comments would

still be in place so WordPress would see

AHA this section should use this block

type and this is the raw data and

attributes and then as long as you

registered your block type in your PHP

like we saw just a moment ago remember

register block type and then you give it

a render callback PHP function WordPress

would know to use that to generate the

HTML on the fly so no HTML would exist

in the database for that block all right

now on a slightly related topic let's

talk about meta fields or post meta for

example what if we did not want a

traditional block like this that stores

the HTML in the database

nor did we want a dynamic block that is

still going to use PHP to dynamically

insert the HTML on-the-fly what if we

don't necessarily want our block and its

data to be tied to any sort of HTML

whatsoever what if we simply want it to

store these data values like banana and

the color code for yellow what if we

want it to save those values somewhere

else in the database besides this

smooshed together post content field

well that's what post meta is for

metadata it's it's own separate area in

the database earlier in the course we

learned how to query for certain posts

depending on certain metadata values

right this is how you can create

relationships between posts like saying

a certain professor teaches a certain

subject or teaches at a certain campus

creating relationships is just one

example use of metadata big picture

there's a million different reasons of

why you'd want to create metadata for a

post and at first glance you might think

that the block editor isn't going to

play nicely with metadata but that's not

the case it's actually very simple so

let's imagine that I wanted to save this

value of green apple or whatever the

user entered for content imagine I

wanted to save that into a meta field

all you need to do is go into your

JavaScript and up towards the top of our

block look in your attributes area for

content inside the object that describes

content we could just say comma source

should be meta and meta and this is

where you choose the meta name you could

choose anything unicorn

pizza content ok that's step one there's

only one more step because the block

paradigm is powered by JavaScript not

PHP we need to make sure that this

metadata of content is available in the

REST API right because that's how

javascript is going to get access to the

data so in your plugins PHP you just

want to include something like this

this is pulled directly from the

official WordPress documentation all

it's doing is registering your metadata

so for post that would be the name of

your post type

maybe it's professors maybe it's

campuses or maybe it really is just post

this second argument is the name of your

metadata so that could be content or

color or whatever you choose and then

you just need to set the option show in

rest to true

by default the rest API doesn't show all

metadata for a post so this is just

enabling that and that's all we have to

do so now when you type in this value

banana or green apple that's going to be

saved as a piece of metadata for that

post at that point it's up to you how

you use the metadata you access it just

like you normally would from your

front-end PHP theme files or you can

access it with JavaScript from the

arrest API okay and now to close out the

lesson if you are going to be using

metadata you might not want to rely on

your end user having to manually insert

your block if you think about how

plugins like advanced custom fields work

the idea is that your end user is

presented with a predetermined set of

blocks or should say custom fields this

way the end user doesn't have to

remember to insert a certain block or

field the fields are just there in their

face waiting to be filled out believe it

or not the new block system has

something like this baked into its core

so this is the official WordPress

documentation on the block editor there

is a page called templates and

essentially for a certain post type you

can register a block template meaning

when someone creates a new post of that

certain post type you can define

programmatically which blocks should

appear so that way the user doesn't have

to manually insert certain block types

because we can't expect the end user to

know which data we want them to fill in

I think that this block template feature

has tremendous potential but if I'm

being perfectly honest instead of

setting all of this up myself I would

probably just continue to use the

advanced cuss

Fields plug in the team behind that

plug-in have spent thousands and

thousands and thousands of hours

perfecting the plug-in so unless I

needed to do something super custom that

that plug-in did not allow for or unless

I wanted to create my own competing

plug-in I probably just use advanced

custom fields when it comes to metadata

and meta fields

okay now changing gears before we

finally bring this lesson to a close I

want to give you an extra credit

assignment so back into the WordPress

editor I think it would be cool if this

area that says you're cool border box

instead said preview : and then maybe it

would show whatever text you've typed

into this field and it had the matching

border of whatever color you chose and

the idea is that it updates in real time

it updates every time a keystroke occurs

in this field and every time a new color

is chosen now the good news is that

that's kind of the entire points of the

react library every time our attributes

get updated this component is going to

re-render so i won't spoil the fun for

you but i will give you a hint in your

JSX

for the edit method right where we have

the input field and the color picker

component all you would really need to

do is adjust this heading level 3 you

could really just copy and paste the

code from your save method so you can

output the content attribute here and

you could output the style attribute on

the opening tag it's a basic example but

I think it'll open your eyes to what's

possible in the editor react really does

create some amazing opportunities for

intuitive user interfaces ok and that

does bring the lesson to a close we've

only scratched the surface of what's

possible with blocks but you are now

familiar with the very basics from here

the possibilities are limitless if you

made it till the very end of this lesson

give yourselves a pat on the back we

covered a lot of ground at this point I

encourage you to go experiment and most

importantly have some fun while you're

doing it take care

you

Related Videos

Be the first to comment “WordPress & JavaScript in 2019: Coding a Customized Block Sort for Gutenberg Block Editor”

Your email address will not be published.

There are no comments yet.