Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added text align feature to cover image.
Browse files Browse the repository at this point in the history
jorgefilipecosta committed Dec 18, 2017

Unverified

This user has not yet uploaded their public signing key.
1 parent 227a93f commit 63ae2a3
Showing 3 changed files with 32 additions and 3 deletions.
18 changes: 16 additions & 2 deletions blocks/library/cover-image/index.js
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@ import './editor.scss';
import './style.scss';
import { registerBlockType } from '../../api';
import Editable from '../../editable';
import AlignmentToolbar from '../../alignment-toolbar';
import MediaUploadButton from '../../media-upload-button';
import BlockControls from '../../block-controls';
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
@@ -41,6 +42,10 @@ registerBlockType( 'core/cover-image', {
align: {
type: 'string',
},
contentAlign: {
type: 'string',
default: 'center',
},
id: {
type: 'number',
},
@@ -62,7 +67,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 } );
@@ -72,6 +77,7 @@ registerBlockType( 'core/cover-image', {
undefined;
const classes = classnames(
className,
contentAlign !== 'center' && `contentalign${ contentAlign }`,
dimRatioToClass( dimRatio ),
{
'has-background-dim': dimRatio !== 0,
@@ -118,6 +124,13 @@ registerBlockType( 'core/cover-image', {
max={ 100 }
step={ 10 }
/>
<p>{ __( 'Text Alignment' ) }</p>
<AlignmentToolbar
value={ contentAlign }
onChange={ ( nextAlign ) => {
setAttributes( { contentAlign: nextAlign } );
} }
/>
</InspectorControls>,
];

@@ -166,12 +179,13 @@ registerBlockType( 'core/cover-image', {
},

save( { attributes, className } ) {
const { url, title, hasParallax, dimRatio } = attributes;
const { contentAlign, url, title, hasParallax, dimRatio } = attributes;
const style = url ?
{ backgroundImage: `url(${ url })` } :
undefined;
const classes = classnames(
className,
contentAlign !== 'center' && `contentalign${ contentAlign }`,
dimRatioToClass( dimRatio ),
{
'has-background-dim': dimRatio !== 0,
14 changes: 14 additions & 0 deletions blocks/library/cover-image/style.scss
Original file line number Diff line number Diff line change
@@ -8,6 +8,20 @@
justify-content: center;
align-items: center;

&.contentalignleft {
justify-content: flex-start;
h2 {
text-align: left;
}
}

&.contentalignright {
justify-content: flex-end;
h2 {
text-align: right;
}
}

h2 {
color: white;
font-size: 24pt;
3 changes: 2 additions & 1 deletion blocks/test/fixtures/core__cover-image.json
Original file line number Diff line number Diff line change
@@ -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>"
}

0 comments on commit 63ae2a3

Please sign in to comment.