Merge pull request #2038 from WordPress/update/cover-image-demo-invalid

Simplify cover image markup structure
WordPress · Jul 28, 2017 · cec69e8 · cec69e8
2 parents 8b4b68d + 40db4e8
commit cec69e8
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 93 deletions.
diff --git a/blocks/library/cover-image/block.scss b/blocks/library/cover-image/block.scss
@@ -1,6 +1,12 @@
 .wp-block-cover-image {
-	margin: 0;
 	position: relative;
+	background-size: cover;
+	height: 430px;
+	width: 100%;
+	margin: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
 	h2 {
 		color: white;
@@ -12,20 +18,11 @@
 		text-align: center;
 	}
 
-	.cover-image {
-		background-size: cover;
-		height: 430px;
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.has-parallax {
+	&.has-parallax {
 		background-attachment: fixed;
 	}
 
-	.has-background-dim.cover-image:before {
+	&.has-background-dim:before {
 		content: '';
 		position: absolute;
 		top: 0;

diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -34,6 +34,10 @@ registerBlockType( 'core/cover-image', {
 		title: text( 'h2' ),
 	},
 
+	defaultAttributes: {
+		hasBackgroundDim: true,
+	},
+
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;
 		if ( -1 !== validAlignments.indexOf( align ) ) {
@@ -42,7 +46,7 @@ registerBlockType( 'core/cover-image', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus, className } ) {
-		const { url, title, align, id, hasParallax, hasBackgroundDim = true } = attributes;
+		const { url, title, align, id, hasParallax, hasBackgroundDim } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
 
@@ -96,8 +100,7 @@ registerBlockType( 'core/cover-image', {
 		}
 
 		const style = { backgroundImage: `url(${ url })` };
-		const sectionClasses = classnames( {
-			'cover-image': true,
+		const classes = classnames( className, {
 			'has-parallax': hasParallax,
 			'has-background-dim': hasBackgroundDim,
 		} );
@@ -124,40 +127,40 @@ registerBlockType( 'core/cover-image', {
 					/>
 				</InspectorControls>
 			),
-			<section key="cover-image" className={ className }>
-				<section className={ sectionClasses } data-url={ url } style={ style }>
-					{ title || !! focus ? (
-						<Editable
-							tagName="h2"
-							placeholder={ __( 'Write title…' ) }
-							value={ title }
-							focus={ focus }
-							onFocus={ setFocus }
-							onChange={ ( value ) => setAttributes( { title: value } ) }
-							inlineToolbar
-						/>
-					) : null }
-				</section>
+			<section
+				key="preview"
+				data-url={ url }
+				style={ style }
+				className={ classes }
+			>
+				{ title || !! focus ? (
+					<Editable
+						tagName="h2"
+						placeholder={ __( 'Write title…' ) }
+						value={ title }
+						focus={ focus }
+						onFocus={ setFocus }
+						onChange={ ( value ) => setAttributes( { title: value } ) }
+						inlineToolbar
+					/>
+				) : null }
 			</section>,
 		];
 	},
 
-	save( { attributes } ) {
+	save( { attributes, className } ) {
 		const { url, title, hasParallax, hasBackgroundDim } = attributes;
 		const style = {
 			backgroundImage: `url(${ url })`,
 		};
-		const sectionClasses = classnames( {
-			'cover-image': true,
+		const classes = classnames( className, {
 			'has-parallax': hasParallax,
 			'has-background-dim': hasBackgroundDim,
 		} );
 
 		return (
-			<section>
-				<section className={ sectionClasses } style={ style }>
-					<h2>{ title }</h2>
-				</section>
+			<section className={ classes } style={ style }>
+				<h2>{ title }</h2>
 			</section>
 		);
 	},

diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
@@ -3,49 +3,6 @@
 		position: inherit;
 	}
 
-	.wp-block-cover-image {
-		margin: 0;
-
-		h2 {
-			color: white;
-			font-size: 24pt;
-			line-height: 1em;
-			max-width: $visual-editor-max-width;
-			padding: $block-padding;
-			text-align: center;
-		}
-	}
-
-	.cover-image {
-		background-size: cover;
-		height: 430px;
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.has-parallax {
-		background-attachment: fixed;
-	}
-
-	.cover-image.has-background-dim::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background: rgba( 0,0,0,.5 );
-	}
-
-	&[data-align="full"] .cover-image::before {
-		right: 0;
-		left: 0;
-	}
-}
-
-.cover-image {
 	.blocks-editable__tinymce a {
 		color: white;
 	}

diff --git a/blocks/test/fixtures/core__cover-image.html b/blocks/test/fixtures/core__cover-image.html
@@ -1,7 +1,5 @@
-<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg"} -->
-<section class="wp-block-cover-image">
-	<section class="cover-image" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
-		<h2>Guten Berg!</h2>
-	</section>
+<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","hasBackgroundDim":true} -->
+<section class="wp-block-cover-image has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+    <h2>Guten Berg!</h2>
 </section>
 <!-- /wp:core/cover-image -->
diff --git a/blocks/test/fixtures/core__cover-image.json b/blocks/test/fixtures/core__cover-image.json
@@ -4,6 +4,7 @@
         "name": "core/cover-image",
         "isValid": true,
         "attributes": {
+            "hasBackgroundDim": true,
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
             "title": "Guten Berg!"
         }

diff --git a/blocks/test/fixtures/core__cover-image.parsed.json b/blocks/test/fixtures/core__cover-image.parsed.json
@@ -2,9 +2,10 @@
     {
         "blockName": "core/cover-image",
         "attrs": {
-            "url": "https://cldup.com/uuUqE_dXzy.jpg"
+            "url": "https://cldup.com/uuUqE_dXzy.jpg",
+            "hasBackgroundDim": true
         },
-        "rawContent": "\n<section class=\"wp-block-cover-image\">\n\t<section class=\"cover-image\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n\t\t<h2>Guten Berg!</h2>\n\t</section>\n</section>\n"
+        "rawContent": "\n<section class=\"wp-block-cover-image has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>\n"
     },
     {
         "attrs": {},

diff --git a/blocks/test/fixtures/core__cover-image.serialized.html b/blocks/test/fixtures/core__cover-image.serialized.html
@@ -1,7 +1,5 @@
-<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg"} -->
-<section class="wp-block-cover-image">
-    <section class="cover-image" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
-        <h2>Guten Berg!</h2>
-    </section>
+<!-- wp:core/cover-image {"hasBackgroundDim":true,"url":"https://cldup.com/uuUqE_dXzy.jpg"} -->
+<section class="wp-block-cover-image has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+    <h2>Guten Berg!</h2>
 </section>
 <!-- /wp:core/cover-image -->
diff --git a/post-content.js b/post-content.js
@@ -7,8 +7,8 @@ window._wpGutenbergPost.title = {
 
 window._wpGutenbergPost.content = {
 	raw: [
-		'<!-- wp:core/cover-image {"url":"https://cldup.com/GCwahb3aOb.jpg","align":"full","hasParallax":true} -->',
-		'<section class="wp-block-cover-image cover-image" style="background-image: url(https://cldup.com/GCwahb3aOb.jpg);"><h2>Of mountains &amp; printing presses</h2></section>',
+		'<!-- wp:core/cover-image {"url":"https://cldup.com/GCwahb3aOb.jpg","align":"full","hasParallax":true,"hasBackgroundDim":true} -->',
+		'<section class="wp-block-cover-image has-parallax has-background-dim" style="background-image:url(https://cldup.com/GCwahb3aOb.jpg)"><h2>Of mountains &amp; printing presses</h2></section>',
 		'<!-- /wp:core/cover-image -->',
 
 		'<!-- more Keep on reading! -->',