4

I'm generating block variations on top of the "native" Gutenberg blocks (eg. core/***). For example, I have a "catchphrase" block, which is a variation of the paragraph block (core/paragraph):

import { addFilter } from "@wordpress/hooks";

const paragraphSettings = (settings, name) => {
  if (name !== "core/paragraph") {
    return settings;
  }
  settings.variations = [{
      icon: "sticky",
      name: "catchphrase",
      title: "Catchphrase title",
      description: "Catchphrase description",
      attributes: {
        variation: "catchphrase"
      },
      isActive: (blockAttributes, variationAttributes) => { 
        return blockAttributes.variation === "catchphrase"
      }
    }]
  return settings;
}

addFilter(
  "blocks.registerBlockType",
  "gracietco-gut/supports/paragraph",
  paragraphSettings
);

So far, this works great: the variation appears in the block inserter and is fully functional.

I want to go further and provide a different example for my catchphrase block & the paragraph block. As stated in the official WP documentation, we can supposedly use the example field to achieve this:

example (optional, type Object) – Example provides structured data for the block preview. You can set to undefined to disable the preview shown for the block type.

So I tried to add the following to the variation object:

example: {
  attributes: {
    variation: "catchphrase",
    content: "This is a catchphrase."
  }
},

This way, settings.variations looks like this:

settings.variations = [{
      icon: "sticky",
      name: "catchphrase",
      title: "Catchphrase title",
      description: "Catchphrase description",
      attributes: {
        variation: "catchphrase"
      },
      example: {
        attributes: {
          variation: "catchphrase",
          content: "This is a catchphrase."
        }
      },
      isActive: (blockAttributes, variationAttributes) => { 
        return blockAttributes.variation === "catchphrase"
      }
    }]

Unfortunately, the example of the variation is not changed. I even tried to set the example field to undefined, but the example is still here, showing the core/paragraph example.

I'm running WP 5.9 on a fresh install.

Does this feature even work? Is there something I am missing? Any advice is appreciated.

1

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.