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