“Is there an existing block that fits your need?”<\/p><\/blockquote>\n\n\n\n
For example, I once need to create this design in Gutenberg:<\/p>\n\n\n\n The general layout can be achieved with Media-Text<\/strong> block. But there’s no option to create a colored box behind the image. We also don’t have an option to add five stars below the Heading<\/strong>.<\/p>\n\n\n\n So we create 2 custom styles, one for Media-Text, and one for Heading:<\/p>\n\n\n\n Now we can use pseudoselector If none of the existing blocks fits your need, continue the tutorial below.<\/p>\n\n\n\n This tutorial uses this directory structure, adapt it according to your theme:<\/p>\n\n\n\n Now let’s enqueue them:<\/p>\n\n\n\n We will build a simple text field. It’s pretty much useless since we have Paragraph block, but this is just to introduce you to the syntax:<\/p>\n\n\n\n Gutenberg uses a library called React<\/strong>. If you are not familiar with it, the code below will look taunting. But don’t worry, we will explain it the best we could.<\/p>\n\n\n\n Let’s break down the code:<\/p>\n\n\n\n SELF INVOKING FUNCTION<\/strong><\/p>\n\n\n\n This wrapper is used to enclose our code. So any variables or functions defined here won’t leak to the outside.<\/p>\n\n\n\n WP BLOCKS LIBRARY<\/strong><\/p>\n\n\n\n Gutenberg already provided us with many reusable functions and elements such The code above is just re-assigning the variable so it’s easier to use later.<\/p>\n\n\n\n REGISTER BLOCK<\/strong><\/p>\n\n\n\n EDIT<\/strong><\/p>\n\n\n\n Edit function returns the elements that are rendered in Gutenberg. Here’s the breakdown:<\/p>\n\n\n\n SAVE<\/strong><\/p>\n\n\n\n The HTML returned here is saved into the database. In turn, this is also what is shown on the front end.<\/p>\n\n\n\n Our custom block is just a standard field text, so the CSS is just this:<\/p>\n\n\n\n Done!<\/strong> Go check out your block in the editor. You should see your custom block listed like this:<\/p>\n\n\n\n Creating a custom block is difficult and can get ugly. So try to use a custom block style<\/strong> as shown above whenever possible.<\/p>\n\n\n\n If you are interested to learn more, we made an extensive tutorial on our Github. It also included the code with React JSX syntax:<\/p>\n\n\n\n![\"\"](\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2021\/10\/image-1-1280x573.png\")
<\/figure>\n\n\n\nregister_block_style('core\/media-text', [\n 'name' => 'half-bg',\n 'label' => 'Half Background'\n]);\n\nregister_block_style('core\/heading', [\n 'name' => 'has-stars',\n 'label' => 'Has Stars'\n]);<\/code><\/pre>\n\n\n\n::before<\/code> and ::after<\/code> to create that design like this:<\/p>\n\n\n\n.wp-block-media-text.is-style-half-bg {\n position: relative;\n}\n.wp-block-media-text.is-style-half-bg::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -3rem\n bottom: 0;\n width: 50%;\n background-color: #eee1cc;\n}\n\nh1.is-style-has-stars::after,\nh2.is-style-has-stars::after,\nh3.is-style-has-stars::after {\n content: \"\u2605\u2605\u2605\u2605\u2605\";\n order: 2;\n display: block;\n width: 100%;\n font-size: 14px;\n letter-spacing: 2px;\n color: #ba9556;\n}<\/code><\/pre>\n\n\n\n1. Register Assets & Block Type<\/h2>\n\n\n\n
my-theme\/\n\u251c\u2500 css\/\n\u2502 \u251c\u2500 my-block.css\n\u2502 \u251c\u2500 ...\n\u251c\u2500 js\/\n\u2502 \u251c\u2500 my-block.js\n\u2502 \u251c\u2500 ...\n\u251c\u2500 functions.php\n\u251c\u2500 ...<\/code><\/pre>\n\n\n\nmy-block.js<\/code> is for the admin editor.<\/li>my-block.css<\/code> is for both the front end and the admin editor.<\/li><\/ul>\n\n\n\nadd_action('wp_enqueue_scripts', 'my_enqueue_assets');\nadd_action('enqueue_block_editor_assets', 'my_enqueue_block_assets');\n\nfunction my_enqueue_assets() {\n $css_dir = get_stylesheet_directory_uri() . '\/css';\n wp_enqueue_style('my-block', $css_dir . '\/my-block.css', []);\n}\n\nfunction my_enqueue_block_assets() {\n $css_dir = get_stylesheet_directory_uri() . '\/css';\n $js_dir = get_stylesheet_directory_uri() . '\/js';\n\n \/\/ If in plugin, use this instead:\n \/\/ $css_dir = plugin_dir_url(__FILE__) . 'css';\n \/\/ $js_dir = plugin_dir_url(__FILE__) . 'js';\r\n\n wp_enqueue_script('my-block', $js_dir . '\/my-block.js', [ 'wp-blocks', 'wp-dom' ] , null, true);\n wp_enqueue_style('my-block', $css_dir . '\/my-block.css', [ 'wp-edit-blocks' ]);\n}<\/code><\/pre>\n\n\n\n2. What We Are Building<\/h2>\n\n\n\n
![\"\"](\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2019\/11\/custom-block-result.jpg\")
3. The Script<\/h2>\n\n\n\n
(() => {\n const el = window.wp.element.createElement;\n const { registerBlockType } = window.wp.blocks;\n const { RichText } = window.wp.blockEditor;\n\n registerBlockType('my\/simple-text', {\n title: 'Simple Text (Custom)',\n icon: 'universal-access-alt',\n category: 'layout',\n attributes: {\n content: {\n type: 'array',\n source: 'children',\n selector: 'p',\n },\n },\n edit: myEdit,\n save: mySave\n });\n \n \/\/ what's rendered in admin\n function myEdit(props) {\n const atts = props.attributes;\n\n return el(RichText, {\n tagName: 'p',\n className: props.className,\n value: atts.content,\n\n \/\/ Listener when the RichText is changed.\n onChange: (value) => {\n props.setAttributes({ content: value });\n },\n });\n }\n \n \/\/ what's saved in database and rendered in frontend\n function mySave(props) {\n const atts = props.attributes;\n\n return el(RichText.Content, {\n tagName: 'p',\n value: atts.content,\n });\n }\n})();<\/code><\/pre>\n\n\n\n(() => {\n ...\n})();<\/code><\/pre>\n\n\n\nconst el = window.wp.element.createElement;\nconst { registerBlockType } = window.wp.blocks;\nconst { RichText } = window.wp.blockEditor;<\/code><\/pre>\n\n\n\nwp.blockEditor.RichText<\/code>.<\/p>\n\n\n\nregisterBlockType('my\/simple-text', {\n title: 'Simple Text (Custom)',\n icon: 'universal-access-alt',\n category: 'layout',\n attributes: {\n content: {\n type: 'array',\n source: 'children',\n selector: 'p',\n },\n },\n edit: myEdit,\n save: mySave\n});<\/code><\/pre>\n\n\n\nmy\/simple-text<\/code> – The block’s slug. This will translate into the wrapper’s class name like “wp-block-my-simple-text”.<\/li>title<\/code> – Is what appears when selecting the block.<\/li>icon<\/code> – Click here<\/a> for a list of available icons.<\/li>attributes<\/code> – List of variables for the block. source<\/code> and selector<\/code> defines how to extract the value from saved content. More info\u00bb<\/a><\/li>edit<\/code> – Callback on how to render the content in the editor.<\/li>save<\/code> – Callback on how to render the content before saved to the database.<\/li><\/ul>\n\n\n\nfunction myEdit(props) {\n const atts = props.attributes;\n\n return el(RichText, {\n tagName: 'p',\n className: props.className,\n value: atts.content,\n\n \/\/ Listener when the RichText is changed.\n onChange: (value) => {\n props.setAttributes({ content: value });\n },\n });\n}<\/code><\/pre>\n\n\n\nel(...)<\/strong><\/code> – create an HTML element.<\/li>RichText<\/strong><\/code> – a special element from Gutenberg. It’s like <input type=\"text\"><\/code> but has a toolbar to bold, italic, anchor link, etc.<\/li>tagName<\/strong><\/code> – wraps the RichText with <p><\/code>.<\/li>value<\/strong><\/code> – uses the content<\/code> variable we defined in attributes<\/code> as the value of this RichText.<\/li>onChange<\/strong><\/code> – updates the content<\/code> variable as we type.<\/li><\/ul>\n\n\n\nfunction mySave(props) {\n const atts = props.attributes;\n\n return el(RichText.Content, {\n tagName: 'p',\n value: atts.content,\n });\n}<\/code><\/pre>\n\n\n\n4. The Style<\/h2>\n\n\n\n
.wp-block-my-simple-text {\n border: 1px solid rgba(0,0,0,.1);\n padding: 1rem;\n}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2019\/11\/custom-block-selection-480x395.jpg\")
\n\n\n\nConclusion<\/h2>\n\n\n\n