Refactor cover image to use nesting.

WordPress · Sep 26, 2018 · 0369961 · 0369961
1 parent 3c32749
commit 0369961
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 63 deletions.
diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
@@ -27,6 +27,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,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
+import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -14,31 +14,28 @@ import { createBlock } from '@wordpress/blocks';
 import {
 	BlockControls,
 	InspectorControls,
+	InnerBlocks,
 	BlockAlignmentToolbar,
 	MediaPlaceholder,
 	MediaUpload,
-	AlignmentToolbar,
 	RichText,
 } from '@wordpress/editor';
 
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import './style.scss';
+
 const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
 
 const blockAttributes = {
-	title: {
-		type: 'array',
-		source: 'children',
-		selector: 'p',
-	},
 	url: {
 		type: 'string',
 	},
 	align: {
 		type: 'string',
 	},
-	contentAlign: {
-		type: 'string',
-		default: 'center',
-	},
 	id: {
 		type: 'number',
 	},
@@ -54,6 +51,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' ];
 export const settings = {
 	title: __( 'Cover Image' ),
 
@@ -117,8 +122,8 @@ export const settings = {
 		}
 	},
 
-	edit: withNotices( ( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI } ) => {
-		const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
+	edit: withNotices( ( { attributes, setAttributes, className, noticeOperations, noticeUI } ) => {
+		const { align, url, id, hasParallax, dimRatio } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSelectImage = ( media ) => {
 			if ( ! media || ! media.url ) {
@@ -133,7 +138,6 @@ export const settings = {
 		const style = backgroundImageStyles( url );
 		const classes = classnames(
 			className,
-			contentAlign !== 'center' && `has-${ contentAlign }-content`,
 			dimRatioToClass( dimRatio ),
 			{
 				'has-background-dim': dimRatio !== 0,
@@ -148,12 +152,6 @@ export const settings = {
 						value={ align }
 						onChange={ updateAlignment }
 					/>
-					<AlignmentToolbar
-						value={ contentAlign }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { contentAlign: nextAlign } );
-						} }
-					/>
 					<Toolbar>
 						<MediaUpload
 							onSelect={ onSelectImage }
@@ -193,16 +191,8 @@ export const settings = {
 		);
 
 		if ( ! url ) {
-			const hasTitle = ! isEmpty( title );
-			const icon = hasTitle ? undefined : 'format-image';
-			const label = hasTitle ? (
-				<RichText
-					tagName="h2"
-					value={ title }
-					onChange={ ( value ) => setAttributes( { title: value } ) }
-					inlineToolbar
-				/>
-			) : __( 'Cover Image' );
+			const icon = 'format-image';
+			const label = __( 'Cover Image' );
 
 			return (
 				<Fragment>
@@ -232,45 +222,88 @@ 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={ ( value ) => setAttributes( { title: value } ) }
-							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 } = attributes;
+		const { url, hasParallax, dimRatio, align } = 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 }>
-				{ ! 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>
 		);
 	},
 
 	deprecated: [ {
+		attributes: {
+			...blockAttributes,
+			title: {
+				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: {

diff --git a/packages/block-library/src/cover-image/style.scss b/packages/block-library/src/cover-image/style.scss
@@ -1,11 +1,20 @@
+.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-size: cover;
 	background-position: center center;
 	min-height: 430px;
 	width: 100%;
 	margin: 0 0 1.5em 0;
-	display: flex;
+
 	justify-content: center;
 	align-items: center;
 
@@ -80,4 +89,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.json b/test/integration/full-content/fixtures/core__cover-image.json
@@ -4,15 +4,29 @@
         "name": "core/cover-image",
         "isValid": true,
         "attributes": {
-            "title": [
-                "Guten Berg!"
-            ],
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
-            "contentAlign": "center",
+            "id": 8398,
             "hasParallax": false,
             "dimRatio": 40
         },
-        "innerBlocks": [],
-        "originalContent": "<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>"
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "content": [
+                        "Paragraph 1"
+                    ],
+                    "align": "center",
+                    "dropCap": false,
+                    "placeholder": "Write title…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "originalContent": "<p style=\"text-align:center\" class=\"has-large-font-size\">Paragraph 1</p>"
+            }
+        ],
+        "originalContent": "<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>"
     }
 ]
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"
     },
     {
         "attrs": {},

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