diff --git a/blocks/library/cover-image/editor.scss b/blocks/library/cover-image/editor.scss index 1ee1886640c12..0ae8f789aa623 100644 --- 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 index e98b13807dd97..00c61c40e1499 100644 --- 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,6 +106,7 @@ registerBlockType( 'core/cover-image', { undefined; const classes = classnames( className, + contentAlign !== 'center' && `has-${ contentAlign }-content`, dimRatioToClass( dimRatio ), { 'has-background-dim': dimRatio !== 0, @@ -108,6 +114,14 @@ registerBlockType( 'core/cover-image', { } ); + const alignmentToolbar = ( + { + setAttributes( { contentAlign: nextAlign } ); + } } + /> + ); const controls = focus && [ + { alignmentToolbar } + + { alignmentToolbar } + , ]; @@ -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 index a9934a93fbc98..4ec232e2d2090 100644 --- 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 index 8fdfd14e7515e..aac2689bede6d 100644 --- 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": "
\n

Guten Berg!

\n
" }