Update: Improve content locking on media & text block. (#44036)

WordPress · Sep 13, 2022 · 2ef8762 · 2ef8762
1 parent e435711
commit 2ef8762
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 31 deletions.
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -137,7 +137,7 @@ function attributesFromMedia( {
 	};
 }
 
-function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
+function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const {
 		focalPoint,
 		href,
@@ -157,12 +157,24 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
-	const image = useSelect(
-		( select ) =>
-			mediaId && isSelected
-				? select( coreStore ).getMedia( mediaId, { context: 'view' } )
-				: null,
-		[ isSelected, mediaId ]
+	const { imageSizes, image, isContentLocked } = useSelect(
+		( select ) => {
+			const { __unstableGetContentLockingParent, getSettings } =
+				select( blockEditorStore );
+			return {
+				isContentLocked:
+					!! __unstableGetContentLockingParent( clientId ),
+				image:
+					mediaId && isSelected
+						? select( coreStore ).getMedia( mediaId, {
+								context: 'view',
+						  } )
+						: null,
+				imageSizes: getSettings()?.imageSizes,
+			};
+		},
+
+		[ isSelected, mediaId, clientId ]
 	);
 
 	const refMediaContainer = useRef();
@@ -213,10 +225,6 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 		setAttributes( { verticalAlignment: alignment } );
 	};
 
-	const imageSizes = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		return settings?.imageSizes;
-	}, [] );
 	const imageSizeOptions = map(
 		filter( imageSizes, ( { slug } ) =>
 			getImageSourceUrlBySizeSlug( image, slug )
@@ -322,24 +330,31 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 		<>
 			<InspectorControls>{ mediaTextGeneralSettings }</InspectorControls>
 			<BlockControls group="block">
-				<BlockVerticalAlignmentControl
-					onChange={ onVerticalAlignmentChange }
-					value={ verticalAlignment }
-				/>
-				<ToolbarButton
-					icon={ pullLeft }
-					title={ __( 'Show media on left' ) }
-					isActive={ mediaPosition === 'left' }
-					onClick={ () => setAttributes( { mediaPosition: 'left' } ) }
-				/>
-				<ToolbarButton
-					icon={ pullRight }
-					title={ __( 'Show media on right' ) }
-					isActive={ mediaPosition === 'right' }
-					onClick={ () =>
-						setAttributes( { mediaPosition: 'right' } )
-					}
-				/>
+				{ ! isContentLocked && (
+					<>
+						<BlockVerticalAlignmentControl
+							onChange={ onVerticalAlignmentChange }
+							value={ verticalAlignment }
+						/>
+						<ToolbarButton
+							icon={ pullLeft }
+							title={ __( 'Show media on left' ) }
+							isActive={ mediaPosition === 'left' }
+							onClick={ () =>
+								setAttributes( { mediaPosition: 'left' } )
+							}
+						/>
+						<ToolbarButton
+							icon={ pullRight }
+							title={ __( 'Show media on right' ) }
+							isActive={ mediaPosition === 'right' }
+							onClick={ () =>
+								setAttributes( { mediaPosition: 'right' } )
+							}
+						/>
+					</>
+				) }
+
 				{ mediaType === 'image' && (
 					<ImageURLInputUI
 						url={ href || '' }
@@ -373,6 +388,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 						mediaType,
 						mediaUrl,
 						mediaWidth,
+						isContentLocked,
 					} }
 				/>
 				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }

diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
@@ -113,6 +113,7 @@ function MediaContainer( props, ref ) {
 		mediaWidth,
 		onSelectMedia,
 		onWidthChange,
+		isContentLocked,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
@@ -131,8 +132,8 @@ function MediaContainer( props, ref ) {
 			commitWidthChange( parseInt( elt.style.width ) );
 		};
 		const enablePositions = {
-			right: mediaPosition === 'left',
-			left: mediaPosition === 'right',
+			right: ! isContentLocked && mediaPosition === 'left',
+			left: ! isContentLocked && mediaPosition === 'right',
 		};
 
 		const backgroundStyles =