Category Archives: JavaScript for WordPress

WordCamp London Gutenberg Workshop

For years I have wanted to make it to WordCamp London.  Since doing my study abroad at Cambridge, I have felt a second home in the UK.

This year I got to finally be in England for WordCamp London 2018.

The week before the Camp I did an informal Gutenberg workshop with the wonderful team from Pragmatic, a leading WordPress agency in the UK.  You can read my write from my Gutenberg Jam Session with Pragmatic here.

The Gutenberg Workshop

Originally I had hoped for a solid 3 hrs to introduce Gutenberg from a development perspective and give time to coding some blocks.  Instead I had 40 minutes for the “workshop” and did my best to do both of these things, but rather than code together, I just pointed a repo of example blocks and walked through what I could 🙂

Overall I think it went really well.  You can see the slides below and hopefully the video will go up on WordPress.tv in not too long.

We didn’t get much time for questions, but one of the coolest pieces of feedback was someone sharing they built their first plugin while listening to the session.  So cool 🙂

Checkout WordCamp London Next Year!

If you happen upon the UK next year and overlap with WordCamp London I would highly suggest you check it out!  WordCamp Brighton and Manchester are also on my list 😉

Thanks to all the organizers and volunteers for their work in putting on the event, and to the sponsors who made such a classy event possible for so little 🙂

Also, thanks to Bluehost (I have a special Bluehost discount page) for helping with some of my travel in getting to the event!

Learn More About Gutenberg

In 40 minutes, I only covered a bit of what my full Gutenberg Development Course covers so I would encourage you to check it out if you want to dig deeper into developing with Gutenberg.

Gutenberg Jam Session with Pragmatic

This week I had the opportunity to stop by Pragmatic, a leading WordPress UK agency to do an informal chat / workshop around Gutenberg.

What We Talked About

I didn’t want to take too much time going over things that I already covered in my Gutenberg Development Course.  But there were still some folks who hadn’t taken the course completely, so we did talk about a few things:

  • Core GB Architecture (where is the React abstraction, how is the Redux abstraction different than straight Redux)
  • How to access the globally available libraries within WordPress
  • What you need to do to get wp.element (React) on the frontend of the site
  • Approaches to creating blocks with rich frontend JavaScript
  • ACF vs Gutenberg && ACF to Gutenberg when appropraite
  • Using meta or API data in blocks
  • Migration possibilities for custom editing tools in the classic editor (or with ACF)
  • Tooling configurations and WordPress npm packages
  • Mmm, a bunch of other great things I can’t remember 😉

 

Sneak Peak of Theming with Gutenberg Course

I am currently working on a Gutenberg Theming course with my buddy Joe Casabona.  The course will likely be done at the end of the month and since Pragmatic does do a lot of custom WordPress themes I thought it would be good to talk through the various aspects of that course.

Love Me Some Pragmatic, Highly Recommend

I have gotten to know a number of Pragmatic employees over the last few years.  They are great folks and quite smart.  If you are looking to work at an enterprise level agency with great folks in lovely Brighton, UK, I highly suggest you check them out and keep a pulse on open job positions.

 

WordCamp Miami Gutenberg Workshop 2018

This year, WordCamp Miami continued it’s focus on providing resources around learning JavaScript for WordPress.  Not only did they have a dedicated JavaScript track like they have in the past, they also had a full day workshop on Gutenberg Development.

Brian Richards, Grzegorz (Greg) Ziółkowski, Josh Pollock and myself each did part of the workshop that broke down as follows:

  1. Future of WordPress Development – Grzegorz Ziółkowski
  2. Setup & Introduction to Gutenberg: Tooling And Terminology – Zac Gordon
  3. Creating Your Very First Gutenberg Block – Brian Richards
  4. Building Custom Gutenberg Blocks: From Static to Dynamic – Josh Pollock

You can still go back and watch the entire live stream here:

You can also find my slides to my portion of the workshop here:

 

You can also find the GitHub repo of example files for the workshop here.

Definitely Recommend the Next WordCamp Miami!!!

If you have a chance to make it to the next WordCamp Miami I highly suggest it!  It is always a great camp and they have a tendency to put a strong focus on teaching new and emerging technologies, like JavaScript and Gutenberg.

How to Use wp.i18n.__() to Allow for Translation of Your Gutenberg Block Text

While working on my Gutenberg Development Course I was really happy to find out that the core developers ported over much of the internationalization features we are familiar with on the PHP side into a client side library available as wp.i18n.

Example of __() in Action

 

Since wp.i18n is available in the global scope, you can access it directly without needing to officially “import” anything.  In this example we are pulling out the __ function from the wp.i18n library it exists within.

Notice when we call the function, we do not need to pass in a second parameter with the text domain for our plugin or theme.  This will be automatically sorted out for you.

Additional Internationalization Functions
We also have access to some other helpful internationalization functions that you may recognize from the PHP side.

  • wp.i18n.__()
  • wp.i18n._x()
  • wp.i18n._n()
  • wp.i18n._nx()
  • wp.i18n.sprintf()

Most of the time you only need __(), but if you are familiar with these other functions already in PHP or just want to dig deeper, you can explore the core library readme file here.

Learn More About Gutenberg Development

If you would like to learn more about building with the new editor in WordPress, please check out my Gutenberg Development Course 🙂

How to Add Block Templates to Your WordPress Theme or Plugin Gutenberg

How to Add Block Templates to Your WordPress Theme or Plugin

While working on my Gutenberg Development Course, one of the hardest things I found to research was how to add block templates to your WordPress theme or plugin.

Example of a block template with and image and paragraph block

Example of a simple template with image and paragraph block

Block templates are a way to have certain blocks show up by default for a new post, page or custom post type.  You can also “lock” the template to prevent users from adding or removing blocks.

 

How Block Templates Work

Templates are added as a parameter when registering a post type in WordPress.  Sometimes this is done for your own custom post type.  But it can also be done for existing and native post types like Posts and Pages.

The block template setting itself is an array of blocks that you want included.  There is also an additional setting called “template_lock” that can be set to true or false to lock down the template to users.

You can also add additional configurations like custom placeholder text for blocks or set the alignment.

An Example of Block Templates

You can add the code below to any plugin or theme to modify template setting for post types of your choice.

Some notes on this code:

  • Notice the conditional statement determining what post type to apply this to.  Can change for your own needs.
  • The template_lock argument determines whether users can add or remove blocks with this post type.
  • The name used for blocks is the name used when creating them.  See a list here of all default blocks, which you can use to lookup (or guess) the programatic name for a block.
  • You can add additional configurations like placeholder text, alignment, or other block attributes you want set by default.

Learn More About Gutenberg Development

To learn more about developing with blocks in WordPress, please check out my course Gutenberg Development Course.

Custom Tooltip Button in Gutenberg WordPress with JavaScript

How to Use the Tooltip Component in Gutenberg

While working on my Gutenberg Development Course I realized that default toolbar buttons have a nice Tooltip that appears over them on hover.

Gutenberg Link Tooltip.png

Example of the tooltip component in action with the Bold button

I also remembered seeing a Tooltip component in Gutenberg when walking through the source code.  It turns out it is pretty easy to add these in our own block as well.

Setting Up the Tooltip Component

In order for the Tooltip component to work you simply have to get it from the wp.components library.  It is found at wp.componentns

Then you simply wrap <Tooltip></Tooltip> around whatever you want to trigger the tooltip.

The Tooltip takes two parameters:

  • text [required] = What text should appear in the tooltip
  • position [default “top”] = Determines where the tooltip will appear in relation to the child content

Here is an example of Tooltip in action:

NOTE: This example also includes the Button and Dashicon components.  This is not necessary.  Tooltip can be wrapped around other components, but I have only been able to get it working in the editor, not on the frontend.

Here is a look at what the code above can create:

High Contast View.png

Example of tooltip applied to custom block button

Want to Learn More About Gutenberg?

If you would like to learn more about working with JavaScript in WordPress, check out my Gutenberg Development Course.

Sneak Peak Video from My Gutenberg Development Course – “An Overview of registerBlockType”

At WordCamp US in early Dec 2017 I set out a goal to release a Gutenberg Development Course by the end of the year.  As of writing it is New Years Eve 2017 and I just made it!

One of the important functions I learned about while working on the course is registerBlockType, which is used to register to setup blocks.  This video gives an overview of the function.

An Introduction to registerBlockType

In this video we discuss the following:

  • What the registerBlockType function does
  • What major parameters and setting you need when looking at it
  • A few simplified code examples
  • Sneak peak of the blocks we will use to learn more about registerBlockType

CORRECTION: At 05:10 in the slide should look like below:

fixed-screenshot.png

Corrected Slide at 05:10 in with function and JSX braces

To Learn More About Gutenberg Development

If you would like to learn more about developing with the new editor in WordPress, please check out my Gutenberg Development Course.