Tag Archives: Development

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.

How to Use to registerBlockType() to Create Blocks in WordPress

I have wanted to write a blog post on the registerBlockType() JavaScript function in WordPress for a while now.  While working on my Gutenberg Development Course I learned that this function is at the heart of Block Development in WordPress since you must use it to create custom blocks.

How to Access registerBlockType()

The creation of a block in WordPress (as of writing) is done via JavaScript (not PHP) using a function called registerBlockType().

This function lives inside of the wp.blocks library, which contains helpful functions for block creation, as well as the core WordPress blocks themselves.

WordPress makes this function accessible as a global variable in the window object as wp.blocks.registerBlockType().

Here is a shortcut you can add at the top of your JS file to “import” this function into your code:

NOTE: At the time of writing, wp.blocks is NOT available as a package you can actually import into your code as you would other packages.  It is only available via the global window object.

registerBlockType Name and Settings Parameters

The registerBlockType() function takes two parameters: name and settings.

  • name [string] –  “Block names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-block” Source
  • settings [Object] – The settings parameter is an object with several predefined properties that must be assigned for your block to work.  We will look at these in more depth.

Here is what this would look like without all of the settings configured.

registerBlockType Settings

The registerBlockType() settings object has seven properties that include both meta information about the block as well as methods controlling the UI and functionality for the block in the editor and on the frontend.

  • title [string] – The title setting gives your block a searchable, human readable name. It should be escaped using wp.i18n.__().
  • category [string] – The category setting determines under which heading a user can find your block. Options include “common”, “formatting”, “layout”, “widgets” and “embed.”
  • icon [Dashicon|Element] – The icon setting for registerBlockType determines what icon will represent your custom block. Can use a WP Dashicon or custom SVG.
  • keywords [Array] – The keyword setting provides three additional keyword / phrases that will display your block when searched for. Limited to 3.
  • attributes [Object] – The attribute setting identifies what dynamic content we are using in our blocks. Several attribute options exist depending on what types of data we are using. Attribute settings are optional if your block uses no dynamic data. This data is then made available via props.attributes.name. Read more.
  • edit [function] – The edit setting determines what be displayed in the editor area for the block. Must return a valid React element using wp.element.createElement() or JSX. Also accepts dynamic data as a props parameter.
  • save [function] – The save setting determines what be displayed when the block is converted to content for the frontend. Must return a valid React element using wp.element.createElement() or JSX. Also accepts dynamic data as a props parameter.

The first four of these [title, category, icon and keywords] are more for the user and include meta information about the block itself.  The last few settings [attributes, edit, save] are a bit more complex and control the actual functionality of a block.

Example of registerBlockType in Action

In order to show all of the settings in action, particularly the attributes setting, we need to have a block with some sort of dynamic data.

Below is an example of a simple block with one editable field.  This shows registerBlockType() in action with all it’s parameters and settings.

Depending on your comfort level with JavaScript (and possibly React) the code above may make sense, or there may be a bit inside of attributes, edit and save that doesn’t make complete sense.

Hopefully though, this post helps you understand the basics of how registerBlockType() works and gives you a basis to get started with it.

Learn More About Building Blocks in WordPress

To learn more about building blocks and other aspects of Gutenberg Development, please check out my Gutenberg Development Course.

PHP for WordPress Talk on WordCamp TV

A couple weeks ago I had a chance to present on PHP for WordPress at WordCamp Baltimore 2015.  Thanks to the good folks who recorded and got everything together to post on WordCamp.tv you can now watch the video of the talk.

Check it out and then head over and learn more about my PHP for WordPress Course at Treehouse 🙂https://videopress.com/videopress-iframe.js

How to Deregister, Unqueue and Unhook a Parent Theme CSS Stylesheet

There comes a time when working with a WordPress project where you want to not include certain CSS from a parent theme or plugin.  For example, a parent theme may include extra stylesheets that you don’t want or a plugin may be adding styles that conflict with your site.

On a recent project, I wanted to remove the parent styles just on a certain section of the site.  Here’s how to do it.

First what you have to do is find the handle for the parent stylesheet you no longer want.  Let’s say for example that we had a twentyfifteen child theme and wanted to remove the parent styling.

You would go to the parent theme’s functions.php file and find the hook.  It can help to search for “wp_enqueue_style” to find the CSS includes faster.  Here is what it looks like in twentyfifteen:

TwentyFifteen Theme Functions.php Including Stylesheet

We can see the handle is “twentyfifteen-style” and this is what we will now use to dehook it using the code below:

function unhook_parent_style() {

  wp_dequeue_style( 'twentyfifteen-style' );
  wp_deregister_style( 'twentyfifteen-style' );

}
add_action( 'wp_enqueue_scripts', 'unhook_parent_style', 20 );

It’s important that we add this code into a function and then hook the function into wp_enqueue_scripts.

If you only want to unhook the styles on certain pages, you can also add conditional code like this:

function unhook_parent_style() {

  is_page_template( 'custom-template.php' ) {
    wp_dequeue_style( 'twentyfifteen-style' );
    wp_deregister_style( 'twentyfifteen-style' );
  }

}
add_action( 'wp_enqueue_scripts', 'unhook_parent_style', 20 );

This will only unhook the parent styles when WordPress is loading pages that use the custom-template.php file. You can also use any of these conditional statements as well.

Shout out to Brad Dalton over at WP Sites for the original code snippet on How To Deregister & Dequeue Style Sheets!

A List of Commonly Unknown WP Function

Elliott from Laser Red wrote a round up of helpful WordPress functions that you don’t usually read about:

  1. get_post_field
  2. wp_list_pluck
  3. antispambot
  4. checked/selected
  5. body_class
  6. human_time_diff
  7. wp_send_json_success/error
  8. wp_remote_get/post
  9. get_template_part

If you’re a WordPress dev, I really suggest you check out this article, because he gives an explanation and code example for each one of these in an a quick, easy to read format.