Last active
May 17, 2020 12:29
-
-
Save samikeijonen/c8a2f6d001c46dfdc0ca0aa7a512ab43 to your computer and use it in GitHub Desktop.
Example Block Variations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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