From 77b2364d05b0b74070e68b288097a1744828cdb0 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 6 Sep 2024 11:12:55 +0100 Subject: [PATCH 1/3] Hack button into toolbar --- .../src/components/block-toolbar/index.js | 36 +++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index b14ceb5059049..2c4e7c0587a18 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -7,7 +7,7 @@ import clsx from 'clsx'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useRef } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; import { @@ -16,7 +16,9 @@ import { isReusableBlock, isTemplatePart, } from '@wordpress/blocks'; -import { ToolbarGroup } from '@wordpress/components'; +import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; +import { settings as settingsIcon } from '@wordpress/icons'; +import { store as interfaceStore } from '@wordpress/interface'; /** * Internal dependencies @@ -126,6 +128,16 @@ export function PrivateBlockToolbar( { }; }, [] ); + const { enableComplementaryArea, disableComplementaryArea } = + useDispatch( interfaceStore ); + + const isSelected = useSelect( + ( select ) => + select( interfaceStore ).getActiveComplementaryArea( 'core' ) === + 'edit-post/block', + [] + ); + const toolbarWrapperRef = useRef( null ); // Handles highlighting the current block outline on hover or focus of the @@ -235,6 +247,26 @@ export function PrivateBlockToolbar( { ) } + + { + if ( isSelected ) { + disableComplementaryArea( + 'core', + 'edit-post/block' + ); + } else { + enableComplementaryArea( + 'core', + 'edit-post/block' + ); + } + } } + /> + { isDefaultEditingMode && ( ) } From a41e7c861659c27f0adf5ce769f47507efdae895 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 9 Sep 2024 14:31:27 +0100 Subject: [PATCH 2/3] Revert all changes to block editor --- .../src/components/block-toolbar/index.js | 36 ++----------------- 1 file changed, 2 insertions(+), 34 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 2c4e7c0587a18..b14ceb5059049 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -7,7 +7,7 @@ import clsx from 'clsx'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { useRef } from '@wordpress/element'; import { useViewportMatch } from '@wordpress/compose'; import { @@ -16,9 +16,7 @@ import { isReusableBlock, isTemplatePart, } from '@wordpress/blocks'; -import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; -import { settings as settingsIcon } from '@wordpress/icons'; -import { store as interfaceStore } from '@wordpress/interface'; +import { ToolbarGroup } from '@wordpress/components'; /** * Internal dependencies @@ -128,16 +126,6 @@ export function PrivateBlockToolbar( { }; }, [] ); - const { enableComplementaryArea, disableComplementaryArea } = - useDispatch( interfaceStore ); - - const isSelected = useSelect( - ( select ) => - select( interfaceStore ).getActiveComplementaryArea( 'core' ) === - 'edit-post/block', - [] - ); - const toolbarWrapperRef = useRef( null ); // Handles highlighting the current block outline on hover or focus of the @@ -247,26 +235,6 @@ export function PrivateBlockToolbar( { ) } - - { - if ( isSelected ) { - disableComplementaryArea( - 'core', - 'edit-post/block' - ); - } else { - enableComplementaryArea( - 'core', - 'edit-post/block' - ); - } - } } - /> - { isDefaultEditingMode && ( ) } From acda73e0c65f7650a573f65fce44fd2bb79c1fa6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 9 Sep 2024 14:38:24 +0100 Subject: [PATCH 3/3] Implement in editor package --- packages/editor/src/hooks/block-toolbar.js | 75 ++++++++++++++++++++++ packages/editor/src/hooks/index.js | 1 + 2 files changed, 76 insertions(+) create mode 100644 packages/editor/src/hooks/block-toolbar.js diff --git a/packages/editor/src/hooks/block-toolbar.js b/packages/editor/src/hooks/block-toolbar.js new file mode 100644 index 0000000000000..881b4073aaaf0 --- /dev/null +++ b/packages/editor/src/hooks/block-toolbar.js @@ -0,0 +1,75 @@ +/** + * WordPress dependencies + */ +import { addFilter } from '@wordpress/hooks'; +import { createHigherOrderComponent } from '@wordpress/compose'; +import { __unstableBlockToolbarLastItem as BlockToolbarLastItem } from '@wordpress/block-editor'; +import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; +import { settings as settingsIcon } from '@wordpress/icons'; +import { store as interfaceStore } from '@wordpress/interface'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +/** + * Override the default edit UI to include a new block inspector control for + * assigning a partial syncing controls to supported blocks in the pattern editor. + * Currently, only the `core/paragraph` block is supported. + * + * @param {Component} BlockEdit Original component. + * + * @return {Component} Wrapped component. + */ +const withBlockToolbar = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + return ( + <> + + { props.isSelected && } + + ); + }, + 'withBlockToolbar' +); + +const BlockSidebarToggle = () => { + const { enableComplementaryArea, disableComplementaryArea } = + useDispatch( interfaceStore ); + + const isSelected = useSelect( + ( select ) => + select( interfaceStore ).getActiveComplementaryArea( 'core' ) === + 'edit-post/block', + [] + ); + + return ( + + + { + if ( isSelected ) { + disableComplementaryArea( + 'core', + 'edit-post/block' + ); + } else { + enableComplementaryArea( + 'core', + 'edit-post/block' + ); + } + } } + /> + + + ); +}; + +addFilter( + 'editor.BlockEdit', + 'core/editor/with-block-toolbar', + withBlockToolbar +); diff --git a/packages/editor/src/hooks/index.js b/packages/editor/src/hooks/index.js index 6001d53f65c10..2bcb13000c990 100644 --- a/packages/editor/src/hooks/index.js +++ b/packages/editor/src/hooks/index.js @@ -5,3 +5,4 @@ import './custom-sources-backwards-compatibility'; import './default-autocompleters'; import './media-upload'; import './pattern-overrides'; +import './block-toolbar';