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 && (
+
+ ) }
+ { VIDEO_BACKGROUND_TYPE === backgroundType && url && (
+
+ ) }
+
+
+
+
+ );
+ },
+ },
{
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 @@
+
+
+
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": ""
+ }
+]
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\tCover
\n\t\t",
+ "innerContent": [
+ "\n\t\tCover
\n\t\t"
+ ]
+ }
+ ],
+ "innerHTML": "\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 @@
+
+
+