Gutenberg Archives - WP snippets til Christmas

Gutenberg colour palette by className

I have run into an issue with the Gutenberg color palette because it always returns the HEX value of the selected color. What I wanted were options to select a color value in the admin, but have a css class string on the frontend with my selection.

Here is a simple React component that does just that. It selects and displays the colors in the admin the same way that native color palette does, but for the frontend, it outputs the provided string as an attribute.

Put this component inside your codebase, but make sure that you have all the imports provided using node_modules.

import { find } from 'lodash';
import { useState } from 'react';
import { getColorObjectByColorValue } from '@wordpress/editor';
import { ColorPalette } from '@wordpress/components';

export function ColorPaletteCustom({
  colors,
  value,
  onChange,
  disableCustomColors = true,
  clearable = false,
  label,
  help,
}) {
  const [color, setColor] = useState(value);

  const colorValue = find(colors, { name: color });

  return (
    <div className="components-base-control">
      {label && <label htmlFor="color-pallete" className="components-base-control__label">{label}</label>}
      <br />
      <ColorPalette
        colors={colors}
        disableCustomColors={disableCustomColors}
        value={typeof colorValue === 'undefined' ? color : colorValue.color}
        onChange={(newColor) => {
          const colorObject = getColorObjectByColorValue(colors, newColor);
          
          setColor(() => newColor);
          onChange(typeof colorObject === 'undefined' ? '' : colorObject.name);
        }}
        clearable={clearable}
      />
      {help && (
        <p className="components-base-control__help">{help}</p>
      )}
    </div>
  );
}

Next, go to your block and import this component inside the InspectorControls component.

 <ColorPaletteCustom
  label={'Color'}
  colors={[
    { name: 'red', color: '#D8262C' },
    { name: 'pink', color: '#F2BCC0' },
    { name: 'black', color: '#000000' },
  ]}
  value={styleColor}
  onChange={
    (event) => props.setAttributes({ styleColor: event })
  }
/>

This component supports all the props that you can use on the Gutenberg color palette the same way, so for detailed documentation, check this link.

Remove Gutenberg block editor’s tips

Dec 13thDec 13th

Are you tired of Gutenberg’s tips?

Do you want to get rid of it once and for all users automatically?

Here is a simple PHP snippet to automatically remove them for all users.

function advent_remove_gutenberg_tips() {
	$script = "
jQuery(document).ready(function(){
    var is_tip_visible = wp.data.select( 'core/nux' ).areTipsEnabled()
    if (is_tip_visible) {
        wp.data.dispatch( 'core/nux' ).disableTips();
    }
});	
	";
	wp_add_inline_script( 'wp-blocks', $script );
}
add_action( 'enqueue_block_editor_assets', 'advent_remove_gutenberg_tips' );

Of course, you can also go to editor’s options and uncheck “Tips” checkbox.

But since these settings are saved on the user’s browser using LocalStorage, the tips will come back every time you’ll use a different device to access the editor.

It’s also necessary to do that individually for each administrator of the website.

Get Gutenberg reusable blocks outside the Block Editor

Dec 4thDec 4th

Did you know that Gutenberg Reusable Blocks are stored as a bundled Post Type in WordPress database? Yep they are. You can even access them on the Reusable Blocks hidden admin screen available in example.com/wp-admin/edit.php?post_type=wp_block.

If Reusable Blocks are registered as a post type, then they are queryable as well as any post type in WordPress.

So we could easily get them outside of the editor…

Yeah! Looks great, let’s build some cool stuff!

Introducing get_reusable_block PHP function

This function will only get the formatted HTML content of a given Reusable block ID and return it.

Note: I’m prefixing the function with advent_ for the sake of WordPress Coding Standards ?

function advent_get_reusable_block( $block_id = '' ) {
	if ( empty( $block_id ) || (int) $block_id !== $block_id ) {
		return;
	}
	$content = get_post_field( 'post_content', $block_id );
	return apply_filters( 'the_content', $content );
}

So we can easily get any reusable block content by providing its ID. The following snippet will use get_reusable_block() function to display this block outside the editor (in your footer for example):

echo advent_get_reusable_block( 57 );

Example of advanced use: build a Reusable block shortcode

It’s quite easy to build a custom shortcode using our previous get_reusable_block function:

function advent_reusable_block_shortcode( $atts ) {
	extract( shortcode_atts( array(
		'id' => '',
	), $atts ) );
	if ( empty( $id ) || (int) $id !== $id ) {
		return;
	}
	$content = advent_get_reusable_block( $id );
	return $content;
}
add_shortcode( 'reusable', 'advent_reusable_block_shortcode' );

We now have a brand new shortcode, which can be easily used to display reusable block even in places where the block editor is not available!

[reusable id="57"]

Use cases for this shortcode are various:

Custom Post Types without Block Editor enabled (so they are in Classic Editor mode)
Text Widget (so reusable blocks can be added in your footer or in your sidebar)
Advanced Custom Field (ACF) WYSIWYG editor field
Gravity form confirmation message (the message that is displayed to users after filling the form)
And even on… websites with Classic Editor plugin! So you can use Gutenberg Reusable Blocks without having it in any of your Custom Post Types, lol ?

Here is a plugin that is using this snippet. It also provide a Reusable Block Widget and in provides an extended admin interface to manage and preview reusable blocks:

Reusable Blocks Extended

Merry Christmas, lovely WordPress people! ?