diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js index 655dae9e71e45..475eb5c3f55a4 100644 --- a/packages/block-library/src/cover/deprecated.js +++ b/packages/block-library/src/cover/deprecated.js @@ -57,6 +57,109 @@ const blockAttributes = { }; const deprecated = [ + { + attributes: { + ...blockAttributes, + title: { + type: 'string', + source: 'html', + selector: 'p', + }, + contentAlign: { + type: 'string', + default: 'center', + }, + minHeight: { + type: 'number', + }, + gradient: { + type: 'string', + }, + customGradient: { + type: 'string', + }, + }, + save( { attributes } ) { + const { + backgroundType, + gradient, + customGradient, + customOverlayColor, + dimRatio, + focalPoint, + hasParallax, + overlayColor, + url, + minHeight, + } = attributes; + const overlayColorClass = getColorClassName( + 'background-color', + overlayColor + ); + const gradientClass = __experimentalGetGradientClass( gradient ); + + const style = + backgroundType === IMAGE_BACKGROUND_TYPE + ? backgroundImageStyles( url ) + : {}; + if ( ! overlayColorClass ) { + style.backgroundColor = customOverlayColor; + } + if ( focalPoint && ! hasParallax ) { + style.backgroundPosition = `${ Math.round( + focalPoint.x * 100 + ) }% ${ Math.round( focalPoint.y * 100 ) }%`; + } + if ( customGradient && ! url ) { + style.background = customGradient; + } + style.minHeight = minHeight || undefined; + + const classes = classnames( + dimRatioToClass( dimRatio ), + overlayColorClass, + { + 'has-background-dim': dimRatio !== 0, + 'has-parallax': hasParallax, + 'has-background-gradient': customGradient, + [ gradientClass ]: ! url && gradientClass, + } + ); + + return ( +
+ { url && + ( gradient || customGradient ) && + dimRatio !== 0 && ( +
+ ); + }, + }, { attributes: { ...blockAttributes, diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js index 4f5d997176b7b..8cb56dbe4752d 100644 --- a/packages/block-library/src/cover/save.js +++ b/packages/block-library/src/cover/save.js @@ -64,7 +64,7 @@ export default function save( { attributes } ) { { 'has-background-dim': dimRatio !== 0, 'has-parallax': hasParallax, - 'has-background-gradient': customGradient, + 'has-background-gradient': gradient || customGradient, [ gradientClass ]: ! url && gradientClass, } ); diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.html b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.html new file mode 100644 index 0000000000000..5d0cea3342537 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.html @@ -0,0 +1,11 @@ + +
+ +
+ +

Cover

+ +
+
+ diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.json b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.json new file mode 100644 index 0000000000000..d333818e8c052 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.json @@ -0,0 +1,33 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/cover", + "isValid": true, + "attributes": { + "url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", + "hasParallax": false, + "dimRatio": 50, + "backgroundType": "image", + "title": "", + "contentAlign": "center", + "gradient": "midnight" + }, + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "align": "center", + "content": "Cover", + "dropCap": false, + "placeholder": "Write title…", + "fontSize": "large" + }, + "innerBlocks": [], + "originalContent": "

Cover

" + } + ], + "originalContent": "
\n\t\n\t
\n\t\t\n\t
\n
" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.parsed.json b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.parsed.json new file mode 100644 index 0000000000000..8603ab1cb601a --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.parsed.json @@ -0,0 +1,39 @@ +[ + { + "blockName": "core/cover", + "attrs": { + "url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=", + "gradient": "midnight" + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": { + "align": "center", + "placeholder": "Write title…", + "fontSize": "large" + }, + "innerBlocks": [], + "innerHTML": "\n\t\t

Cover

\n\t\t", + "innerContent": [ + "\n\t\t

Cover

\n\t\t" + ] + } + ], + "innerHTML": "\n
\n\t\n\t
\n\t\t\n\t
\n
\n", + "innerContent": [ + "\n
\n\t\n\t
\n\t\t", + null, + "\n\t
\n
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.serialized.html b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.serialized.html new file mode 100644 index 0000000000000..7f9380bbf08ec --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.serialized.html @@ -0,0 +1,5 @@ + +
+

Cover

+
+