Building Gutenberg Blocks - Part 3: Custom Styling

[members_logged_in]

With Gutenberg on the horizon for WordPress, it is a good idea to start providing some basic customization skills in preparation for the future. In this third of three webinars, we will build custom Gutenberg blocks that extend the prior two sessions and add in the ability for settings panels and custom stylings.

Save the Webinar 0

Webinar Originally Broadcast: July 27, 2024

Video Download: HD Download | Mobile Download

Additional Downloads: PDF Handout

Additional Notes:

Audio Download (Podcast File) -> Download MP3

UPDATE

I have solved the issue that was experienced at the end of the webinar. There were TWO problems with my code.

The first issue could be found within the save function of the registerBlockType while I was setting the variables. What was written in the code (incorrectly) was this:

var content = props.attributes.alignment;
var alignment = props.attributes.alignment;

What should have been written was:

var content = props.attributes.content;
var alignment = props.attributes.alignment;

Notice how I was saving the attribute alignment to BOTH variables.

The second issue was the most important part, and the reason why the block was failing to “initiate”.

I had left the final line in the javascript file as follows:

});

Except by doing that, I wasn’t actually “running” the instance of the block. What needed to occur on that last line was as follows:

})();

(Such fun live coding can be) :)

[/members_logged_in] [members_not_logged_in]

You need to be logged into your membership account to have access to the webinar replays.

[/members_not_logged_in]