Skip to content

Commit

Permalink
Media & Text: Switch default alignment to none (#48404)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw authored Mar 16, 2023
1 parent cc11957 commit ced5222
Show file tree
Hide file tree
Showing 26 changed files with 336 additions and 31 deletions.
4 changes: 2 additions & 2 deletions packages/block-library/src/cover/test/__snapshots__/transforms.native.js.snap
View file
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
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
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
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%`,
}
: {};
};

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',
};
};

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',
},
};

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,
},
},
};

// 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,
isEligible( attributes, innerBlocks, { block } ) {
const { attributes: finalizedAttributes } = block;
// When the align attribute defaults to none, valid block markup should
// not contain any alignment CSS class. Unfortunately, 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,
};

// 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

1 comment on commit ced5222

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in ced5222.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4434042545
📝 Reported issues:

Please sign in to comment.