From 9385d9c0c4a7a373e2c757d06bd71f8d989d6167 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Mon, 23 Aug 2021 09:39:02 +0200 Subject: [PATCH] Block Editor: Try groups for InspectorControls (#34069) * Block Editor: Try groups for InspectorControls * Update packages/block-editor/src/components/inspector-controls/fill.js * Remove the `block` group in InspectorControls * Make the group in InspectorControls experimental * Update React Native implementation to match web --- packages/block-editor/README.md | 4 +- .../src/components/block-inspector/index.js | 18 +- packages/block-editor/src/components/index.js | 6 +- .../src/components/index.native.js | 6 +- .../inspector-advanced-controls/README.md | 72 ------ .../inspector-advanced-controls/index.js | 32 --- .../components/inspector-controls/README.md | 241 ++++-------------- .../src/components/inspector-controls/fill.js | 32 +++ .../{index.native.js => fill.native.js} | 28 +- .../components/inspector-controls/groups.js | 14 + .../components/inspector-controls/index.js | 34 ++- .../src/components/inspector-controls/slot.js | 30 +++ .../inspector-controls/slot.native.js | 22 ++ packages/block-editor/src/hooks/anchor.js | 6 +- .../src/hooks/custom-class-name.js | 6 +- packages/block-library/src/button/edit.js | 5 +- packages/block-library/src/group/edit.js | 6 +- packages/block-library/src/image/image.js | 5 +- packages/block-library/src/post-terms/edit.js | 6 +- .../block-library/src/query/edit/index.js | 6 +- .../template-part/edit/advanced-controls.js | 6 +- 21 files changed, 211 insertions(+), 374 deletions(-) delete mode 100644 packages/block-editor/src/components/inspector-advanced-controls/README.md delete mode 100644 packages/block-editor/src/components/inspector-advanced-controls/index.js create mode 100644 packages/block-editor/src/components/inspector-controls/fill.js rename packages/block-editor/src/components/inspector-controls/{index.native.js => fill.native.js} (57%) create mode 100644 packages/block-editor/src/components/inspector-controls/groups.js create mode 100644 packages/block-editor/src/components/inspector-controls/slot.js create mode 100644 packages/block-editor/src/components/inspector-controls/slot.native.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 03ef4ee43b038..b742a81e3dc8a 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -438,9 +438,7 @@ Undocumented declaration. ### InspectorAdvancedControls -_Related_ - -- +Undocumented declaration. ### InspectorControls diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 2a8f7ffeb40db..0ef6a790d1688 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -19,8 +19,10 @@ import { useSelect } from '@wordpress/data'; */ import SkipToSelectedBlock from '../skip-to-selected-block'; import BlockCard from '../block-card'; -import InspectorControls from '../inspector-controls'; -import InspectorAdvancedControls from '../inspector-advanced-controls'; +import { + default as InspectorControls, + InspectorAdvancedControls, +} from '../inspector-controls'; import BlockStyles from '../block-styles'; import MultiSelectionInspector from '../multi-selection-inspector'; import DefaultStylePicker from '../default-style-picker'; @@ -128,18 +130,15 @@ const BlockInspectorSingleBlock = ( { ) }
- +
); }; -const AdvancedControls = ( { slotName, bubblesVirtually } ) => { - const slot = useSlot( slotName ); +const AdvancedControls = ( { bubblesVirtually } ) => { + const slot = useSlot( InspectorAdvancedControls.slotName ); const hasFills = Boolean( slot.fills && slot.fills.length ); if ( ! hasFills ) { @@ -152,7 +151,8 @@ const AdvancedControls = ( { slotName, bubblesVirtually } ) => { title={ __( 'Advanced' ) } initialOpen={ false } > - diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 8cf025bdcc10a..99c1042b99173 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -52,8 +52,10 @@ export { default as InnerBlocks, useInnerBlocksProps as __experimentalUseInnerBlocksProps, } from './inner-blocks'; -export { default as InspectorAdvancedControls } from './inspector-advanced-controls'; -export { default as InspectorControls } from './inspector-controls'; +export { + default as InspectorControls, + InspectorAdvancedControls, +} from './inspector-controls'; export { JustifyToolbar, JustifyContentControl, diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 89fa80d8b44c8..995042b7d65cd 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -22,8 +22,10 @@ export { default as InnerBlocks, useInnerBlocksProps as __experimentalUseInnerBlocksProps, } from './inner-blocks'; -export { default as InspectorAdvancedControls } from './inspector-advanced-controls'; -export { default as InspectorControls } from './inspector-controls'; +export { + default as InspectorControls, + InspectorAdvancedControls, +} from './inspector-controls'; export { JustifyToolbar, JustifyContentControl, diff --git a/packages/block-editor/src/components/inspector-advanced-controls/README.md b/packages/block-editor/src/components/inspector-advanced-controls/README.md deleted file mode 100644 index b14b0cb6a73e2..0000000000000 --- a/packages/block-editor/src/components/inspector-advanced-controls/README.md +++ /dev/null @@ -1,72 +0,0 @@ -# InspectorAdvancedControls - -inspector-advanced-controls - -Inspector Advanced Controls appear under the _Advanced_ panel of a block's [InspectorControls](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md) -- that is, they appear as a specific set of controls within a block's settings panels. As the name suggests, `InspectorAdvancedControls` is meant for controls that most users aren't meant to interact with most of the time, such as adding an HTML anchor or custom CSS classes to a block. - -## Usage - -{% codetabs %} -{% ESNext %} - -```js -const { - TextControl, -} = wp.components; -const { - InspectorControls, - InspectorAdvancedControls, -} = wp.editor; - -function MyBlockEdit( { attributes, setAttributes } ) { - return ( - <> -
- { /* Block markup goes here */ } -
- { /* Regular control goes here */ - - - { - setAttributes( { - anchor: nextValue, - } ); - } } - /> - - - ); -} -``` - -{% ES5 %} - -```js -var el = wp.element.createElement, - Fragment = wp.element.Fragment, - InspectorControls = wp.editor.InspectorControls, - InspectorAdvancedControlsControls = wp.editor.InspectorAdvancedControls, - TextControl = wp.components.TextControl, - -function MyBlockEdit( props ) { - return el( Fragment, null, - el( 'div', null, /* Block markup goes here */ null ), - el( InspectorControls, null, /* Regular control goes here */ null ), - el( InspectorAdvancedControls, null, - el( TextControl, { - label: 'HTML anchor', - value: props.attributes.anchor, - onChange: function( nextValue ) { - props.setAttributes( { anchor: nextValue } ); - } - } ) - ) - ); -} -``` - -{% end %} diff --git a/packages/block-editor/src/components/inspector-advanced-controls/index.js b/packages/block-editor/src/components/inspector-advanced-controls/index.js deleted file mode 100644 index 4ed9b6341142d..0000000000000 --- a/packages/block-editor/src/components/inspector-advanced-controls/index.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * WordPress dependencies - */ -import { - createSlotFill, - __experimentalStyleProvider as StyleProvider, -} from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { useBlockEditContext } from '../block-edit/context'; - -const name = 'InspectorAdvancedControls'; -const { Fill, Slot } = createSlotFill( name ); - -function InspectorAdvancedControls( { children } ) { - const { isSelected } = useBlockEditContext(); - return isSelected ? ( - - { children } - - ) : null; -} - -InspectorAdvancedControls.slotName = name; -InspectorAdvancedControls.Slot = Slot; - -/** - * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-advanced-controls/README.md - */ -export default InspectorAdvancedControls; diff --git a/packages/block-editor/src/components/inspector-controls/README.md b/packages/block-editor/src/components/inspector-controls/README.md index 8310ae3a8db7e..2799431917b75 100644 --- a/packages/block-editor/src/components/inspector-controls/README.md +++ b/packages/block-editor/src/components/inspector-controls/README.md @@ -6,201 +6,6 @@ Inspector Controls appear in the post settings sidebar when a block is being edi ## Usage -{% codetabs %} -{% ES5 %} - -```js -var el = wp.element.createElement, - Fragment = wp.element.Fragment, - registerBlockType = wp.blocks.registerBlockType, - RichText = wp.editor.RichText, - InspectorControls = wp.blockEditor.InspectorControls, - useBlockProps = wp.blockEditor.useBlockProps, - CheckboxControl = wp.components.CheckboxControl, - RadioControl = wp.components.RadioControl, - TextControl = wp.components.TextControl, - ToggleControl = wp.components.ToggleControl, - SelectControl = wp.components.SelectControl, - PanelBody = wp.components.PanelBody; - -registerBlockType( 'my-plugin/inspector-controls-example', { - apiVersion: 2, - - title: 'Inspector controls example', - - icon: 'universal-access-alt', - - category: 'design', - - attributes: { - content: { - type: 'string', - source: 'html', - selector: 'p', - }, - checkboxField: { - type: 'boolean', - default: true, - }, - radioField: { - type: 'string', - default: 'yes', - }, - textField: { - type: 'string', - }, - toggleField: { - type: 'boolean', - }, - selectField: { - type: 'string', - }, - }, - - edit: function ( props ) { - var blockProps = useBlockProps(); - - var content = props.attributes.content, - checkboxField = props.attributes.checkboxField, - radioField = props.attributes.radioField, - textField = props.attributes.textField, - toggleField = props.attributes.toggleField, - selectField = props.attributes.selectField; - - function onChangeContent( newContent ) { - props.setAttributes( { content: newContent } ); - } - - function onChangeCheckboxField( newValue ) { - props.setAttributes( { checkboxField: newValue } ); - } - - function onChangeRadioField( newValue ) { - props.setAttributes( { radioField: newValue } ); - } - - function onChangeTextField( newValue ) { - props.setAttributes( { textField: newValue } ); - } - - function onChangeToggleField( newValue ) { - props.setAttributes( { toggleField: newValue } ); - } - - function onChangeSelectField( newValue ) { - props.setAttributes( { selectField: newValue } ); - } - - return el( - Fragment, - null, - el( - InspectorControls, - null, - el( - PanelBody, - { - title: 'Settings', - }, - el( CheckboxControl, { - heading: 'Checkbox Field', - label: 'Tick Me', - help: 'Additional help text', - checked: checkboxField, - onChange: onChangeCheckboxField, - } ), - el( RadioControl, { - label: 'Radio Field', - selected: radioField, - options: [ - { - label: 'Yes', - value: 'yes', - }, - { - label: 'No', - value: 'no', - }, - ], - onChange: onChangeRadioField, - } ), - el( TextControl, { - label: 'Text Field', - help: 'Additional help text', - value: textField, - onChange: onChangeTextField, - } ), - el( ToggleControl, { - label: 'Toggle Field', - checked: toggleField, - onChange: onChangeToggleField, - } ), - el( SelectControl, { - label: 'Select Field', - value: selectField, - options: [ - { - value: 'a', - label: 'Option A', - }, - { - value: 'b', - label: 'Option B', - }, - { - value: 'c', - label: 'Option C', - }, - ], - onChange: onChangeSelectField, - } ) - ) - ), - el( - RichText, - Object.assing( blockProps, { - key: 'editable', - tagName: 'p', - onChange: onChangeContent, - value: content, - } ) - ) - ); - }, - - save: function ( props ) { - var blockProps = useBlockProps.save(); - var content = props.attributes.content, - checkboxField = props.attributes.checkboxField, - radioField = props.attributes.radioField, - textField = props.attributes.textField, - toggleField = props.attributes.toggleField, - selectField = props.attributes.selectField; - - return el( - 'div', - blockProps, - el( RichText.Content, { - value: content, - tagName: 'p', - } ), - el( 'h2', null, 'Inspector Control Fields' ), - el( - 'ul', - null, - el( 'li', null, 'Checkbox Field: ', checkboxField ), - el( 'li', null, 'Radio Field: ', radioField ), - el( 'li', null, 'Text Field: ', textField ), - el( 'li', null, 'Toggle Field: ', toggleField ), - el( 'li', null, 'Select Field: ', selectField ) - ) - ); - }, -} ); -``` - -{% ESNext %} - ```js import { registerBlockType } from '@wordpress/blocks'; import { @@ -209,7 +14,7 @@ import { TextControl, ToggleControl, SelectControl, - PanelBody + PanelBody, } from '@wordpress/components'; import { RichText, @@ -289,7 +94,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', { return ( <> - + + +Inspector Advanced Controls appear under the _Advanced_ panel of a block's [InspectorControls](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md) -- that is, they appear as a specific set of controls within a block's settings panels. As the name suggests, `InspectorAdvancedControls` is meant for controls that most users aren't meant to interact with most of the time, such as adding an HTML anchor or custom CSS classes to a block. + +### Usage + +```js +import { + TextControl, +} from '@wordpress/components'; +import { + InspectorControls, + InspectorAdvancedControls, +} from '@wordpress/block-editor'; + +function MyBlockEdit( { attributes, setAttributes } ) { + return ( + <> +
+ { /* Block markup goes here */ } +
+ { /* Regular control goes here */ + + + { + setAttributes( { + anchor: nextValue, + } ); + } } + /> + + + ); +} +``` diff --git a/packages/block-editor/src/components/inspector-controls/fill.js b/packages/block-editor/src/components/inspector-controls/fill.js new file mode 100644 index 0000000000000..bb1c8fd7accdf --- /dev/null +++ b/packages/block-editor/src/components/inspector-controls/fill.js @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components'; +import warning from '@wordpress/warning'; + +/** + * Internal dependencies + */ +import useDisplayBlockControls from '../use-display-block-controls'; +import groups from './groups'; + +export default function InspectorControlsFill( { + __experimentalGroup: group = 'default', + children, +} ) { + const isDisplayed = useDisplayBlockControls(); + const Fill = groups[ group ]?.Fill; + if ( ! Fill ) { + warning( `Unknown InspectorControl group "${ group }" provided.` ); + return null; + } + if ( ! isDisplayed ) { + return null; + } + + return ( + + { children } + + ); +} diff --git a/packages/block-editor/src/components/inspector-controls/index.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js similarity index 57% rename from packages/block-editor/src/components/inspector-controls/index.native.js rename to packages/block-editor/src/components/inspector-controls/fill.native.js index ed131ddb4ce6a..01ac32b256500 100644 --- a/packages/block-editor/src/components/inspector-controls/index.native.js +++ b/packages/block-editor/src/components/inspector-controls/fill.native.js @@ -7,18 +7,27 @@ import { View } from 'react-native'; * WordPress dependencies */ import { Children } from '@wordpress/element'; -import { createSlotFill, BottomSheetConsumer } from '@wordpress/components'; +import { BottomSheetConsumer } from '@wordpress/components'; +import warning from '@wordpress/warning'; /** * Internal dependencies */ +import groups from './groups'; import { useBlockEditContext } from '../block-edit/context'; import { BlockSettingsButton } from '../block-settings'; -const { Fill, Slot } = createSlotFill( 'InspectorControls' ); - -const FillWithSettingsButton = ( { children, ...props } ) => { +export default function InspectorControlsFill( { + children, + __experimentalGroup: group = 'default', + ...props +} ) { const { isSelected } = useBlockEditContext(); + const Fill = groups[ group ]?.Fill; + if ( ! Fill ) { + warning( `Unknown InspectorControl group "${ group }" provided.` ); + return null; + } if ( ! isSelected ) { return null; } @@ -35,13 +44,4 @@ const FillWithSettingsButton = ( { children, ...props } ) => { { Children.count( children ) > 0 && } ); -}; - -const InspectorControls = FillWithSettingsButton; - -InspectorControls.Slot = Slot; - -/** - * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md - */ -export default InspectorControls; +} diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js new file mode 100644 index 0000000000000..a989132afd4c7 --- /dev/null +++ b/packages/block-editor/src/components/inspector-controls/groups.js @@ -0,0 +1,14 @@ +/** + * WordPress dependencies + */ +import { createSlotFill } from '@wordpress/components'; + +const InspectorControlsDefault = createSlotFill( 'InspectorControls' ); +const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' ); + +const groups = { + default: InspectorControlsDefault, + advanced: InspectorControlsAdvanced, +}; + +export default groups; diff --git a/packages/block-editor/src/components/inspector-controls/index.js b/packages/block-editor/src/components/inspector-controls/index.js index 9a6cb7bab61a7..4cb36cdc84399 100644 --- a/packages/block-editor/src/components/inspector-controls/index.js +++ b/packages/block-editor/src/components/inspector-controls/index.js @@ -1,27 +1,25 @@ -/** - * WordPress dependencies - */ -import { - __experimentalStyleProvider as StyleProvider, - createSlotFill, -} from '@wordpress/components'; - /** * Internal dependencies */ -import useDisplayBlockControls from '../use-display-block-controls'; +import InspectorControlsFill from './fill'; +import InspectorControlsSlot from './slot'; -const { Fill, Slot } = createSlotFill( 'InspectorControls' ); +const InspectorControls = InspectorControlsFill; -function InspectorControls( { children } ) { - return useDisplayBlockControls() ? ( - - { children } - - ) : null; -} +InspectorControls.Slot = InspectorControlsSlot; -InspectorControls.Slot = Slot; +// This is just here for backward compatibility. +export const InspectorAdvancedControls = ( props ) => { + return ( + + ); +}; +InspectorAdvancedControls.Slot = ( props ) => { + return ( + + ); +}; +InspectorAdvancedControls.slotName = 'InspectorAdvancedControls'; /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js new file mode 100644 index 0000000000000..f17714cfe41b6 --- /dev/null +++ b/packages/block-editor/src/components/inspector-controls/slot.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { __experimentalUseSlot as useSlot } from '@wordpress/components'; +import warning from '@wordpress/warning'; + +/** + * Internal dependencies + */ +import groups from './groups'; + +export default function InspectorControlsSlot( { + __experimentalGroup: group = 'default', + bubblesVirtually = true, + ...props +} ) { + const Slot = groups[ group ]?.Slot; + const slot = useSlot( Slot?.__unstableName ); + if ( ! Slot || ! slot ) { + warning( `Unknown InspectorControl group "${ group }" provided.` ); + return null; + } + + const hasFills = Boolean( slot.fills && slot.fills.length ); + if ( ! hasFills ) { + return null; + } + + return ; +} diff --git a/packages/block-editor/src/components/inspector-controls/slot.native.js b/packages/block-editor/src/components/inspector-controls/slot.native.js new file mode 100644 index 0000000000000..adf4da06965e4 --- /dev/null +++ b/packages/block-editor/src/components/inspector-controls/slot.native.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import warning from '@wordpress/warning'; + +/** + * Internal dependencies + */ +import groups from './groups'; + +export default function InspectorControlsSlot( { + __experimentalGroup: group = 'default', + ...props +} ) { + const Slot = groups[ group ]?.Slot; + if ( ! Slot ) { + warning( `Unknown InspectorControl group "${ group }" provided.` ); + return null; + } + + return ; +} diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 3e1e2b813072e..07024b78c51f6 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -16,7 +16,7 @@ import { Platform } from '@wordpress/element'; /** * Internal dependencies */ -import { InspectorControls, InspectorAdvancedControls } from '../components'; +import { InspectorControls } from '../components'; /** * Regular expression matching invalid anchor characters for replacement. @@ -107,9 +107,9 @@ export const withInspectorControl = createHigherOrderComponent( <> { isWeb && ( - + { textControl } - + ) } { /* * We plan to remove scoping anchors to 'core/heading' to support diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js index ae5b623887cca..0ed09f8975c5c 100644 --- a/packages/block-editor/src/hooks/custom-class-name.js +++ b/packages/block-editor/src/hooks/custom-class-name.js @@ -15,7 +15,7 @@ import { createHigherOrderComponent } from '@wordpress/compose'; /** * Internal dependencies */ -import { InspectorAdvancedControls } from '../components'; +import { InspectorControls } from '../components'; /** * Filters registered block settings, extending attributes with anchor using ID @@ -59,7 +59,7 @@ export const withInspectorControl = createHigherOrderComponent( return ( <> - + - + ); } diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index c0f80bc40ae0d..fd7bb6edde87c 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -20,7 +20,6 @@ import { import { BlockControls, InspectorControls, - InspectorAdvancedControls, RichText, useBlockProps, __experimentalUseBorderProps as useBorderProps, @@ -260,13 +259,13 @@ function ButtonEdit( props ) { setAttributes={ setAttributes } /> - + - + ); } diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 5628ea0105ce8..c82ab09a1709a 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -5,7 +5,7 @@ import { useSelect } from '@wordpress/data'; import { InnerBlocks, useBlockProps, - InspectorAdvancedControls, + InspectorControls, __experimentalUseInnerBlocksProps as useInnerBlocksProps, useSetting, store as blockEditorStore, @@ -45,7 +45,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { return ( <> - + - + { themeSupportsLayout && } { /* Ideally this is not needed but it's there for backward compatibility reason to keep this div for themes that might rely on its presence */ } diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 54b552186e7ff..b4cc2c29f6252 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -21,7 +21,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { BlockControls, InspectorControls, - InspectorAdvancedControls, RichText, __experimentalImageSizeControl as ImageSizeControl, __experimentalImageURLInputUI as ImageURLInputUI, @@ -371,7 +370,7 @@ export default function Image( { /> - + } /> - + ); diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js index 4a939e2af579c..4ce94235615a4 100644 --- a/packages/block-library/src/post-terms/edit.js +++ b/packages/block-library/src/post-terms/edit.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { AlignmentToolbar, - InspectorAdvancedControls, + InspectorControls, BlockControls, Warning, useBlockProps, @@ -79,7 +79,7 @@ export default function PostTermsEdit( { } } /> - + - +
{ isLoading && } { ! isLoading && diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index e297534ed8f79..b08bd12eba31b 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -7,7 +7,7 @@ import { useInstanceId } from '@wordpress/compose'; import { useEffect } from '@wordpress/element'; import { BlockControls, - InspectorAdvancedControls, + InspectorControls, useBlockProps, useSetting, store as blockEditorStore, @@ -104,7 +104,7 @@ export function QueryContent( { attributes, setAttributes } ) { setDisplayLayout={ updateDisplayLayout } /> - + - + ); diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js index 9086b307b1a83..26393db2d7585 100644 --- a/packages/block-library/src/template-part/edit/advanced-controls.js +++ b/packages/block-library/src/template-part/edit/advanced-controls.js @@ -4,7 +4,7 @@ import { useEntityProp } from '@wordpress/core-data'; import { SelectControl, TextControl } from '@wordpress/components'; import { sprintf, __ } from '@wordpress/i18n'; -import { InspectorAdvancedControls } from '@wordpress/block-editor'; +import { InspectorControls } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; export function TemplatePartAdvancedControls( { @@ -44,7 +44,7 @@ export function TemplatePartAdvancedControls( { }, [] ); return ( - + { isEntityAvailable && ( <> setAttributes( { tagName: value } ) } /> - + ); }