Forked from zgordon/registerblock-custom-icon-gutenberg.js
Created
July 21, 2018 04:08
-
-
Save ControlledChaos/bf9d775bb98c3b10acc21e058902c95c to your computer and use it in GitHub Desktop.
Example for how to create use a custom SVG icon for a block in Gutenberg
This file contains hidden or 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
| // 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 | |
| */ | |
| const iconEl = el('svg', { width: 20, height: 20 }, | |
| 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" } ) | |
| ); | |
| /** | |
| * 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: __('Custom Block', 'JS4WPGB'), | |
| icon: iconEl, | |
| category: 'common', | |
| edit( props ) { | |
| return el('p', {}, 'Hello world!'); | |
| }, | |
| save( props ) { | |
| return el('p', {}, 'Hello world!'); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment