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 block: Try to fix JavaScript warning #54965

Closed
wants to merge 2 commits into from
Closed

Media & text block: Try to fix JavaScript warning #54965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b641bf4
Add a default value to the ImageFill block attribute
carolinan Oct 2, 2023
0a57ff0
Try to add a deprecation and update fixtures
carolinan Oct 3, 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
3 changes: 2 additions & 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 @@ -85,7 +85,8 @@
"type": "string"
},
"imageFill": {
"type": "boolean"
"type": "boolean",
"default": false
},
"focalPoint": {
"type": "object"
Expand Down
142 changes: 139 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 @@ -30,7 +30,7 @@ const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
: {};
};

const v6ImageFillStyles = ( url, focalPoint ) => {
const v6tov7ImageFillStyles = ( url, focalPoint ) => {
return url
? {
backgroundImage: `url(${ url })`,
Expand Down Expand Up @@ -198,6 +198,14 @@ const v6Attributes = {
},
};

//v7 adds allowedBlocks.
const v7Attributes = {
...v6Attributes,
allowedBlocks: {
type: 'array',
},
};

const v4ToV5Supports = {
anchor: true,
align: [ 'wide', 'full' ],
Expand Down Expand Up @@ -237,6 +245,134 @@ const v6Supports = {
},
};

//v7 adds color: heading: true.
const v7Supports = {
...v6Supports,
color: {
gradients: true,
heading: true,
link: true,
__experimentalDefaultControls: {
background: true,
text: true,
},
},
};

// Version where the imageFill default value is undefined.
// See: https://github.com/WordPress/gutenberg/pull/54965
const v7 = {
attributes: v7Attributes,
supports: v7Supports,
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 = ! 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
? v6tov7ImageFillStyles( 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,
};

// Version with wide as the default alignment.
// See: https://github.com/WordPress/gutenberg/pull/48404
const v6 = {
Expand Down Expand Up @@ -301,7 +437,7 @@ const v6 = {
'is-image-fill': imageFill,
} );
const backgroundStyles = imageFill
? v6ImageFillStyles( mediaUrl, focalPoint )
? v6tov7ImageFillStyles( mediaUrl, focalPoint )
: {};

let gridTemplateColumns;
Expand Down Expand Up @@ -902,4 +1038,4 @@ const v1 = {
},
};

export default [ v6, v5, v4, v3, v2, v1 ];
export default [ v7, v6, v5, v4, v3, v2, v1 ];
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__media-text.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
"mediaType": "image",
"mediaWidth": 50,
"isStackedOnMobile": true
"isStackedOnMobile": true,
"imageFill": false
},
"innerBlocks": [
{
Expand Down
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__media-text__image-alt-no-align.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
"mediaType": "image",
"mediaWidth": 50,
"isStackedOnMobile": true
"isStackedOnMobile": true,
"imageFill": false
},
"innerBlocks": [
{
Expand Down
Loading