Skip to content

Instantly share code, notes, and snippets.

@samikeijonen
Last active May 17, 2020 12:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save samikeijonen/c8a2f6d001c46dfdc0ca0aa7a512ab43 to your computer and use it in GitHub Desktop.
Example Block Variations
// WordPress dependencies.
const { __ } = wp.i18n;
const { Path, SVG } = wp.components;
/**
* Block variants.
*/
wp.domReady(() => {
wp.blocks.unregisterBlockVariation('core/columns', 'two-columns-equal');
wp.blocks.unregisterBlockVariation('core/columns', 'three-columns-equal');
wp.blocks.unregisterBlockVariation('core/columns', 'two-columns-one-third-two-thirds');
wp.blocks.unregisterBlockVariation('core/columns', 'two-columns-two-thirds-one-third');
wp.blocks.unregisterBlockVariation('core/columns', 'three-columns-wider-center');
wp.blocks.registerBlockVariation('core/columns', {
attributes: { className: 'has-2-columns', align: 'wide' },
name: 'prefix-50-50',
title: __('50 / 50'),
description: __('Two columns, equal split'),
isDefault: true,
innerBlocks: [
['core/column', { className: 'column-span-none' }],
['core/column', { className: 'column-span-none' }],
],
icon: (
<SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H25V34H39ZM23 34H9V14H23V34Z"
/>
</SVG>
),
scope: ['block'],
});
wp.blocks.registerBlockVariation('core/columns', {
attributes: { className: 'has-3-columns', align: 'wide' },
name: 'prefix-33-33-33',
title: __('33 / 33 / 33'),
description: __('Three columns, equal split'),
isDefault: false,
innerBlocks: [
['core/column', { className: 'column-span-none' }],
['core/column', { className: 'column-span-none' }],
['core/column', { className: 'column-span-none' }],
],
icon: (
<SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<Path
fillRule="evenodd"
d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM28.5 34h-9V14h9v20zm2 0V14H39v20h-8.5zm-13 0H9V14h8.5v20z"
/>
</SVG>
),
scope: ['block'],
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment