Skip to content

Instantly share code, notes, and snippets.

@samikeijonen

samikeijonen/block-variations.js

Last active May 17, 2020 12:29
Show Gist options
  • Save samikeijonen/c8a2f6d001c46dfdc0ca0aa7a512ab43 to your computer and use it in GitHub Desktop.
Save samikeijonen/c8a2f6d001c46dfdc0ca0aa7a512ab43 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. samikeijonen revised this gist May 17, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions block-variations.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@ wp.domReady(() => {

    wp.blocks.registerBlockVariation('core/columns', {
    attributes: { className: 'has-2-columns', align: 'wide' },
    name: 'georgetown-50-50',
    name: 'prefix-50-50',
    title: __('50 / 50'),
    description: __('Two columns, equal split'),
    isDefault: true,
    @@ -37,7 +37,7 @@ wp.domReady(() => {

    wp.blocks.registerBlockVariation('core/columns', {
    attributes: { className: 'has-3-columns', align: 'wide' },
    name: 'georgetown-33-33-33',
    name: 'prefix-33-33-33',
    title: __('33 / 33 / 33'),
    description: __('Three columns, equal split'),
    isDefault: false,
  2. samikeijonen revised this gist May 17, 2020. No changes.
  3. samikeijonen created this gist May 17, 2020.
    59 changes: 59 additions & 0 deletions block-variations.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    // 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: 'georgetown-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: 'georgetown-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'],
    });
    });