Skip to content

Instantly share code, notes, and snippets.

@zgordon

zgordon/registerblock-custom-icon-gutenberg.js

Last active January 2, 2022 19:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zgordon/e837e29f77c343d29ebb7290a1a75eea to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zgordon/e837e29f77c343d29ebb7290a1a75eea to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. zgordon revised this gist Dec 8, 2017. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions registerblock-custom-icon-gutenberg.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,10 @@
    // Import __ from i18n internationalization library
    const { __ } = wp.i18n;
    // Import registerBlockType() from block building libary
    const { registerBlockType } = wp.blocks;
    // Import the element creator function (React abstraction layer)
    const el = wp.element.createElement;

    /**
    * Example of a custom SVG path taken from fontastic
    */
  2. zgordon revised this gist Dec 7, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions registerblock-custom-icon-gutenberg.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,7 @@
    * Example of a custom SVG path taken from fontastic
    */
    const iconEl = el('svg', { width: 20, height: 20 },
    el('path', { d: "M15,6.8182L15,8.5l-6.5-1 l-0.3182,4.7727L11,14v1l-3.5-0.6818L4,15v-1l2.8182-1.7273L6.5,7.5L0,8.5V6.8182L6.5,4.5v-3c0,0,0-1.5,1-1.5s1,1.5,1,1.5v2.8182 L15,6.8182z" } )
    el('path', { d: "M12.5,12H12v-0.5c0-0.3-0.2-0.5-0.5-0.5H11V6h1l1-2c-1,0.1-2,0.1-3,0C9.2,3.4,8.6,2.8,8,2V1.5C8,1.2,7.8,1,7.5,1 S7,1.2,7,1.5V2C6.4,2.8,5.8,3.4,5,4C4,4.1,3,4.1,2,4l1,2h1v5c0,0-0.5,0-0.5,0C3.2,11,3,11.2,3,11.5V12H2.5C2.2,12,2,12.2,2,12.5V13 h11v-0.5C13,12.2,12.8,12,12.5,12z M7,11H5V6h2V11z M10,11H8V6h2V11z" } )
    );

    /**
    @@ -13,7 +13,7 @@ const iconEl = el('svg', { width: 20, height: 20 },
    * @return {?WPBlock} Return the block or 'undefined'
    */
    registerBlockType('js4wpgb/static-content', {
    title: __('Static Content', 'JS4WPGB'),
    title: __('Custom Block', 'JS4WPGB'),
    icon: iconEl,
    category: 'common',
    edit( props ) {
  3. zgordon created this gist Dec 7, 2017.
    25 changes: 25 additions & 0 deletions registerblock-custom-icon-gutenberg.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    /**
    * Example of a custom SVG path taken from fontastic
    */
    const iconEl = el('svg', { width: 20, height: 20 },
    el('path', { d: "M15,6.8182L15,8.5l-6.5-1 l-0.3182,4.7727L11,14v1l-3.5-0.6818L4,15v-1l2.8182-1.7273L6.5,7.5L0,8.5V6.8182L6.5,4.5v-3c0,0,0-1.5,1-1.5s1,1.5,1,1.5v2.8182 L15,6.8182z" } )
    );

    /**
    * Register Block using a custom icon.
    *
    * @param {String} name Block name, namespaced
    * @param {Object} settings Block settings
    * @return {?WPBlock} Return the block or 'undefined'
    */
    registerBlockType('js4wpgb/static-content', {
    title: __('Static Content', 'JS4WPGB'),
    icon: iconEl,
    category: 'common',
    edit( props ) {
    return el('p', {}, 'Hello world!');
    },
    save( props ) {
    return el('p', {}, 'Hello world!');
    }
    });