Add align support to the image block - alternative

docs/reference-guides/core-blocks.md

@@ -378,8 +378,8 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 
 -	**Name:** core/image
 -	**Category:** media
--	**Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone)
--	**Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
+-	**Supports:** align (center, full, left, right, wide), anchor, color (~~background~~, ~~text~~), filter (duotone)
+-	**Attributes:** alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments
 

packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap

@@ -19,25 +19,25 @@ exports[`Align options for group block sets Wide width option 1`] = `
 `;
 
 exports[`Align options for media block sets Align center option 1`] = `
-"<!-- wp:image {"align":"center","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
 <figure class="wp-block-image aligncenter size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align left option 1`] = `
-"<!-- wp:image {"align":"left","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
 <figure class="wp-block-image alignleft size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align right option 1`] = `
-"<!-- wp:image {"align":"right","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"right"} -->
 <figure class="wp-block-image alignright size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Full width option 1`] = `
-"<!-- wp:image {"align":"full","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"full"} -->
 <figure class="wp-block-image alignfull size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
@@ -49,7 +49,7 @@ exports[`Align options for media block sets None option 1`] = `
 `;
 
 exports[`Align options for media block sets Wide width option 1`] = `
-"<!-- wp:image {"align":"wide","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"wide"} -->
 <figure class="wp-block-image alignwide size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;

packages/block-library/src/image/block.json

@@ -9,9 +9,6 @@
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",
 	"attributes": {
-		"align": {
-			"type": "string"
-		},
 		"url": {
 			"type": "string",
 			"source": "attribute",
@@ -95,6 +92,7 @@
 		}
 	},
 	"supports": {
+		"align": [ "left", "center", "right", "wide", "full" ],
 		"anchor": true,
 		"color": {
 			"text": false,

packages/block-library/src/image/edit.js

@@ -10,8 +10,6 @@ import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	BlockAlignmentControl,
-	BlockControls,
 	BlockIcon,
 	MediaPlaceholder,
 	useBlockProps,
@@ -106,13 +104,13 @@ export function ImageEdit( {
 		url = '',
 		alt,
 		caption,
-		align,
 		id,
 		width,
 		height,
 		sizeSlug,
 		aspectRatio,
 		scale,
+		align,
 	} = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState();
 
@@ -126,6 +124,21 @@ export function ImageEdit( {
 		captionRef.current = caption;
 	}, [ caption ] );
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( [ 'wide', 'full' ].includes( align ) ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				width: undefined,
+				height: undefined,
+				aspectRatio: undefined,
+				scale: undefined,
+			} );
+		}
+	}, [ align ] );
+
 	const ref = useRef();
 	const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -255,16 +268,6 @@ export function ImageEdit( {
 		}
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	let isTemp = isTemporaryImage( id, url );
 
 	// Upload a temporary image on mount.
@@ -375,14 +378,6 @@ export function ImageEdit( {
 				clientId={ clientId }
 				blockEditingMode={ blockEditingMode }
 			/>
-			{ ! url && blockEditingMode === 'default' && (
-				<BlockControls group="block">
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				</BlockControls>
-			) }
 			<MediaPlaceholder
 				icon={ <BlockIcon icon={ icon } /> }
 				onSelect={ onSelectImage }

packages/block-library/src/image/edit.native.js

@@ -44,7 +44,6 @@ import {
 	MEDIA_TYPE_IMAGE,
 	BlockControls,
 	InspectorControls,
-	BlockAlignmentToolbar,
 	BlockStyles,
 	store as blockEditorStore,
 	blockSettingsScreens,
@@ -212,7 +211,6 @@ export class ImageEdit extends Component {
 		this.onSetFeatured = this.onSetFeatured.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 		this.onSelectURL = this.onSelectURL.bind( this );
-		this.updateAlignment = this.updateAlignment.bind( this );
 		this.accessibilityLabelCreator =
 			this.accessibilityLabelCreator.bind( this );
 		this.setMappedAttributes = this.setMappedAttributes.bind( this );
@@ -305,6 +303,20 @@ export class ImageEdit extends Component {
 			this.replacedFeaturedImage = false;
 			setFeaturedImage( id );
 		}
+
+		const { align } = attributes;
+		const { __unstableMarkNextChangeAsNotPersistent } = this.props;
+
+		// Update the attributes if the align is wide or full
+		if ( [ 'wide', 'full' ].includes( align ) ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( {
+				width: undefined,
+				height: undefined,
+				aspectRatio: undefined,
+				scale: undefined,
+			} );
+		}
 	}
 
 	static getDerivedStateFromProps( props, state ) {
@@ -391,18 +403,6 @@ export class ImageEdit extends Component {
 		} );
 	}
 
-	updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = Object.values(
-			WIDE_ALIGNMENTS.alignments
-		).includes( nextAlign )
-			? { width: undefined, height: undefined }
-			: {};
-		this.props.setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	onSetNewTab( value ) {
 		const updatedLinkTarget = getUpdatedLinkTargetSettings(
 			value,
@@ -711,10 +711,6 @@ export class ImageEdit extends Component {
 						onClick={ open }
 					/>
 				</ToolbarGroup>
-				<BlockAlignmentToolbar
-					value={ align }
-					onChange={ this.updateAlignment }
-				/>
 			</BlockControls>
 		);
 
@@ -941,8 +937,11 @@ export default compose( [
 	} ),
 	withDispatch( ( dispatch ) => {
 		const { createErrorNotice } = dispatch( noticesStore );
+		const { __unstableMarkNextChangeAsNotPersistent } =
+			dispatch( blockEditorStore );
 
 		return {
+			__unstableMarkNextChangeAsNotPersistent,
 			createErrorNotice,
 			closeSettingsBottomSheet() {
 				dispatch( editPostStore ).closeGeneralSidebar();

packages/block-library/src/image/image.js

@@ -25,7 +25,6 @@ import {
 	MediaReplaceFlow,
 	store as blockEditorStore,
 	useSettings,
-	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
@@ -353,21 +352,6 @@ export default function Image( {
 		} );
 	}
 
-	function updateAlignment( nextAlign ) {
-		const extraUpdatedAttributes = [ 'wide', 'full' ].includes( nextAlign )
-			? {
-					width: undefined,
-					height: undefined,
-					aspectRatio: undefined,
-					scale: undefined,
-			  }
-			: {};
-		setAttributes( {
-			...extraUpdatedAttributes,
-			align: nextAlign,
-		} );
-	}
-
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
@@ -455,12 +439,6 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ hasNonContentControls && (
-					<BlockAlignmentControl
-						value={ align }
-						onChange={ updateAlignment }
-					/>
-				) }
 				{ hasNonContentControls && (
 					<ToolbarButton
 						onClick={ () => {

packages/components/src/mobile/utils/alignments.native.js

@@ -10,6 +10,7 @@ export const WIDE_ALIGNMENTS = {
 	},
 	excludeBlocks: [ 'core/heading' ],
 	notInnerContainers: [
+		'core/image',
 		'core/separator',
 		'core/media-text',
 		'core/pullquote',

test/integration/__snapshots__/blocks-raw-handling.test.js.snap

@@ -158,19 +158,19 @@ exports[`rawHandler should convert HTML post to blocks with minimal content chan
 `;
 
 exports[`rawHandler should convert a caption shortcode 1`] = `
-"<!-- wp:image {"align":"none","id":122,"className":"size-medium wp-image-122"} -->
+"<!-- wp:image {"id":122,"align":"none","className":"size-medium wp-image-122"} -->
 <figure class="wp-block-image alignnone size-medium wp-image-122"><img src="image.png" alt="" class="wp-image-122"/><figcaption class="wp-element-caption">test</figcaption></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`rawHandler should convert a caption shortcode with caption 1`] = `
-"<!-- wp:image {"align":"none","id":122,"className":"size-medium wp-image-122"} -->
+"<!-- wp:image {"id":122,"align":"none","className":"size-medium wp-image-122"} -->
 <figure class="wp-block-image alignnone size-medium wp-image-122"><img src="image.png" alt="" class="wp-image-122"/><figcaption class="wp-element-caption"><a href="https://w.org">test</a></figcaption></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`rawHandler should convert a caption shortcode with link 1`] = `
-"<!-- wp:image {"align":"none","id":754} -->
+"<!-- wp:image {"id":754,"align":"none"} -->
 <figure class="wp-block-image alignnone"><a href="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg"><img src="http://build.wordpress-develop.test/wp-content/uploads/2011/07/100_5478.jpg?w=604" alt="Bell on Wharf" class="wp-image-754"/></a><figcaption class="wp-element-caption">Bell on wharf in San Francisco</figcaption></figure>
 <!-- /wp:image -->"
 `;

test/integration/fixtures/blocks/core__image__center-caption.json

@@ -3,10 +3,10 @@
 		"name": "core/image",
 		"isValid": true,
 		"attributes": {
-			"align": "center",
 			"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
 			"alt": "",
-			"caption": "Give it a try. Press the \"really wide\" button on the image toolbar."
+			"caption": "Give it a try. Press the \"really wide\" button on the image toolbar.",
+			"align": "center"
 		},
 		"innerBlocks": []
 	}

test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","width":100,"height":100} -->
+<!-- wp:image {"width":100,"height":100,"align":"left"} -->
 <figure class="wp-block-image alignleft is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:100px;height:100px"/></figure>
 <!-- /wp:image -->

test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","width":100,"height":100} -->
+<!-- wp:image {"width":100,"height":100,"align":"left"} -->
 <figure class="wp-block-image alignleft is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="width:100px;height:100px"/></figure>
 <!-- /wp:image -->

test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","id":13,"width":358,"height":164,"sizeSlug":"large","linkDestination":"none"} -->
+<!-- wp:image {"id":13,"width":358,"height":164,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
 <figure class="wp-block-image alignleft size-large is-resized"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" class="wp-image-13" style="width:358px;height:164px"/></figure>
 <!-- /wp:image -->

test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html

@@ -1,3 +1,3 @@
-<!-- wp:image {"align":"left","width":164,"height":164,"sizeSlug":"large","className":"is-style-rounded","style":{"border":{"radius":"100%"}}} -->
+<!-- wp:image {"width":164,"height":164,"sizeSlug":"large","align":"left","className":"is-style-rounded","style":{"border":{"radius":"100%"}}} -->
 <figure class="wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" style="border-radius:100%;width:164px;height:164px"/></figure>
 <!-- /wp:image -->

test/integration/fixtures/documents/wordpress-out.html

@@ -28,7 +28,7 @@ <h3 class="wp-block-heading">Shortcode</h3>
 <figure class="wp-block-image"><img src="block.png" alt="" class="wp-image-5114"/></figure>
 <!-- /wp:image -->
 
-<!-- wp:image {"align":"right","id":5114} -->
+<!-- wp:image {"id":5114,"align":"right"} -->
 <figure class="wp-block-image alignright"><img src="aligned.png" alt="" class="wp-image-5114"/></figure>
 <!-- /wp:image -->