Update: Improve content locking experience.

WordPress · Sep 9, 2022 · aabc7e7 · aabc7e7
1 parent e0fe1a7
commit aabc7e7
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 25 deletions.
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
@@ -14,12 +14,14 @@ import {
 	getBlockType,
 	hasBlockSupport,
 } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { BlockControls, BlockAlignmentControl } from '../components';
 import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
+import { store as blockEditorStore } from '../store';
 
 /**
  * An array which includes all possible valid alignments,
@@ -116,6 +118,7 @@ export function addAttribute( settings ) {
  */
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		const blockEdit = <BlockEdit { ...props } />;
 		const { name: blockName } = props;
 		// Compute the block valid alignments by taking into account,
 		// if the theme supports wide alignments or not and the layout's
@@ -129,6 +132,17 @@ export const withToolbarControls = createHigherOrderComponent(
 		const validAlignments = useAvailableAlignments(
 			blockAllowedAlignments
 		).map( ( { name } ) => name );
+		const isContentLocked = useSelect(
+			( select ) => {
+				return select(
+					blockEditorStore
+				).__unstableGetContentLockingParent( props.clientId );
+			},
+			[ props.clientId ]
+		);
+		if ( ! validAlignments.length || isContentLocked ) {
+			return blockEdit;
+		}
 
 		const updateAlignment = ( nextAlign ) => {
 			if ( ! nextAlign ) {
@@ -143,19 +157,14 @@ export const withToolbarControls = createHigherOrderComponent(
 
 		return (
 			<>
-				{ !! validAlignments.length && (
-					<BlockControls
-						group="block"
-						__experimentalShareWithChildBlocks
-					>
-						<BlockAlignmentControl
-							value={ props.attributes.align }
-							onChange={ updateAlignment }
-							controls={ validAlignments }
-						/>
-					</BlockControls>
-				) }
-				<BlockEdit { ...props } />
+				<BlockControls group="block" __experimentalShareWithChildBlocks>
+					<BlockAlignmentControl
+						value={ props.attributes.align }
+						onChange={ updateAlignment }
+						controls={ validAlignments }
+					/>
+				</BlockControls>
+				{ blockEdit }
 			</>
 		);
 	},

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
@@ -12,6 +12,7 @@ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useContext, createPortal } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,6 +28,7 @@ import {
 	__unstableDuotoneStylesheet as DuotoneStylesheet,
 	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
 } from '../components/duotone';
+import { store as blockEditorStore } from '../store';
 
 const EMPTY_ARRAY = [];
 
@@ -157,11 +159,21 @@ const withDuotoneControls = createHigherOrderComponent(
 			props.name,
 			'color.__experimentalDuotone'
 		);
+		const isContentLocked = useSelect(
+			( select ) => {
+				return select(
+					blockEditorStore
+				).__unstableGetContentLockingParent( props.clientId );
+			},
+			[ props.clientId ]
+		);
 
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ hasDuotoneSupport && <DuotonePanel { ...props } /> }
+				{ hasDuotoneSupport && ! isContentLocked && (
+					<DuotonePanel { ...props } />
+				) }
 			</>
 		);
 	},

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -137,10 +137,20 @@ export function ImageEdit( {
 	}, [ caption ] );
 
 	const ref = useRef();
-	const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return pick( getSettings(), [ 'imageDefaultSize', 'mediaUpload' ] );
-	}, [] );
+	const { imageDefaultSize, mediaUpload, isContentLocked } = useSelect(
+		( select ) => {
+			const { getSettings, __unstableGetContentLockingParent } =
+				select( blockEditorStore );
+			const settings = getSettings();
+			return {
+				imageDefaultSize: settings.imageDefaultSize,
+				mediaUpload: settings.mediaUpload,
+				isContentLocked:
+					!! __unstableGetContentLockingParent( clientId ),
+			};
+		},
+		[]
+	);
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
@@ -346,9 +356,10 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
+					isContentLocked={ isContentLocked }
 				/>
 			) }
-			{ ! url && (
+			{ ! url && ! isContentLocked && (
 				<BlockControls group="block">
 					<BlockAlignmentControl
 						value={ align }

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -69,6 +69,7 @@ export default function Image( {
 	containerRef,
 	context,
 	clientId,
+	isContentLocked,
 } ) {
 	const {
 		url = '',
@@ -111,7 +112,7 @@ export default function Image( {
 					),
 			};
 		},
-		[ id, isSelected ]
+		[ id, isSelected, clientId ]
 	);
 	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
 		useSelect(
@@ -152,7 +153,10 @@ export default function Image( {
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
 	const clientWidth = useClientWidth( containerRef, [ align ] );
-	const isResizable = allowResize && ! ( isWideAligned && isLargeViewport );
+	const isResizable =
+		allowResize &&
+		! isContentLocked &&
+		! ( isWideAligned && isLargeViewport );
 	const imageSizeOptions = map(
 		filter( imageSizes, ( { slug } ) =>
 			get( image, [ 'media_details', 'sizes', slug, 'source_url' ] )
@@ -309,10 +313,12 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls group="block">
-				<BlockAlignmentControl
-					value={ align }
-					onChange={ updateAlignment }
-				/>
+				{ ! isContentLocked && (
+					<BlockAlignmentControl
+						value={ align }
+						onChange={ updateAlignment }
+					/>
+				) }
 				{ ! multiImageSelection && ! isEditingImage && (
 					<ImageURLInputUI
 						url={ href || '' }