Rename cover image into cover block.

packages/block-library/src/cover-image/editor.scss → packages/block-library/src/cover/editor.scss

@@ -1,4 +1,5 @@
-.wp-block-cover-image {
+.wp-block-cover-image,
+.wp-block-cover {
 	.editor-rich-text__tinymce[data-is-empty="true"]::before {
 		position: inherit;
 	}

packages/block-library/src/cover-image/index.js → packages/block-library/src/cover/index.js

@@ -60,12 +60,12 @@ const blockAttributes = {
 	},
 };
 
-export const name = 'core/cover-image';
+export const name = 'core/cover';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 export const settings = {
-	title: __( 'Cover Image' ),
+	title: __( 'Cover' ),
 
 	description: __( 'Add a full-width image, and layer text over it — great for headers.' ),
 
@@ -81,14 +81,14 @@ export const settings = {
 				type: 'block',
 				blocks: [ 'core/heading' ],
 				transform: ( { content } ) => (
-					createBlock( 'core/cover-image', { title: content } )
+					createBlock( 'core/cover', { title: content } )
 				),
 			},
 			{
 				type: 'block',
 				blocks: [ 'core/image' ],
 				transform: ( { caption, url, align, id } ) => (
-					createBlock( 'core/cover-image', {
+					createBlock( 'core/cover', {
 						title: caption,
 						url,
 						align,
@@ -183,7 +183,7 @@ export const settings = {
 										render={ ( { open } ) => (
 											<IconButton
 												className="components-toolbar__control"
-												label={ __( 'Edit image' ) }
+												label={ __( 'Edit media' ) }
 												icon="edit"
 												onClick={ open }
 											/>
@@ -195,7 +195,7 @@ export const settings = {
 					</BlockControls>
 					{ !! url && (
 						<InspectorControls>
-							<PanelBody title={ __( 'Cover Image Settings' ) }>
+							<PanelBody title={ __( 'Cover Settings' ) }>
 								<ToggleControl
 									label={ __( 'Fixed Background' ) }
 									checked={ hasParallax }
@@ -235,7 +235,7 @@ export const settings = {
 						onChange={ setTitle }
 						inlineToolbar
 					/>
-				) : __( 'Cover Image' );
+				) : __( 'Cover' );
 
 				return (
 					<Fragment>
@@ -245,7 +245,7 @@ export const settings = {
 							className={ className }
 							labels={ {
 								title: label,
-								name: __( 'an image' ),
+								name: __( 'an image or a video' ),
 							} }
 							onSelect={ onSelectImage }
 							accept="image/*"
@@ -268,7 +268,7 @@ export const settings = {
 						{ ( ! RichText.isEmpty( title ) || isSelected ) && (
 							<RichText
 								tagName="p"
-								className="wp-block-cover-image-text"
+								className="wp-block-cover-text"
 								placeholder={ __( 'Write title…' ) }
 								value={ title }
 								onChange={ setTitle }
@@ -304,13 +304,50 @@ export const settings = {
 		return (
 			<div className={ classes } style={ style }>
 				{ ! RichText.isEmpty( title ) && (
-					<RichText.Content tagName="p" className="wp-block-cover-image-text" value={ title } />
+					<RichText.Content tagName="p" className="wp-block-cover-text" value={ title } />
 				) }
 			</div>
 		);
 	},
 
 	deprecated: [ {
+		attributes: {
+			...blockAttributes,
+		},
+
+		supports: {
+			className: false,
+		},
+
+		save( { attributes } ) {
+			const { url, title, hasParallax, dimRatio, align, contentAlign, overlayColor, customOverlayColor } = attributes;
+			const overlayColorClass = getColorClassName( 'background-color', overlayColor );
+			const style = backgroundImageStyles( url );
+			if ( ! overlayColorClass ) {
+				style.backgroundColor = customOverlayColor;
+			}
+
+			const classes = classnames(
+				'wp-block-cover-image',
+				dimRatioToClass( dimRatio ),
+				overlayColorClass,
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+					[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
+				},
+				align ? `align${ align }` : null,
+			);
+
+			return (
+				<div className={ classes } style={ style }>
+					{ ! RichText.isEmpty( title ) && (
+						<RichText.Content tagName="p" className="wp-block-cover-image-text" value={ title } />
+					) }
+				</div>
+			);
+		},
+	}, {
 		attributes: {
 			...blockAttributes,
 			title: {

packages/block-library/src/cover-image/style.scss → packages/block-library/src/cover/style.scss

@@ -1,4 +1,5 @@
-.wp-block-cover-image {
+.wp-block-cover-image,
+.wp-block-cover {
 	position: relative;
 	background-color: $black;
 	background-size: cover;
@@ -14,7 +15,8 @@
 		justify-content: flex-start;
 
 		h2,
-		.wp-block-cover-image-text {
+		.wp-block-cover-image-text,
+		.wp-block-cover-text {
 			margin-left: 0;
 			text-align: left;
 		}
@@ -24,14 +26,16 @@
 		justify-content: flex-end;
 
 		h2,
-		.wp-block-cover-image-text {
+		.wp-block-cover-image-text,
+		.wp-block-cover-text {
 			margin-right: 0;
 			text-align: right;
 		}
 	}
 
 	h2,
-	.wp-block-cover-image-text {
+	.wp-block-cover-image-text,
+	.wp-block-cover-text {
 		color: $white;
 		font-size: 2em;
 		line-height: 1.25;

packages/block-library/src/editor.scss

@@ -4,7 +4,7 @@
 @import "./categories/editor.scss";
 @import "./code/editor.scss";
 @import "./columns/editor.scss";
-@import "./cover-image/editor.scss";
+@import "./cover/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
 @import "./classic/editor.scss";

packages/block-library/src/index.js

@@ -24,7 +24,7 @@ import * as categories from './categories';
 import * as code from './code';
 import * as columns from './columns';
 import * as column from './columns/column';
-import * as coverImage from './cover-image';
+import * as cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
 import * as html from './html';
@@ -69,7 +69,7 @@ export const registerCoreBlocks = () => {
 		code,
 		columns,
 		column,
-		coverImage,
+		cover,
 		embed,
 		...embed.common,
 		...embed.others,

packages/block-library/src/style.scss

@@ -4,7 +4,7 @@
 @import "./button/style.scss";
 @import "./categories/style.scss";
 @import "./columns/style.scss";
-@import "./cover-image/style.scss";
+@import "./cover/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";
 @import "./gallery/style.scss";

packages/blocks/src/api/parser.js

@@ -416,6 +416,11 @@ export function createBlockWithFallback( blockNode ) {
 	// freeform content fallback.
 	let name = originalName || freeformContentFallbackBlock;
 
+	// Convert 'core/cover-image' block in existing content to 'core/cover'.
+	if ( 'core/cover-image' === name ) {
+		name = 'core/cover';
+	}
+
 	// Convert 'core/text' blocks in existing content to 'core/paragraph'.
 	if ( 'core/text' === name || 'core/cover-text' === name ) {
 		name = 'core/paragraph';