How to transform block variant to default version?

admin管理员组

文章数量:1122846

I have a simple block variation:

  wp.blocks.registerBlockVariation(
    'core/heading',
    {
      name: 'headline',
      title: __('Big title'),
      attributes: {
        className: 'headline'
      },
    },
  );

And I want to be able to transform from this variant to standard core/heading and back. How to achieve this? Tried to get it from Handbook, but with no success.

Thanks a lot in advance!

I have a simple block variation:

  wp.blocks.registerBlockVariation(
    'core/heading',
    {
      name: 'headline',
      title: __('Big title'),
      attributes: {
        className: 'headline'
      },
    },
  );

And I want to be able to transform from this variant to standard core/heading and back. How to achieve this? Tried to get it from Handbook, but with no success.

Thanks a lot in advance!

• block-editor

Share Improve this question edited Feb 24, 2022 at 14:19 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Feb 8, 2022 at 21:18 Karolína VyskočilováKarolína Vyskočilová 42911 gold badge88 silver badges2323 bronze badges 3

• This seems like it would be better implemented as a block style: developer.wordpress.org/block-editor/reference-guides/block-api/… Then you’d be able to just set the style to default. – Jacob Peattie Commented Feb 8, 2022 at 23:29
• @JacobPeattie Thanks for the tip, but this doesn't answer my question. The problem is simplified (and I can think about many other usages) with block styles is that you have only one CSS class applied - with variants you can set it up way more, besides - only one Style can be applied at the time. – Karolína Vyskočilová Commented Feb 9, 2022 at 9:35
• 1 That’s why it didn’t post it as an answer… – Jacob Peattie Commented Feb 9, 2022 at 9:36

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

I've found that there's also a way to set a 'default' to revert to, using the same wp.blocks.registerBlockVariation() function. Here's a variant on the column block that I set up, along with a 'default' that reverts the styling successfully:

wp.blocks.registerBlockVariation(
    'core/column',
    [
      {
        name: 'default',
        title: 'Default',
        attributes: {
          className: '',
          style: false
        },
        scope: ['transform'],
        isDefault: true,
        isActive: ['className']
      },
      {
        name: 'card-column',
        title: 'Card Column',
        attributes: {
          className: 'is-style-card-column',
          style: {
            color: {
              background: '#ffffff',
            },
            spacing: {
              padding: {
                top:'var:preset|spacing|50',
                left:'var:preset|spacing|30',
                bottom:'var:preset|spacing|50',
                right:'var:preset|spacing|30'
              },
            },
            border: {
              radius: '0.75rem',
              color: 'var:preset|color|vivid-cyan-blue',
              width: '2px',
              style: 'solid'
            }
          }
        },
        scope: ['transform'],
        isActive: ['className']
      },
    ],
  );

Setting the style attribute to false succeeded in reverting the styles, but the real clincher was setting the className to an empty string and making sure that the isActive used className. Without the isActive setting, the 'Default' variation was not being selected when choosing the variant. Hope this helps!

Carolina Nymark pointed out, that there is possibility to filter transforms as any other settings, so one can modify the transformation like this:

const { addFilter } = wp.hooks;
const { assign, merge } = lodash;
const { createBlock } = wp.blocks;

function transformHeading(settings, name) {

    // Filter only heading.
    if (name !== 'core/heading') {
        return settings;
    }

    return assign({}, settings, {
        transforms: merge(settings.transforms, {
            from: [
                {
                    type: 'block',
                    blocks: ['core/paragraph'],
                    transform: ({ content }) => {
                        return createBlock('core/heading', {
                            content,
                            className: 'headline',
                        });
                    },
                }
            ],
        }),
    });
}

addFilter(
    'blocks.registerBlockType',
    'my-filters/transforms',
    transformHeading,
);

But there are still a few things that you can't modify:

• Name of the transformation (it's still named by the default block, not the variation)
• If the transformation for the "to" block is already in among the transforms, you'll replace it (you can't have two transforms to the same block)
• as of WP 5.9.2 it doesn't support transform within the same block - doesn't migrate the content (not sure why)

本文标签： How to transform block variant to default version