-
-
Save zgordon/e837e29f77c343d29ebb7290a1a75eea to your computer and use it in GitHub Desktop.
// 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!'); | |
} | |
}); |
if u want to use sth like a png or jpg simple base64-encode it, e.g. so:
const iconEl = el('img', {src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjM4OXB4IiBoZWlnaHQ9IjM4OXB4IiB2aWV3Qm94PSIwIDAgMzg5IDM4OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzg5IDM4OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTM3OSwzMjYuMDM1aC0xOC44NTJjLTUuNTIyLDAtMTAsNC40NzctMTAsMTB2MTQuMTExaC0xNC4xMTNjLTUuNTIyLDAtMTAsNC40NzctMTAsMTBWMzc5YzAsNS41MjMsNC40NzgsMTAsMTAsMTBIMzc5DQoJCQkJYzUuNTIyLDAsMTAtNC40NzcsMTAtMTB2LTQyLjk2NUMzODksMzMwLjUxMiwzODQuNTIyLDMyNi4wMzUsMzc5LDMyNi4wMzV6Ii8+DQoJCQk8cGF0aCBkPSJNMTY2LjkyNywzNTAuMTQ2aC01OC44MTNjLTUuNTIyLDAtMTAsNC40NzctMTAsMTBWMzc5YzAsNS41MjMsNC40NzgsMTAsMTAsMTBoNTguODEzYzUuNTIyLDAsMTAtNC40NzcsMTAtMTB2LTE4Ljg1NA0KCQkJCUMxNzYuOTI3LDM1NC42MjMsMTcyLjQ0OSwzNTAuMTQ2LDE2Ni45MjcsMzUwLjE0NnoiLz4NCgkJCTxwYXRoIGQ9Ik0yODAuODg3LDM1MC4xNDZoLTU4LjgxMmMtNS41MjMsMC0xMCw0LjQ3Ny0xMCwxMFYzNzljMCw1LjUyMyw0LjQ3NywxMCwxMCwxMGg1OC44MTJjNS41MjIsMCwxMC00LjQ3NywxMC0xMHYtMTguODU0DQoJCQkJQzI5MC44ODcsMzU0LjYyMywyODYuNDA5LDM1MC4xNDYsMjgwLjg4NywzNTAuMTQ2eiIvPg0KCQkJPHBhdGggZD0iTTUyLjk2NSwzNTAuMTQ2SDM4Ljg1MnYtMTQuMTExYzAtNS41MjMtNC40NzgtMTAtMTAtMTBIMTBjLTUuNTIyLDAtMTAsNC40NzctMTAsMTBWMzc5YzAsNS41MjMsNC40NzgsMTAsMTAsMTBoNDIuOTY1DQoJCQkJYzUuNTIxLDAsMTAtNC40NzcsMTAtMTB2LTE4Ljg1NEM2Mi45NjUsMzU0LjYyMyw1OC40ODYsMzUwLjE0Niw1Mi45NjUsMzUwLjE0NnoiLz4NCgkJCTxwYXRoIGQ9Ik0xMCwyOTAuODg2aDE4Ljg1MmM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwdi01OC44MTJjMC01LjUyMy00LjQ3OC0xMC0xMC0xMEgxMGMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHY1OC44MTINCgkJCQlDMCwyODYuNDA5LDQuNDc4LDI5MC44ODYsMTAsMjkwLjg4NnoiLz4NCgkJCTxwYXRoIGQ9Ik0xMCwxNzYuOTI2aDE4Ljg1MmM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwdi01OC44MTJjMC01LjUyMy00LjQ3OC0xMC0xMC0xMEgxMGMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHY1OC44MTINCgkJCQlDMCwxNzIuNDQ5LDQuNDc4LDE3Ni45MjYsMTAsMTc2LjkyNnoiLz4NCgkJCTxwYXRoIGQ9Ik01Mi45NjUsMEgxMEM0LjQ3OCwwLDAsNC40NzcsMCwxMHY0Mi45NjdjMCw1LjUyMyw0LjQ3OCwxMCwxMCwxMGgxOC44NTJjNS41MjIsMCwxMC00LjQ3NywxMC0xMFYzOC44NTRoMTQuMTEzDQoJCQkJYzUuNTIxLDAsMTAtNC40NzcsMTAtMTBWMTBDNjIuOTY1LDQuNDc4LDU4LjQ4NiwwLDUyLjk2NSwweiIvPg0KCQkJPHBhdGggZD0iTTI4MC44ODcsMGgtNTguODEyYy01LjUyMiwwLTEwLDQuNDc3LTEwLDEwdjE4Ljg1NGMwLDUuNTIzLDQuNDc4LDEwLDEwLDEwaDU4LjgxMmM1LjUyMiwwLDEwLTQuNDc3LDEwLTEwVjEwDQoJCQkJQzI5MC44ODcsNC40NzgsMjg2LjQwOSwwLDI4MC44ODcsMHoiLz4NCgkJCTxwYXRoIGQ9Ik0xMDguMTEzLDM4Ljg1NGg1OC44MTNjNS41MjIsMCwxMC00LjQ3NywxMC0xMFYxMGMwLTUuNTIzLTQuNDc4LTEwLTEwLTEwaC01OC44MTNjLTUuNTIyLDAtMTAsNC40NzctMTAsMTB2MTguODU0DQoJCQkJQzk4LjExMywzNC4zNzcsMTAyLjU5MSwzOC44NTQsMTA4LjExMywzOC44NTR6Ii8+DQoJCQk8cGF0aCBkPSJNMzc5LDBoLTQyLjk2NWMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHYxOC44NTRjMCw1LjUyMyw0LjQ3OCwxMCwxMCwxMGgxNC4xMTN2MTQuMTEzYzAsNS41MjMsNC40NzgsMTAsMTAsMTBIMzc5DQoJCQkJYzUuNTIyLDAsMTAtNC40NzcsMTAtMTBWMTBDMzg5LDQuNDc4LDM4NC41MjIsMCwzNzksMHoiLz4NCgkJCTxwYXRoIGQ9Ik0zNzksMjEyLjA3NGgtMTguODUyYy01LjUyMiwwLTEwLDQuNDc3LTEwLDEwdjU4LjgxMmMwLDUuNTIyLDQuNDc4LDEwLDEwLDEwSDM3OWM1LjUyMiwwLDEwLTQuNDc4LDEwLTEwdi01OC44MTINCgkJCQlDMzg5LDIxNi41NTEsMzg0LjUyMiwyMTIuMDc0LDM3OSwyMTIuMDc0eiIvPg0KCQkJPHBhdGggZD0iTTM3OSw5OC4xMTRoLTE4Ljg1MmMtNS41MjIsMC0xMCw0LjQ3Ny0xMCwxMHY1OC44MTJjMCw1LjUyMyw0LjQ3OCwxMCwxMCwxMEgzNzljNS41MjIsMCwxMC00LjQ3NywxMC0xMHYtNTguODEyDQoJCQkJQzM4OSwxMDIuNTkxLDM4NC41MjIsOTguMTE0LDM3OSw5OC4xMTR6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg=='});
Here's another method that works using the built-in 'Icon' component: