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>"
  }