Add check for PushChangesToGlobalStylesConrtol (#50912)

Block Supports: Disable block supports when Editing Mode is not default Co-authored-by: Alex Lende <alex@lende.xyz> Co-authored-by: Alex Lende <5129775+ajlende@users.noreply.github.com> Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com>
WordPress · Jun 2, 2023 · 6b626b2 · 6b626b2
1 parent 555749a
commit 6b626b2
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 31 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -356,6 +356,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						</div>
 					) }
 					<InspectorControls.Slot />
+					<InspectorControls.Slot group="list" />
 					<InspectorControls.Slot
 						group="color"
 						label={ __( 'Color' ) }

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -26,7 +26,6 @@ export default function InspectorControlsTabs( {
 	const initialTabName = ! useIsListViewTabDisabled( blockName )
 		? TAB_LIST_VIEW.name
 		: undefined;
-
 	return (
 		<TabPanel
 			className="block-editor-block-inspector__tabs"

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js b/packages/block-editor/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js
@@ -90,6 +90,5 @@ export default function useInspectorControlsTabs( blockName ) {
 	}, [] );
 
 	const showTabs = getShowTabs( blockName, tabSettings );
-
 	return showTabs ? tabs : EMPTY_ARRAY;
 }
diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
@@ -12,6 +12,7 @@ import { Platform } from '@wordpress/element';
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * Regular expression matching invalid anchor characters for replacement.
@@ -63,6 +64,7 @@ export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
 			const hasAnchor = hasBlockSupport( props.name, 'anchor' );
+			const blockEditingMode = useBlockEditingMode();
 
 			if ( hasAnchor && props.isSelected ) {
 				const isWeb = Platform.OS === 'web';
@@ -104,7 +106,7 @@ export const withInspectorControl = createHigherOrderComponent(
 				return (
 					<>
 						<BlockEdit { ...props } />
-						{ isWeb && (
+						{ isWeb && blockEditingMode === 'default' && (
 							<InspectorControls group="advanced">
 								{ textControl }
 							</InspectorControls>

diff --git a/packages/block-editor/src/hooks/custom-class-name.js b/packages/block-editor/src/hooks/custom-class-name.js
@@ -16,6 +16,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * Filters registered block settings, extending attributes to include `className`.
@@ -50,6 +51,7 @@ export function addAttribute( settings ) {
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
+			const blockEditingMode = useBlockEditingMode();
 			const hasCustomClassName = hasBlockSupport(
 				props.name,
 				'customClassName',
@@ -59,25 +61,27 @@ export const withInspectorControl = createHigherOrderComponent(
 				return (
 					<>
 						<BlockEdit { ...props } />
-						<InspectorControls group="advanced">
-							<TextControl
-								__nextHasNoMarginBottom
-								autoComplete="off"
-								label={ __( 'Additional CSS class(es)' ) }
-								value={ props.attributes.className || '' }
-								onChange={ ( nextValue ) => {
-									props.setAttributes( {
-										className:
-											nextValue !== ''
-												? nextValue
-												: undefined,
-									} );
-								} }
-								help={ __(
-									'Separate multiple classes with spaces.'
-								) }
-							/>
-						</InspectorControls>
+						{ blockEditingMode === 'default' && (
+							<InspectorControls group="advanced">
+								<TextControl
+									__nextHasNoMarginBottom
+									autoComplete="off"
+									label={ __( 'Additional CSS class(es)' ) }
+									value={ props.attributes.className || '' }
+									onChange={ ( nextValue ) => {
+										props.setAttributes( {
+											className:
+												nextValue !== ''
+													? nextValue
+													: undefined,
+										} );
+									} }
+									help={ __(
+										'Separate multiple classes with spaces.'
+									) }
+								/>
+							</InspectorControls>
+						) }
 					</>
 				);
 			}

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -329,8 +329,11 @@ export const withInspectorControls = createHigherOrderComponent(
 			layoutBlockSupportKey
 		);
 
+		const blockEditingMode = useBlockEditingMode();
 		return [
-			supportLayout && <LayoutPanel key="layout" { ...props } />,
+			supportLayout && blockEditingMode === 'default' && (
+				<LayoutPanel key="layout" { ...props } />
+			),
 			<BlockEdit key="edit" { ...props } />,
 		];
 	},

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
@@ -34,6 +34,7 @@ import {
 } from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
 import { shouldSkipSerialization } from './utils';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -347,10 +348,11 @@ export function addEditProps( settings ) {
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const shouldDisplayControls = useDisplayBlockControls();
+		const blockEditingMode = useBlockEditingMode();
 
 		return (
 			<>
-				{ shouldDisplayControls && (
+				{ shouldDisplayControls && blockEditingMode === 'default' && (
 					<>
 						<ColorEdit { ...props } />
 						<TypographyPanel { ...props } />

diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js
@@ -29,7 +29,9 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../private-apis';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { GlobalStylesContext, useBlockEditingMode } = unlock(
+	blockEditorPrivateApis
+);
 
 // TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
 // removed by moving PushChangesToGlobalStylesControl to
@@ -208,15 +210,19 @@ function PushChangesToGlobalStylesControl( {
 }
 
 const withPushChangesToGlobalStyles = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) =>
-		(
+	( BlockEdit ) => ( props ) => {
+		const blockEditingMode = useBlockEditingMode();
+		return (
 			<>
 				<BlockEdit { ...props } />
-				<InspectorAdvancedControls>
-					<PushChangesToGlobalStylesControl { ...props } />
-				</InspectorAdvancedControls>
+				{ blockEditingMode === 'default' && (
+					<InspectorAdvancedControls>
+						<PushChangesToGlobalStylesControl { ...props } />
+					</InspectorAdvancedControls>
+				) }
 			</>
-		)
+		);
+	}
 );
 
 addFilter(