Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Media & Text: Switch default alignment to none #48404

Merged
merged 10 commits into from
Mar 16, 2023
Merged

Media & Text: Switch default alignment to none #48404

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
83858ec
Add explanatory comments for existing deprecations
aaronrobertshaw Feb 24, 2023
51eb368
Switch default align to none instead of wide
aaronrobertshaw Feb 24, 2023
512fbde
Update deprecations for new align default
aaronrobertshaw Feb 24, 2023
97d10db
Add v6 deprecation fixtures
aaronrobertshaw Feb 24, 2023
1f42ca7
Update main fixture to represent current version
aaronrobertshaw Feb 24, 2023
51a11d0
Regenerate block fixtures
aaronrobertshaw Feb 24, 2023
92b6c9b
Fix link to PR switching default alignment
aaronrobertshaw Mar 2, 2023
295ca16
Prevent already migrated blocks re-migrating
aaronrobertshaw Mar 7, 2023
e7d1fb7
Update native snapshots
aaronrobertshaw Mar 15, 2023
0670f1c
Improve deprecation isEligible explanatory comment
aaronrobertshaw Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ exports[`Cover block transformations with Image to Image block 1`] = `

exports[`Cover block transformations with Image to Media & Text block 1`] = `
"<!-- wp:media-text {"mediaId":890,"mediaType":"image","backgroundColor":"luminous-vivid-orange"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-890 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->"
Expand Down Expand Up @@ -60,7 +60,7 @@ exports[`Cover block transformations with Video to Group block 1`] = `

exports[`Cover block transformations with Video to Media & Text block 1`] = `
"<!-- wp:media-text {"mediaId":891,"mediaType":"video","backgroundColor":"luminous-vivid-orange"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
<div class="wp-block-media-text is-stacked-on-mobile has-luminous-vivid-orange-background-color has-background"><figure class="wp-block-media-text__media"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"has-text-color has-very-light-gray-color","fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-very-light-gray-color has-large-font-size">Cool cover</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->"
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/image/test/__snapshots__/transforms.native.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ exports[`Image block transformations to Group block 1`] = `

exports[`Image block transformations to Media & Text block 1`] = `
"<!-- wp:media-text {"mediaId":1,"mediaType":"image"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->"
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/media-text/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"attributes": {
"align": {
"type": "string",
"default": "wide"
"default": "none"
},
"mediaAlt": {
"type": "string",
Expand Down
238 changes: 235 additions & 3 deletions packages/block-library/src/media-text/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
useInnerBlocksProps,
useBlockProps,
} from '@wordpress/block-editor';
import { compose } from '@wordpress/compose';

/**
* Internal dependencies
Expand All @@ -30,6 +31,19 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
: {};
};

const v6ImageFillStyles = ( url, focalPoint ) => {
return url
? {
backgroundImage: `url(${ url })`,
backgroundPosition: focalPoint
? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
focalPoint.y * 100
) }%`
: `50% 50%`,
}
: {};
};

Comment on lines +34 to +46
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The imageFillStyles function was changed for the previous version, we need to use that same calculation here to keep the styles as they were for the v6 saved markup.

const DEFAULT_MEDIA_WIDTH = 50;
const noop = () => {};

Expand All @@ -49,6 +63,20 @@ const migrateCustomColors = ( attributes ) => {
};
};

// After align attribute's default was updated this function explicitly sets
// the align value for deprecated blocks to the `wide` value which was default
// for their versions of this block.
const migrateDefaultAlign = ( attributes ) => {
if ( attributes.align ) {
return attributes;
}

return {
...attributes,
align: 'wide',
};
};

Comment on lines +69 to +79
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A separate helper is used here so it can be composed with other attribute migrations for older deprecations. It will only update the align attribute if not already set.

const baseAttributes = {
align: {
type: 'string',
Expand Down Expand Up @@ -133,6 +161,40 @@ const v4ToV5BlockAttributes = {
},
};

const v6Attributes = {
...v4ToV5BlockAttributes,
mediaAlt: {
type: 'string',
source: 'attribute',
selector: 'figure img',
attribute: 'alt',
default: '',
__experimentalRole: 'content',
},
mediaId: {
type: 'number',
__experimentalRole: 'content',
},
mediaUrl: {
type: 'string',
source: 'attribute',
selector: 'figure video,figure img',
attribute: 'src',
__experimentalRole: 'content',
},
href: {
type: 'string',
source: 'attribute',
selector: 'figure a',
attribute: 'href',
__experimentalRole: 'content',
},
mediaType: {
type: 'string',
__experimentalRole: 'content',
},
};

Comment on lines +164 to +197
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the last version of the Media & Text block, we've introduced __experimentalRole properties for several attributes. The new v6Attributes object was created to keep these attributes exactly as they were at the time of the deprecation.

const v4ToV5Supports = {
anchor: true,
align: [ 'wide', 'full' ],
Expand All @@ -143,6 +205,166 @@ const v4ToV5Supports = {
},
};

const v6Supports = {
...v4ToV5Supports,
color: {
gradients: true,
link: true,
__experimentalDefaultControls: {
background: true,
text: true,
},
},
spacing: {
margin: true,
padding: true,
},
typography: {
fontSize: true,
lineHeight: true,
__experimentalFontFamily: true,
__experimentalFontWeight: true,
__experimentalFontStyle: true,
__experimentalTextTransform: true,
__experimentalTextDecoration: true,
__experimentalLetterSpacing: true,
__experimentalDefaultControls: {
fontSize: true,
},
},
};
Comment on lines +208 to +235
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New block supports were added since the last deprecation so those must be included here or we'd lose those block support styles when migrating the block.


// Version with wide as the default alignment.
// See: https://github.com/WordPress/gutenberg/pull/48404
const v6 = {
attributes: v6Attributes,
supports: v6Supports,
save( { attributes } ) {
const {
isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
mediaUrl,
mediaWidth,
mediaId,
verticalAlignment,
imageFill,
focalPoint,
linkClass,
href,
linkTarget,
rel,
} = attributes;
const mediaSizeSlug =
attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
const newRel = isEmpty( rel ) ? undefined : rel;

const imageClasses = classnames( {
[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
} );

let image = (
<img
src={ mediaUrl }
alt={ mediaAlt }
className={ imageClasses || null }
/>
);

if ( href ) {
image = (
<a
className={ linkClass }
href={ href }
target={ linkTarget }
rel={ newRel }
>
{ image }
</a>
);
}

const mediaTypeRenders = {
image: () => image,
video: () => <video controls src={ mediaUrl } />,
};
const className = classnames( {
'has-media-on-the-right': 'right' === mediaPosition,
'is-stacked-on-mobile': isStackedOnMobile,
[ `is-vertically-aligned-${ verticalAlignment }` ]:
verticalAlignment,
'is-image-fill': imageFill,
} );
const backgroundStyles = imageFill
? v6ImageFillStyles( mediaUrl, focalPoint )
: {};

let gridTemplateColumns;
if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
gridTemplateColumns =
'right' === mediaPosition
? `auto ${ mediaWidth }%`
: `${ mediaWidth }% auto`;
}
const style = {
gridTemplateColumns,
};

if ( 'right' === mediaPosition ) {
return (
<div { ...useBlockProps.save( { className, style } ) }>
<div
{ ...useInnerBlocksProps.save( {
className: 'wp-block-media-text__content',
} ) }
/>
<figure
className="wp-block-media-text__media"
style={ backgroundStyles }
>
{ ( mediaTypeRenders[ mediaType ] || noop )() }
</figure>
</div>
);
}
return (
<div { ...useBlockProps.save( { className, style } ) }>
<figure
className="wp-block-media-text__media"
style={ backgroundStyles }
>
{ ( mediaTypeRenders[ mediaType ] || noop )() }
</figure>
<div
{ ...useInnerBlocksProps.save( {
className: 'wp-block-media-text__content',
} ) }
/>
</div>
);
},
migrate: migrateDefaultAlign,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the results of this deprecation match the block's saved content, we need to update the block's align attribute.

isEligible( attributes, innerBlocks, { block } ) {
const { attributes: finalizedAttributes } = block;
// When the align attribute is switched to default to none, valid
// block markup wouldn't contain any alignment CSS class. Unfortunately,
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
// this deprecation's version of the block won't be invalidated due to
// the alignwide class still being in the markup. That is because the
// custom CSS classname support picks it up and adds it to the className
// attribute. At the time of parsing, the className attribute won't
// contain the alignwide class, hence the need to check the finalized
// block attributes.
return (
attributes.align === undefined &&
!! finalizedAttributes.className?.includes( 'alignwide' )
);
},
};

// Version with non-rounded background position attribute for focal point.
// See: https://github.com/WordPress/gutenberg/pull/33915
const v5 = {
attributes: v4ToV5BlockAttributes,
supports: v4ToV5Supports,
Expand Down Expand Up @@ -252,9 +474,11 @@ const v5 = {
</div>
);
},
migrate: migrateDefaultAlign,
};

// Version with CSS grid
// See: https://github.com/WordPress/gutenberg/pull/40806
const v4 = {
attributes: v4ToV5BlockAttributes,
supports: v4ToV5Supports,
Expand Down Expand Up @@ -348,8 +572,11 @@ const v4 = {
</div>
);
},
migrate: migrateDefaultAlign,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As each deprecation needs to bring the block up to the latest version we need to migrate the default alignment here too. The same goes for all the other existing deprecations. If they already migrate attributes, their migration function is composed with migrateDefaultAlign.

};

// Version with ad-hoc color attributes
// See: https://github.com/WordPress/gutenberg/pull/21169
const v3 = {
attributes: {
...baseAttributes,
Expand Down Expand Up @@ -399,7 +626,7 @@ const v3 = {
type: 'object',
},
},
migrate: migrateCustomColors,
migrate: compose( migrateCustomColors, migrateDefaultAlign ),
save( { attributes } ) {
const {
backgroundColor,
Expand Down Expand Up @@ -496,6 +723,8 @@ const v3 = {
},
};

// Version with stack on mobile off by default
// See: https://github.com/WordPress/gutenberg/pull/14364
const v2 = {
attributes: {
...baseAttributes,
Expand All @@ -521,7 +750,7 @@ const v2 = {
type: 'object',
},
},
migrate: migrateCustomColors,
migrate: compose( migrateCustomColors, migrateDefaultAlign ),
save( { attributes } ) {
const {
backgroundColor,
Expand Down Expand Up @@ -596,6 +825,8 @@ const v2 = {
},
};

// Version without the wp-image-#### class on image
// See: https://github.com/WordPress/gutenberg/pull/11922
const v1 = {
attributes: {
...baseAttributes,
Expand All @@ -612,6 +843,7 @@ const v1 = {
attribute: 'src',
},
},
migrate: migrateDefaultAlign,
save( { attributes } ) {
const {
backgroundColor,
Expand Down Expand Up @@ -663,4 +895,4 @@ const v1 = {
},
};

export default [ v5, v4, v3, v2, v1 ];
export default [ v6, v5, v4, v3, v2, v1 ];
Loading