{"id":1382,"date":"2023-04-18T13:05:27","date_gmt":"2023-04-18T12:05:27","guid":{"rendered":"https:\/\/editjournal.redakt.eu\/faxmodem\/?p=1382"},"modified":"2023-04-18T13:51:22","modified_gmt":"2023-04-18T12:51:22","slug":"gutenberg-block-editor-toggle-control-custom-css-classname","status":"publish","type":"post","link":"https:\/\/editjournal.redakt.eu\/faxmodem\/blog\/wordpress\/gutenberg-block-editor-toggle-control-custom-css-classname\/","title":{"rendered":"Adding custom toggle control to Gutenberg Block Editor"},"content":{"rendered":"

Requirement<\/strong>. Every header (core\/heading<\/code>) block needs to have a toggle control for adding or removing a custom class name to\/from the resulting element.<\/p>\n

Usage example<\/strong>. Building an automatic table of contents generator, which will pick only the headers having the custom class name. The admin needs to easily select headers that should be used for the table of contents.<\/p>\n

(Related: here's how to define a custom static Block element acting as a placeholder where the table of contents, generated with Javascript, will be inserted: https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/writing-your-first-block-type\/<\/a>.)<\/p>\n

The following PHP code goes under wp-content\/plugins\/exampleplugin\/exampleplugin.php<\/code>:<\/p>\n

<?php\n\/**\n * @package ExamplePlugin\n * @version 1.0\n *\/\n\/*\nPlugin Name: ExamplePlugin\nPlugin URI: http:\/\/example.com\/\nDescription: Custom\nAuthor: ExamplePlugin\nVersion: 1.0\nAuthor URI: http:\/\/example.com\/\n*\/\n\nfunction enqueue_block_editor_adjustments() {\n    wp_register_script(\n        'block_editor_adjustments',\n        plugin_dir_url( __FILE__ ) . 'block_editor_adjustments.js',\n        [ 'wp-blocks', 'wp-dom', 'wp-dom-ready', 'wp-edit-post' ],\n        filemtime( plugin_dir_path( __FILE__ ) . 'block_editor_adjustments.js' )\n    );\n    wp_enqueue_script( 'block_editor_adjustments' );\n}\n\nadd_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_adjustments' );<\/code><\/pre>\n
The above adds our custom Javascript file in the editor.<\/p>\n
And here is the wp-content\/plugins\/exampleplugin\/block_editor_adjustments.js<\/code> file:<\/p>\n
\/\/ Register our property at core\/heading\nwp.hooks.addFilter(\n    'blocks.registerBlockType',\n    'ExamplePlugin\/block_editor_adjustments', \/\/ our custom namespace\n    function(settings, name) {\n        if (name !== 'core\/heading') { \/\/ skip other core blocks\n            return settings;\n        }\n        settings.attributes = Object.assign(settings.attributes, {\n            showInTableOfContents: { \/\/ showInTableOfContents is our property name\n                type: 'boolean',\n                default: false\n            }\n        });\n        return settings;\n    }\n);\n\n\/\/ Display the custom ToggleControl for every header; toggle the custom property\nwp.hooks.addFilter(\n    'editor.BlockEdit',\n    'ExamplePlugin\/block_editor_adjustments',\n    wp.compose.createHigherOrderComponent(function(BlockEdit) {\n        return function(props) {\n            if (props.name !== 'core\/heading') { \/\/ skip other core blocks\n                return wp.element.createElement( BlockEdit, props );\n            }\n            console.log('here are the props', props);\n            return wp.element.createElement(\n                wp.element.Fragment,\n                {},\n                wp.element.createElement( BlockEdit, props ),\n                wp.element.createElement(\n                    wp.blockEditor.InspectorControls,\n                    {},\n                    wp.element.createElement(\n                        wp.components.PanelBody,\n                        {},\n                        wp.element.createElement(\n                            wp.components.ToggleControl,\n                            {\n                                label: 'Show in Table of Contents',\n                                checked: props.attributes.showInTableOfContents,\n                                onChange: ( value ) => {\n                                    props.setAttributes( { showInTableOfContents: value } );\n                                },\n                            }\n                        )\n                    )\n                )\n            );\n        };\n    })\n);\n\n\/\/ Convert the custom property value into CSS class name on every save\nwp.hooks.addFilter(\n    'blocks.getSaveContent.extraProps',\n    'ExamplePlugin\/block_editor_adjustments',\n    function(extraProps, blockType, attributes) {\n        if (blockType.name !== 'core\/heading') { \/\/ skip other core blocks\n            return extraProps;\n        }\n        if (attributes.showInTableOfContents) {\n            extraProps.className = extraProps.className + ' fq_contents_header';\n        }\n        return extraProps;\n    }\n);<\/code><\/pre>\n
General idea and guidance:<\/p>\n