diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 0ae5979b79704..10f0f76d9eb0d 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/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
diff --git a/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap b/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
index 2782d6ae0b984..045fb0e3bd944 100644
--- a/packages/block-editor/src/hooks/test/__snapshots__/align.native.js.snap
+++ b/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`] = `
-"
+"
"
`;
exports[`Align options for media block sets Align left option 1`] = `
-"
+"
"
`;
exports[`Align options for media block sets Align right option 1`] = `
-"
+"
"
`;
exports[`Align options for media block sets Full width option 1`] = `
-"
+"
"
`;
@@ -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`] = `
-"
+"
"
`;
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index d665a8a8f7708..b46829e5059a2 100644
--- a/packages/block-library/src/image/block.json
+++ b/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,
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index c58a96e594911..d189af32efcbe 100644
--- a/packages/block-library/src/image/edit.js
+++ b/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' && (
-
-
-
- ) }
}
onSelect={ onSelectImage }
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 804ae9e1671f6..44ebfda67d875 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/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 }
/>
-
);
@@ -941,8 +937,11 @@ export default compose( [
} ),
withDispatch( ( dispatch ) => {
const { createErrorNotice } = dispatch( noticesStore );
+ const { __unstableMarkNextChangeAsNotPersistent } =
+ dispatch( blockEditorStore );
return {
+ __unstableMarkNextChangeAsNotPersistent,
createErrorNotice,
closeSettingsBottomSheet() {
dispatch( editPostStore ).closeGeneralSidebar();
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 64eb03adedb32..11d460efd472c 100644
--- a/packages/block-library/src/image/image.js
+++ b/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 = (
<>
- { hasNonContentControls && (
-
- ) }
{ hasNonContentControls && (
{
diff --git a/packages/components/src/mobile/utils/alignments.native.js b/packages/components/src/mobile/utils/alignments.native.js
index 98635ea4681ad..bc42385988a5d 100644
--- a/packages/components/src/mobile/utils/alignments.native.js
+++ b/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',
diff --git a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap b/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
index 32f2dab713766..071870a420817 100644
--- a/test/integration/__snapshots__/blocks-raw-handling.test.js.snap
+++ b/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`] = `
-"
+"
test
"
`;
exports[`rawHandler should convert a caption shortcode with caption 1`] = `
-"
+"
test
"
`;
exports[`rawHandler should convert a caption shortcode with link 1`] = `
-"
+"
Bell on wharf in San Francisco
"
`;
diff --git a/test/integration/fixtures/blocks/core__image__center-caption.json b/test/integration/fixtures/blocks/core__image__center-caption.json
index a369e433b4028..034047c07089b 100644
--- a/test/integration/fixtures/blocks/core__image__center-caption.json
+++ b/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": []
}
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
index 9a66da6c01898..c03189e9b456c 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html
@@ -1,3 +1,3 @@
-
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
index 9a66da6c01898..c03189e9b456c 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html
@@ -1,3 +1,3 @@
-
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
index 99da2155bce88..b9e58cc24fddb 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html
@@ -1,3 +1,3 @@
-
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
index 807ba3abc9f9c..57545968847e1 100644
--- a/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
+++ b/test/integration/fixtures/blocks/core__image__deprecated-v6-add-style-width-height.serialized.html
@@ -1,3 +1,3 @@
-
+
diff --git a/test/integration/fixtures/documents/wordpress-out.html b/test/integration/fixtures/documents/wordpress-out.html
index c394fa232081d..a0ac4b89ec552 100644
--- a/test/integration/fixtures/documents/wordpress-out.html
+++ b/test/integration/fixtures/documents/wordpress-out.html
@@ -28,7 +28,7 @@ Shortcode
-
+
