Added text align feature to cover image. (#4066)

WordPress · Jan 19, 2018 · 3568fc4 · 3568fc4
1 parent 6dd01de
commit 3568fc4
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 4 deletions.
diff --git a/blocks/library/cover-image/editor.scss b/blocks/library/cover-image/editor.scss
@@ -22,4 +22,12 @@
 	&.components-placeholder h2 {
 		color: inherit;
 	}
+
+	&.has-left-content .block-editable__inline-toolbar {
+		justify-content: flex-start;
+	}
+
+	&.has-right-content .block-editable__inline-toolbar{
+		justify-content: flex-end;
+	}
 }
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -6,7 +6,7 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { IconButton, Toolbar } from '@wordpress/components';
+import { IconButton, PanelBody, Toolbar } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 
@@ -17,6 +17,7 @@ import './editor.scss';
 import './style.scss';
 import { registerBlockType, createBlock } from '../../api';
 import Editable from '../../editable';
+import AlignmentToolbar from '../../alignment-toolbar';
 import MediaUpload from '../../media-upload';
 import ImagePlaceHolder from '../../image-placeholder';
 import BlockControls from '../../block-controls';
@@ -48,6 +49,10 @@ registerBlockType( 'core/cover-image', {
 		align: {
 			type: 'string',
 		},
+		contentAlign: {
+			type: 'string',
+			default: 'center',
+		},
 		id: {
 			type: 'number',
 		},
@@ -90,7 +95,7 @@ registerBlockType( 'core/cover-image', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus, className } ) {
-		const { url, title, align, id, hasParallax, dimRatio } = attributes;
+		const { url, title, align, contentAlign, 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 } );
@@ -101,20 +106,30 @@ registerBlockType( 'core/cover-image', {
 			undefined;
 		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 = focus && [
 			<BlockControls key="controls">
 				<BlockAlignmentToolbar
 					value={ align }
 					onChange={ updateAlignment }
 				/>
 
+				{ alignmentToolbar }
 				<Toolbar>
 					<MediaUpload
 						onSelect={ onSelectImage }
@@ -146,6 +161,9 @@ registerBlockType( 'core/cover-image', {
 					max={ 100 }
 					step={ 10 }
 				/>
+				<PanelBody title={ __( 'Text Alignment' ) }>
+					{ alignmentToolbar }
+				</PanelBody>
 			</InspectorControls>,
 		];
 
@@ -195,7 +213,7 @@ registerBlockType( 'core/cover-image', {
 	},
 
 	save( { attributes, className } ) {
-		const { url, title, hasParallax, dimRatio, align } = attributes;
+		const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
 		const style = url ?
 			{ backgroundImage: `url(${ url })` } :
 			undefined;
@@ -205,6 +223,7 @@ registerBlockType( 'core/cover-image', {
 			{
 				'has-background-dim': dimRatio !== 0,
 				'has-parallax': hasParallax,
+				[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
 			},
 			align ? `align${ align }` : null,
 		);

diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
@@ -8,6 +8,22 @@
 	justify-content: center;
 	align-items: center;
 
+	&.has-left-content {
+		justify-content: flex-start;
+		h2 {
+			margin-left: 0;
+			text-align: left;
+		}
+	}
+
+	&.has-right-content {
+		justify-content: flex-end;
+		h2 {
+			margin-right: 0;
+			text-align: right;
+		}
+	}
+
 	h2 {
 		color: white;
 		font-size: 24pt;

diff --git a/blocks/test/fixtures/core__cover-image.json b/blocks/test/fixtures/core__cover-image.json
@@ -9,7 +9,8 @@
             ],
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
             "hasParallax": false,
-            "dimRatio": 40
+            "dimRatio": 40,
+            "contentAlign": "center"
         },
         "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>"
     }