Refactor cover image to use nesting.

WordPress · Oct 12, 2018 · 3afd134 · 3afd134
1 parent 8d80814
commit 3afd134
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 63 deletions.
diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
@@ -29,6 +29,7 @@ $z-layers: (
 	".edit-post-header": 30,
 	".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
 	".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
+	".wp-block-cover-image__inner-container": 0, // InnerBlocks area inside cover image block
 
 	// Side UI active buttons
 	".editor-block-mover__control": 1,

diff --git a/packages/block-library/src/cover-image/editor.scss b/packages/block-library/src/cover-image/editor.scss
@@ -19,11 +19,28 @@
 		color: inherit;
 	}
 
+	&.has-right-content .editor-rich-text__inline-toolbar,
 	&.has-left-content .editor-rich-text__inline-toolbar {
-		justify-content: flex-start;
+		display: inline-block;
 	}
 
-	&.has-right-content .editor-rich-text__inline-toolbar {
-		justify-content: flex-end;
+	.editor-block-list__layout {
+		width: 100%;
 	}
+
+	.editor-block-list__block {
+		color: $light-gray-100;
+	}
+}
+
+// wp-block-cover-image class is used just to increase selector specificity
+.wp-block-cover-image .wp-block-cover-image__inner-container {
+	// avoid text align inherit from cover image align.
+	text-align: left;
 }
+
+.wp-block-cover-image__inner-container > .editor-inner-blocks > .editor-block-list__layout {
+	margin-left: 0;
+	margin-right: 0;
+}
+
diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover-image/index.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -14,10 +15,10 @@ import { compose } from '@wordpress/compose';
 import {
 	BlockControls,
 	InspectorControls,
+	InnerBlocks,
 	BlockAlignmentToolbar,
 	MediaPlaceholder,
 	MediaUpload,
-	AlignmentToolbar,
 	PanelColorSettings,
 	RichText,
 	withColors,
@@ -62,6 +63,14 @@ const blockAttributes = {
 
 export const name = 'core/cover-image';
 
+const INNER_BLOCKS_TEMPLATE = [
+	[ 'core/paragraph', {
+		align: 'center',
+		fontSize: 'large',
+		placeholder: __( 'Write title…' ),
+	} ],
+];
+const INNER_BLOCKS_ALLOWED_BLOCKS = [ 'core/button', 'core/heading', 'core/paragraph' ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 export const settings = {
@@ -77,13 +86,6 @@ export const settings = {
 
 	transforms: {
 		from: [
-			{
-				type: 'block',
-				blocks: [ 'core/heading' ],
-				transform: ( { content } ) => (
-					createBlock( 'core/cover-image', { title: content } )
-				),
-			},
 			{
 				type: 'block',
 				blocks: [ 'core/image' ],
@@ -98,13 +100,6 @@ export const settings = {
 			},
 		],
 		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/heading' ],
-				transform: ( { title } ) => (
-					createBlock( 'core/heading', { content: title } )
-				),
-			},
 			{
 				type: 'block',
 				blocks: [ 'core/image' ],
@@ -131,8 +126,8 @@ export const settings = {
 		withColors( { overlayColor: 'background-color' } ),
 		withNotices,
 	] )(
-		( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI, overlayColor, setOverlayColor } ) => {
-			const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
+		( { attributes, setAttributes, className, noticeOperations, noticeUI, overlayColor, setOverlayColor } ) => {
+			const { url, align, id, hasParallax, dimRatio } = attributes;
 			const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 			const onSelectImage = ( media ) => {
 				if ( ! media || ! media.url ) {
@@ -143,7 +138,6 @@ export const settings = {
 			};
 			const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
 			const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
-			const setTitle = ( newTitle ) => setAttributes( { title: newTitle } );
 
 			const style = {
 				...backgroundImageStyles( url ),
@@ -152,7 +146,6 @@ export const settings = {
 
 			const classes = classnames(
 				className,
-				contentAlign !== 'center' && `has-${ contentAlign }-content`,
 				dimRatioToClass( dimRatio ),
 				{
 					'has-background-dim': dimRatio !== 0,
@@ -167,12 +160,7 @@ export const settings = {
 							value={ align }
 							onChange={ updateAlignment }
 						/>
-						<AlignmentToolbar
-							value={ contentAlign }
-							onChange={ ( nextAlign ) => {
-								setAttributes( { contentAlign: nextAlign } );
-							} }
-						/>
+
 						<Toolbar>
 							<MediaUpload
 								onSelect={ onSelectImage }
@@ -222,16 +210,8 @@ export const settings = {
 			);
 
 			if ( ! url ) {
-				const hasTitle = ! RichText.isEmpty( title );
-				const icon = hasTitle ? undefined : 'format-image';
-				const label = hasTitle ? (
-					<RichText
-						tagName="h2"
-						value={ title }
-						onChange={ setTitle }
-						inlineToolbar
-					/>
-				) : __( 'Cover Image' );
+				const icon = 'format-image';
+				const label = ( 'Cover Image' );
 
 				return (
 					<Fragment>
@@ -261,24 +241,20 @@ export const settings = {
 						style={ style }
 						className={ classes }
 					>
-						{ ( ! RichText.isEmpty( title ) || isSelected ) && (
-							<RichText
-								tagName="p"
-								className="wp-block-cover-image-text"
-								placeholder={ __( 'Write title…' ) }
-								value={ title }
-								onChange={ setTitle }
-								inlineToolbar
+						<div className="wp-block-cover-image__inner-container">
+							<InnerBlocks
+								template={ INNER_BLOCKS_TEMPLATE }
+								allowedBlocks={ INNER_BLOCKS_ALLOWED_BLOCKS }
 							/>
-						) }
+						</div>
 					</div>
 				</Fragment>
 			);
 		}
 	),
 
 	save( { attributes, className } ) {
-		const { url, title, hasParallax, dimRatio, align, contentAlign, overlayColor, customOverlayColor } = attributes;
+		const { url, hasParallax, dimRatio, align, overlayColor, customOverlayColor } = attributes;
 		const overlayColorClass = getColorClassName( 'background-color', overlayColor );
 		const style = backgroundImageStyles( url );
 		if ( ! overlayColorClass ) {
@@ -292,16 +268,15 @@ export const settings = {
 			{
 				'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 className="wp-block-cover-image__inner-container">
+					<InnerBlocks.Content />
+				</div>
 			</div>
 		);
 	},
@@ -310,7 +285,56 @@ export const settings = {
 		attributes: {
 			...blockAttributes,
 			title: {
-				source: 'html',
+				type: 'array',
+				source: 'children',
+				selector: 'p',
+			},
+			contentAlign: {
+				type: 'string',
+				default: 'center',
+			},
+		},
+
+		save( { attributes, className } ) {
+			const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
+			const style = backgroundImageStyles( url );
+			const classes = classnames(
+				className,
+				dimRatioToClass( dimRatio ),
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+					[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
+				},
+				align ? `align${ align }` : null,
+			);
+
+			return (
+				<div className={ classes } style={ style }>
+					{ title && title.length > 0 && (
+						<RichText.Content tagName="p" className="wp-block-cover-image-text" value={ title } />
+					) }
+				</div>
+			);
+		},
+
+		migrate( attributes ) {
+			return [
+				omit( attributes, [ 'title', 'contentAlign' ] ),
+				[ createBlock( 'core/paragraph', {
+					content: attributes.title,
+					align: attributes.contentAlign,
+					fontSize: 'large',
+					placeholder: __( 'Write title…' ),
+				} ) ],
+			];
+		},
+	}, {
+		attributes: {
+			...blockAttributes,
+			title: {
+				type: 'array',
+				source: 'children',
 				selector: 'h2',
 			},
 		},

diff --git a/packages/block-library/src/cover-image/style.scss b/packages/block-library/src/cover-image/style.scss
@@ -1,3 +1,12 @@
+.wp-block-cover-image,
+.wp-block-cover-image.alignleft,
+.wp-block-cover-image.aligncenter,
+.wp-block-cover-image.alignright,
+.wp-block-cover-image.alignwide,
+.wp-block-cover-image.alignfull {
+	display: flex;
+}
+
 .wp-block-cover-image {
 	position: relative;
 	background-color: $black;
@@ -6,7 +15,7 @@
 	min-height: 430px;
 	width: 100%;
 	margin: 0 0 1.5em 0;
-	display: flex;
+
 	justify-content: center;
 	align-items: center;
 
@@ -82,4 +91,21 @@
 		max-width: $content-width / 2;
 		width: 100%;
 	}
+
+	.wp-block-cover-image__inner-container {
+		width: calc(100% - 70px);
+		z-index: z-index(".wp-block-cover-image__inner-container");
+		color: $light-gray-100;
+	}
+
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	.wp-block-subhead {
+		color: inherit;
+	}
 }
diff --git a/post-content.php b/post-content.php
@@ -1,5 +1,11 @@
 <!-- wp:cover-image {"url":"https://cldup.com/Fz-ASbo2s3.jpg","align":"wide"} -->
-<div class="wp-block-cover-image has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)"><p class="wp-block-cover-image-text"><?php _e( 'Of Mountains &amp; Printing Presses', 'gutenberg' ); ?></p></div>
+<div class="wp-block-cover-image has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)">
+   <div class="wp-block-cover-image__inner-container">
+      <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+      <p style="text-align:center" class="has-large-font-size">Of Mountains &amp; Printing Presses</p>
+      <!-- /wp:paragraph -->
+   </div>
+</div>
 <!-- /wp:cover-image -->
 
 <!-- wp:paragraph -->

diff --git a/test/integration/full-content/fixtures/core__cover-image.html b/test/integration/full-content/fixtures/core__cover-image.html
@@ -1,5 +1,9 @@
-<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<div class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
-    <p class="wp-block-cover-image-text">Guten Berg!</p>
+<!-- wp:cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","id":8398,"dimRatio": 40} -->
+<div class="wp-block-cover-image has-background-dim has-background-dim-40" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
+    <div class="wp-block-cover-image__inner-container">
+		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+		<p style="text-align:center" class="has-large-font-size">Paragraph 1</p>
+		<!-- /wp:paragraph -->
+    </div>
 </div>
-<!-- /wp:core/cover-image -->
+<!-- /wp:cover-image -->
diff --git a/test/integration/full-content/fixtures/core__cover-image.parsed.json b/test/integration/full-content/fixtures/core__cover-image.parsed.json
@@ -3,10 +3,22 @@
         "blockName": "core/cover-image",
         "attrs": {
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
+            "id": 8398,
             "dimRatio": 40
         },
-        "innerBlocks": [],
-        "innerHTML": "\n<div class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n    <p class=\"wp-block-cover-image-text\">Guten Berg!</p>\n</div>\n"
+        "innerBlocks": [
+            {
+                "blockName": "core/paragraph",
+                "attrs": {
+                    "align": "center",
+                    "placeholder": "Write title…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "innerHTML": "\n\t\t<p style=\"text-align:center\" class=\"has-large-font-size\">Paragraph 1</p>\n\t\t"
+            }
+        ],
+        "innerHTML": "\n<div class=\"wp-block-cover-image has-background-dim has-background-dim-40\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n    <div class=\"wp-block-cover-image__inner-container\">\n\t\t\n    </div>\n</div>\n"
     },
     {
         "blockName": null,

diff --git a/test/integration/full-content/fixtures/core__cover-image.serialized.html b/test/integration/full-content/fixtures/core__cover-image.serialized.html
@@ -1,3 +1,5 @@
-<!-- wp:cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<div class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)"><p class="wp-block-cover-image-text">Guten Berg!</p></div>
+<!-- wp:cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","id":8398,"dimRatio":40} -->
+<div class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)"><div class="wp-block-cover-image__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p style="text-align:center" class="has-large-font-size">Paragraph 1</p>
+<!-- /wp:paragraph --></div></div>
 <!-- /wp:cover-image -->