From ff7b336c1f47a99f27c0e0cc7ae36f59e00f642f Mon Sep 17 00:00:00 2001 From: Antoine M Date: Fri, 17 Nov 2023 11:43:06 +0100 Subject: [PATCH] introducing block editor adjustement script --- block_editor_adjustments.js | 80 +++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 block_editor_adjustments.js diff --git a/block_editor_adjustments.js b/block_editor_adjustments.js new file mode 100644 index 0000000..edff38e --- /dev/null +++ b/block_editor_adjustments.js @@ -0,0 +1,80 @@ +// Register our property at core/heading +wp.hooks.addFilter( + "blocks.registerBlockType", + "homegrade-blocks/block_editor_adjustments", // our custom namespace + function (settings, name) { + if (name !== "core/button") { + // skip other core blocks + return settings; + } + settings.attributes = Object.assign(settings.attributes, { + buttonVariant: { + type: "boolean", + default: false, + }, + }); + return settings; + } +); +// Display the custom ToggleControl for every header; toggle the custom property + +wp.hooks.addFilter( + "editor.BlockEdit", + "homegrade-blocks/block_editor_adjustments", + wp.compose.createHigherOrderComponent(function (BlockEdit) { + return function (props) { + if (props.name !== "core/button") { + // skip other core blocks + return wp.element.createElement(BlockEdit, props); + } + + console.log("here are the props", props); + + return wp.element.createElement( + wp.element.Fragment, + {}, + wp.element.createElement( + wp.blockEditor.InspectorControls, + {}, + wp.element.createElement( + wp.components.PanelBody, + {}, + wp.element.createElement( + wp.components.ToggleControl, + + { + label: "Show in Table of Contents", + checked: props.attributes.buttonVariant, + onChange: (value) => { + props.setAttributes({ + buttonVariant: value, + }); + }, + } + ) + ) + ), + wp.element.createElement(BlockEdit, props) + ); + }; + }) +); + +// Convert the custom property value into CSS class name on every save + +wp.hooks.addFilter( + "blocks.getSaveContent.extraProps", + "homegrade-blocks/block_editor_adjustments", + function (extraProps, blockType, attributes) { + if (blockType.name !== "core/button") { + // skip other core blocks + return extraProps; + } + if (attributes.buttonVariant) { + console.log(extraProps.className + " extra-props-de-antoine"); + extraProps.className = extraProps.className + " lol " + " extra-props-de-antoine"; + } + + return extraProps; + } +);