Add nested blocks inside cover block

WordPress · Mar 7, 2019 · cba6385 · cba6385
1 parent e14c421
commit cba6385
Show file tree

Hide file tree

Showing 17 changed files with 331 additions and 99 deletions.
diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
@@ -28,6 +28,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__inner-container": 1, // InnerBlocks area inside cover image block
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
 

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -9,12 +9,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 class is used just to increase selector specificity
+	.wp-block-cover__inner-container {
+		// avoid text align inherit from cover image align.
+		text-align: left;
+	}
+
+	.wp-block-cover__inner-container > .editor-inner-blocks > .editor-block-list__layout {
+		margin-left: 0;
+		margin-right: 0;
 	}
 
 	&.components-placeholder {

diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -18,9 +19,9 @@ import {
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import {
-	AlignmentToolbar,
 	BlockControls,
 	BlockIcon,
+	InnerBlocks,
 	InspectorControls,
 	MediaPlaceholder,
 	MediaUpload,
@@ -39,18 +40,9 @@ import { __ } from '@wordpress/i18n';
 import icon from './icon';
 
 const blockAttributes = {
-	title: {
-		type: 'string',
-		source: 'html',
-		selector: 'p',
-	},
 	url: {
 		type: 'string',
 	},
-	contentAlign: {
-		type: 'string',
-		default: 'center',
-	},
 	id: {
 		type: 'number',
 	},
@@ -82,6 +74,14 @@ export const name = 'core/cover';
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 const IMAGE_BACKGROUND_TYPE = 'image';
 const VIDEO_BACKGROUND_TYPE = 'video';
+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' ),
@@ -100,13 +100,6 @@ export const settings = {
 
 	transforms: {
 		from: [
-			{
-				type: 'block',
-				blocks: [ 'core/heading' ],
-				transform: ( { content } ) => (
-					createBlock( 'core/cover', { title: content } )
-				),
-			},
 			{
 				type: 'block',
 				blocks: [ 'core/image' ],
@@ -134,13 +127,6 @@ export const settings = {
 			},
 		],
 		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/heading' ],
-				transform: ( { title } ) => (
-					createBlock( 'core/heading', { content: title } )
-				),
-			},
 			{
 				type: 'block',
 				blocks: [ 'core/image' ],
@@ -178,15 +164,13 @@ export const settings = {
 		withColors( { overlayColor: 'background-color' } ),
 		withNotices,
 	] )(
-		( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI, overlayColor, setOverlayColor } ) => {
+		( { attributes, setAttributes, className, noticeOperations, noticeUI, overlayColor, setOverlayColor } ) => {
 			const {
 				backgroundType,
-				contentAlign,
 				dimRatio,
 				focalPoint,
 				hasParallax,
 				id,
-				title,
 				url,
 			} = attributes;
 			const onSelectMedia = ( media ) => {
@@ -222,7 +206,6 @@ export const settings = {
 			};
 			const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
 			const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
-			const setTitle = ( newTitle ) => setAttributes( { title: newTitle } );
 
 			const style = {
 				...(
@@ -242,12 +225,6 @@ export const settings = {
 					<BlockControls>
 						{ !! url && (
 							<Fragment>
-								<AlignmentToolbar
-									value={ contentAlign }
-									onChange={ ( nextAlign ) => {
-										setAttributes( { contentAlign: nextAlign } );
-									} }
-								/>
 								<MediaUploadCheck>
 									<Toolbar>
 										<MediaUpload
@@ -311,16 +288,8 @@ export const settings = {
 			);
 
 			if ( ! url ) {
-				const hasTitle = ! RichText.isEmpty( title );
-				const placeholderIcon = hasTitle ? undefined : <BlockIcon icon={ icon } />;
-				const label = hasTitle ? (
-					<RichText
-						tagName="h2"
-						value={ title }
-						onChange={ setTitle }
-						inlineToolbar
-					/>
-				) : __( 'Cover' );
+				const placeholderIcon = <BlockIcon icon={ icon } />;
+				const label = __( 'Cover' );
 
 				return (
 					<Fragment>
@@ -344,7 +313,6 @@ export const settings = {
 
 			const classes = classnames(
 				className,
-				contentAlign !== 'center' && `has-${ contentAlign }-content`,
 				dimRatioToClass( dimRatio ),
 				{
 					'has-background-dim': dimRatio !== 0,
@@ -369,16 +337,12 @@ export const settings = {
 								src={ url }
 							/>
 						) }
-						{ ( ! RichText.isEmpty( title ) || isSelected ) && (
-							<RichText
-								tagName="p"
-								className="wp-block-cover-text"
-								placeholder={ __( 'Write title…' ) }
-								value={ title }
-								onChange={ setTitle }
-								inlineToolbar
+						<div className="wp-block-cover__inner-container">
+							<InnerBlocks
+								template={ INNER_BLOCKS_TEMPLATE }
+								allowedBlocks={ INNER_BLOCKS_ALLOWED_BLOCKS }
 							/>
-						) }
+						</div>
 					</div>
 				</Fragment>
 			);
@@ -388,13 +352,11 @@ export const settings = {
 	save( { attributes } ) {
 		const {
 			backgroundType,
-			contentAlign,
 			customOverlayColor,
 			dimRatio,
 			focalPoint,
 			hasParallax,
 			overlayColor,
-			title,
 			url,
 		} = attributes;
 		const overlayColorClass = getColorClassName( 'background-color', overlayColor );
@@ -414,7 +376,6 @@ export const settings = {
 			{
 				'has-background-dim': dimRatio !== 0,
 				'has-parallax': hasParallax,
-				[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
 			},
 		);
 
@@ -427,16 +388,108 @@ export const settings = {
 					loop
 					src={ url }
 				/> ) }
-				{ ! RichText.isEmpty( title ) && (
-					<RichText.Content tagName="p" className="wp-block-cover-text" value={ title } />
-				) }
+				<div className="wp-block-cover__inner-container">
+					<InnerBlocks.Content />
+				</div>
 			</div>
 		);
 	},
 
 	deprecated: [ {
 		attributes: {
 			...blockAttributes,
+			title: {
+				type: 'string',
+				source: 'html',
+				selector: 'p',
+			},
+			contentAlign: {
+				type: 'string',
+				default: 'center',
+			},
+		},
+
+		supports: {
+			align: true,
+		},
+
+		save( { attributes } ) {
+			const {
+				backgroundType,
+				contentAlign,
+				customOverlayColor,
+				dimRatio,
+				focalPoint,
+				hasParallax,
+				overlayColor,
+				title,
+				url,
+			} = attributes;
+			const overlayColorClass = getColorClassName( 'background-color', overlayColor );
+			const style = backgroundType === IMAGE_BACKGROUND_TYPE ?
+				backgroundImageStyles( url ) :
+				{};
+			if ( ! overlayColorClass ) {
+				style.backgroundColor = customOverlayColor;
+			}
+			if ( focalPoint && ! hasParallax ) {
+				style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;
+			}
+
+			const classes = classnames(
+				dimRatioToClass( dimRatio ),
+				overlayColorClass,
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+					[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
+				},
+			);
+
+			return (
+				<div className={ classes } style={ style }>
+					{ VIDEO_BACKGROUND_TYPE === backgroundType && url && ( <video
+						className="wp-block-cover__video-background"
+						autoPlay
+						muted
+						loop
+						src={ url }
+					/> ) }
+					{ ! RichText.isEmpty( title ) && (
+						<RichText.Content tagName="p" className="wp-block-cover-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: 'string',
+				source: 'html',
+				selector: 'p',
+			},
+			contentAlign: {
+				type: 'string',
+				default: 'center',
+			},
 			align: {
 				type: 'string',
 			},
@@ -485,6 +538,10 @@ export const settings = {
 				source: 'html',
 				selector: 'h2',
 			},
+			contentAlign: {
+				type: 'string',
+				default: 'center',
+			},
 		},
 
 		save( { attributes } ) {

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -110,6 +110,23 @@
 	&.alignright {
 		display: flex;
 	}
+
+	.wp-block-cover__inner-container {
+		width: calc(100% - 70px);
+		z-index: z-index(".wp-block-cover__inner-container");
+		color: $light-gray-100;
+	}
+
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	.wp-block-subhead {
+		color: inherit;
+	}
 }
 
 .wp-block-cover__video-background {

diff --git a/packages/e2e-tests/fixtures/blocks/core__cover.html b/packages/e2e-tests/fixtures/blocks/core__cover.html
@@ -1,5 +1,14 @@
-<!-- wp:core/cover {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<div class="wp-block-cover has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
-    <p class="wp-block-cover-text">Guten Berg!</p>
+<!-- wp:cover {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
+<div
+	class="wp-block-cover has-background-dim-40 has-background-dim"
+	style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)"
+>
+	<div class="wp-block-cover__inner-container">
+		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+		<p style="text-align:center" class="has-large-font-size">
+			Guten Berg!
+		</p>
+		<!-- /wp:paragraph -->
+	</div>
 </div>
-<!-- /wp:core/cover -->
+<!-- /wp:cover -->