Implemented nesting in cover image block.

WordPress · Apr 2, 2018 · fa54943 · fa54943
1 parent 0c4bdf6
commit fa54943
Show file tree

Hide file tree

Showing 18 changed files with 309 additions and 171 deletions.
diff --git a/blocks/inner-blocks/index.js b/blocks/inner-blocks/index.js
@@ -3,8 +3,8 @@
  */
 import { withContext } from '@wordpress/components';
 
-function InnerBlocks( { BlockList, layouts } ) {
-	return <BlockList layouts={ layouts } />;
+function InnerBlocks( { BlockList, layouts, allowedBlocks, template } ) {
+	return <BlockList { ...{ layouts, allowedBlocks, template } } />;
 }
 
 InnerBlocks = withContext( 'BlockList' )()( InnerBlocks );

diff --git a/blocks/library/cover-image/editor.scss b/blocks/library/cover-image/editor.scss
@@ -22,10 +22,16 @@
 	}
 
 	&.has-left-content .block-rich-text__inline-toolbar {
-		justify-content: flex-start;
+		display: inline-block;
 	}
 
 	&.has-right-content .block-rich-text__inline-toolbar{
-		justify-content: flex-end;
+		display: inline-block;
 	}
+
+	.editor-block-list__layout {
+		width: 100%;
+	}
+
+
 }
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar } from '@wordpress/components';
+import { IconButton, RangeControl, ToggleControl, Toolbar } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 
@@ -16,32 +11,22 @@ import classnames from 'classnames';
 import './editor.scss';
 import './style.scss';
 import { createBlock } from '../../api';
-import RichText from '../../rich-text';
-import AlignmentToolbar from '../../alignment-toolbar';
 import MediaUpload from '../../media-upload';
 import ImagePlaceholder from '../../image-placeholder';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import InspectorControls from '../../inspector-controls';
+import InnerBlocks from '../../inner-blocks';
 
 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',
 	},
@@ -97,7 +82,7 @@ export const settings = {
 	},
 
 	edit( { attributes, setAttributes, isSelected, className } ) {
-		const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
+		const { align, url, id, hasParallax, dimRatio } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
 		const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
@@ -106,30 +91,19 @@ export const settings = {
 		const style = backgroundImageStyles( url );
 		const classes = classnames(
 			className,
-			contentAlign !== 'center' && `has-${ contentAlign }-content`,
 			dimRatioToClass( dimRatio ),
 			{
 				'has-background-dim': dimRatio !== 0,
 				'has-parallax': hasParallax,
 			}
 		);
 
-		const alignmentToolbar	= (
-			<AlignmentToolbar
-				value={ contentAlign }
-				onChange={ ( nextAlign ) => {
-					setAttributes( { contentAlign: nextAlign } );
-				} }
-			/>
-		);
 		const controls = isSelected && [
 			<BlockControls key="controls">
 				<BlockAlignmentToolbar
 					value={ align }
 					onChange={ updateAlignment }
 				/>
-
-				{ alignmentToolbar }
 				<Toolbar>
 					<MediaUpload
 						onSelect={ onSelectImage }
@@ -161,24 +135,12 @@ export const settings = {
 					max={ 100 }
 					step={ 10 }
 				/>
-				<PanelBody title={ __( 'Text Alignment' ) }>
-					{ alignmentToolbar }
-				</PanelBody>
 			</InspectorControls>,
 		];
 
 		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 } ) }
-					isSelected={ isSelected }
-					inlineToolbar
-				/>
-			) : __( 'Cover Image' );
+			const icon = 'format-image';
+			const label = __( 'Cover Image' );
 
 			return [
 				controls,
@@ -196,40 +158,41 @@ export const settings = {
 				style={ style }
 				className={ classes }
 			>
-				{ title || isSelected ? (
-					<RichText
-						tagName="p"
-						className="wp-block-cover-image-text"
-						placeholder={ __( 'Write title…' ) }
-						value={ title }
-						onChange={ ( value ) => setAttributes( { title: value } ) }
-						isSelected={ isSelected }
-						inlineToolbar
+				<div className="wp-block-cover-image__inner-container">
+					<InnerBlocks
+						template={ [
+							[ 'core/paragraph', {
+								align: 'center',
+								fontSize: 'large',
+								placeholder: __( 'Write title…' ),
+								textColor: '#fff',
+							} ],
+						] }
+						allowedBlocks={ [ 'core/button', 'core/heading', 'core/paragraph', 'core/subhead' ] }
 					/>
-				) : null }
+				</div>
 			</div>,
 		];
 	},
 
 	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 }>
-				{ title && title.length > 0 && (
-					<p className="wp-block-cover-image-text">{ title }</p>
-				) }
+				<div className="wp-block-cover-image__inner-container">
+					<InnerBlocks.Content />
+				</div>
 			</div>
 		);
 	},

diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
@@ -6,46 +6,7 @@
 	margin: 0 0 1.5em 0;
 	display: flex;
 	justify-content: center;
-	align-items: center;
-
-	&.has-left-content {
-		justify-content: flex-start;
-
-		h2,
-		.wp-block-cover-image-text {
-			margin-left: 0;
-			text-align: left;
-		}
-	}
-
-	&.has-right-content {
-		justify-content: flex-end;
-
-		h2,
-		.wp-block-cover-image-text {
-			margin-right: 0;
-			text-align: right;
-		}
-	}
-
-	h2,
-	.wp-block-cover-image-text {
-		color: white;
-		font-size: 2em;
-		line-height: 1.25;
-		z-index: 1;
-		margin-bottom: 0;
-		max-width: $content-width;
-		padding: $block-padding;
-		text-align: center;
-
-		a,
-		a:hover,
-		a:focus,
-		a:active {
-			color: white;
-		}
-	}
+	flex-direction: column;
 
 	&.has-parallax {
 		background-attachment: fixed;
@@ -71,4 +32,14 @@
 		height: inherit;
 	}
 
+	.wp-block-cover-image__inner-container {
+		width: 100%;
+		p {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+
+
+
 }
diff --git a/blocks/library/paragraph/editor.scss b/blocks/library/paragraph/editor.scss
@@ -1,7 +1,3 @@
-.editor-block-list__block:not( .is-multi-selected ) .wp-block-paragraph {
-	background: white;
-}
-
 .blocks-font-size__main {
 	display: flex;
 	justify-content: space-between;

diff --git a/blocks/test/fixtures/core__cover-image.html b/blocks/test/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…","textColor":"#fff","fontSize":"large"} -->
+		<p style="color:#fff;text-align:center" class="is-large-text">Paragraph 1</p>
+		<!-- /wp:paragraph -->
+    </div>
 </div>
-<!-- /wp:core/cover-image -->
+<!-- /wp:cover-image -->
diff --git a/blocks/test/fixtures/core__cover-image.json b/blocks/test/fixtures/core__cover-image.json
@@ -4,15 +4,30 @@
         "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": [
+            {
+                "uid": "_uid_0",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "content": [
+                        "Paragraph 1"
+                    ],
+                    "align": "center",
+                    "dropCap": false,
+                    "placeholder": "Write title…",
+                    "textColor": "#fff",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "originalContent": "<p style=\"color:#fff;text-align:center\" class=\"is-large-text\">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/blocks/test/fixtures/core__cover-image.parsed.json b/blocks/test/fixtures/core__cover-image.parsed.json
@@ -3,10 +3,23 @@
         "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…",
+                    "textColor": "#fff",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "innerHTML": "\n\t\t<p style=\"color:#fff;text-align:center\" class=\"is-large-text\">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/blocks/test/fixtures/core__cover-image.serialized.html b/blocks/test/fixtures/core__cover-image.serialized.html
@@ -1,5 +1,9 @@
-<!-- wp:cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
+<!-- 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)">
-    <p class="wp-block-cover-image-text">Guten Berg!</p>
+    <div class="wp-block-cover-image__inner-container">
+        <!-- wp:paragraph {"align":"center","placeholder":"Write title…","textColor":"#fff","fontSize":"large"} -->
+        <p style="color:#fff;text-align:center" class="is-large-text">Paragraph 1</p>
+        <!-- /wp:paragraph -->
+    </div>
 </div>
 <!-- /wp:cover-image -->
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -571,7 +571,7 @@ export class BlockListBlock extends Component {
 				{ showSideInserter && (
 					<Fragment>
 						<div className="editor-block-list__side-inserter">
-							<InserterWithShortcuts uid={ block.uid } layout={ layout } onToggle={ this.selectOnOpen } />
+							<InserterWithShortcuts uid={ block.uid } rootUID={ rootUID } layout={ layout } onToggle={ this.selectOnOpen } />
 						</div>
 						<div className="editor-block-list__empty-block-inserter">
 							<Inserter

diff --git a/editor/components/default-block-appender/test/__snapshots__/index.js.snap b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -36,7 +36,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     value="Write your story"
   />
   <WrappedComponent />
-  <Select(Dispatch(WrappedComponent))
+  <WrappedComponent
     position="top right"
   />
 </div>
@@ -60,7 +60,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
     value="Write your story"
   />
   <WrappedComponent />
-  <Select(Dispatch(WrappedComponent))
+  <WrappedComponent
     position="top right"
   />
 </div>
@@ -84,7 +84,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
     value=""
   />
   <WrappedComponent />
-  <Select(Dispatch(WrappedComponent))
+  <WrappedComponent
     position="top right"
   />
 </div>