Merge pull request #3444 from samikeijonen/update/cover-image

Update cover image markup and CSS
WordPress · Mar 13, 2018 · 55c6f2c · 55c6f2c
2 parents 0f5cb93 + c6dd1e9
commit 55c6f2c
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 61 deletions.
diff --git a/blocks/library/cover-image/editor.scss b/blocks/library/cover-image/editor.scss
@@ -1,12 +1,10 @@
 .wp-block-cover-image {
+	margin: 0;
+
 	.blocks-rich-text__tinymce[data-is-empty="true"]:before {
 		position: inherit;
 	}
 
-	.blocks-rich-text__tinymce a {
-		color: white;
-	}
-
 	.blocks-rich-text__tinymce:focus a[data-mce-selected] {
 		padding: 0 2px;
 		margin: 0 -2px;

diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -26,6 +26,35 @@ import InspectorControls from '../../inspector-controls';
 
 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',
+	},
+	hasParallax: {
+		type: 'boolean',
+		default: false,
+	},
+	dimRatio: {
+		type: 'number',
+		default: 50,
+	},
+};
+
 export const name = 'core/cover-image';
 
 export const settings = {
@@ -37,34 +66,7 @@ export const settings = {
 
 	category: 'common',
 
-	attributes: {
-		title: {
-			type: 'array',
-			source: 'children',
-			selector: 'h2',
-		},
-		url: {
-			type: 'string',
-		},
-		align: {
-			type: 'string',
-		},
-		contentAlign: {
-			type: 'string',
-			default: 'center',
-		},
-		id: {
-			type: 'number',
-		},
-		hasParallax: {
-			type: 'boolean',
-			default: false,
-		},
-		dimRatio: {
-			type: 'number',
-			default: 50,
-		},
-	},
+	attributes: blockAttributes,
 
 	transforms: {
 		from: [
@@ -101,9 +103,7 @@ export const settings = {
 		const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
 		const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
 
-		const style = url ?
-			{ backgroundImage: `url(${ url })` } :
-			undefined;
+		const style = backgroundImageStyles( url );
 		const classes = classnames(
 			className,
 			contentAlign !== 'center' && `has-${ contentAlign }-content`,
@@ -190,31 +190,30 @@ export const settings = {
 
 		return [
 			controls,
-			<section
+			<div
 				key="preview"
 				data-url={ url }
 				style={ style }
 				className={ classes }
 			>
 				{ title || isSelected ? (
 					<RichText
-						tagName="h2"
+						tagName="p"
+						className="wp-block-cover-image-text"
 						placeholder={ __( 'Write title…' ) }
 						value={ title }
 						onChange={ ( value ) => setAttributes( { title: value } ) }
 						isSelected={ isSelected }
 						inlineToolbar
 					/>
 				) : null }
-			</section>,
+			</div>,
 		];
 	},
 
 	save( { attributes, className } ) {
 		const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
-		const style = url ?
-			{ backgroundImage: `url(${ url })` } :
-			undefined;
+		const style = backgroundImageStyles( url );
 		const classes = classnames(
 			className,
 			dimRatioToClass( dimRatio ),
@@ -227,15 +226,54 @@ export const settings = {
 		);
 
 		return (
-			<section className={ classes } style={ style }>
-				<h2>{ title }</h2>
-			</section>
+			<div className={ classes } style={ style }>
+				{ title && title.length > 0 && (
+					<p className="wp-block-cover-image-text">{ title }</p>
+				) }
+			</div>
 		);
 	},
+
+	deprecated: [ {
+		attributes: {
+			...blockAttributes,
+			title: {
+				type: 'array',
+				source: 'children',
+				selector: 'h2',
+			},
+		},
+
+		save( { attributes, className } ) {
+			const { url, title, hasParallax, dimRatio, align } = attributes;
+			const style = backgroundImageStyles( url );
+			const classes = classnames(
+				className,
+				dimRatioToClass( dimRatio ),
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+				},
+				align ? `align${ align }` : null,
+			);
+
+			return (
+				<section className={ classes } style={ style }>
+					<h2>{ title }</h2>
+				</section>
+			);
+		},
+	} ],
 };
 
 function dimRatioToClass( ratio ) {
 	return ( ratio === 0 || ratio === 50 ) ?
 		null :
 		'has-background-dim-' + ( 10 * Math.round( ratio / 10 ) );
 }
+
+function backgroundImageStyles( url ) {
+	return url ?
+		{ backgroundImage: `url(${ url })` } :
+		undefined;
+}
diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
@@ -1,37 +1,50 @@
 .wp-block-cover-image {
 	position: relative;
 	background-size: cover;
-	height: 430px;
+	min-height: 430px;
 	width: 100%;
-	margin: 0;
+	margin: 0 0 1.5em 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 
 	&.has-left-content {
 		justify-content: flex-start;
-		h2 {
+
+		h2,
+		.wp-block-cover-image-text {
 			margin-left: 0;
 			text-align: left;
 		}
 	}
 
 	&.has-right-content {
 		justify-content: flex-end;
-		h2 {
+
+		h2,
+		.wp-block-cover-image-text {
 			margin-right: 0;
 			text-align: right;
 		}
 	}
 
-	h2 {
+	h2,
+	.wp-block-cover-image-text {
 		color: white;
-		font-size: 24pt;
-		line-height: 1em;
+		font-size: 2em;
+		line-height: 1.25;
 		z-index: 1;
+		margin-bottom: 0;
 		max-width: $visual-editor-max-width;
 		padding: $block-padding;
 		text-align: center;
+
+		a,
+		a:hover,
+		a:focus,
+		a:active {
+			color: white;
+		}
 	}
 
 	&.has-parallax {
@@ -45,7 +58,7 @@
 		left: 0;
 		bottom: 0;
 		right: 0;
-		background: rgba( black, 0.5 );
+		background-color: rgba( black, 0.5 );
 	}
 
 	@for $i from 1 through 10 {

diff --git a/blocks/test/fixtures/core__cover-image.html b/blocks/test/fixtures/core__cover-image.html
@@ -1,5 +1,5 @@
 <!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
-    <h2>Guten Berg!</h2>
-</section>
+<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:core/cover-image -->
diff --git a/blocks/test/fixtures/core__cover-image.json b/blocks/test/fixtures/core__cover-image.json
@@ -13,6 +13,6 @@
             "dimRatio": 40
         },
         "innerBlocks": [],
-        "originalContent": "<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n    <h2>Guten Berg!</h2>\n</section>"
+        "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>"
     }
 ]
diff --git a/blocks/test/fixtures/core__cover-image.parsed.json b/blocks/test/fixtures/core__cover-image.parsed.json
@@ -6,7 +6,7 @@
             "dimRatio": 40
         },
         "innerBlocks": [],
-        "innerHTML": "\n<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n    <h2>Guten Berg!</h2>\n</section>\n"
+        "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"
     },
     {
         "attrs": {},

diff --git a/blocks/test/fixtures/core__cover-image.serialized.html b/blocks/test/fixtures/core__cover-image.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
-    <h2>Guten Berg!</h2>
-</section>
+<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 -->
diff --git a/post-content.js b/post-content.js
@@ -8,7 +8,7 @@ window._wpGutenbergPost.title = {
 window._wpGutenbergPost.content = {
 	raw: [
 		'<!-- wp:cover-image {"url":"https://cldup.com/Fz-ASbo2s3.jpg","align":"wide"} -->',
-		'<section class="wp-block-cover-image has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)"><h2>Of Mountains &amp; Printing Presses</h2></section>',
+		'<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">Of Mountains &amp; Printing Presses</p></div>',
 		'<!-- /wp:cover-image -->',
 
 		'<!-- wp:paragraph -->',