Skip to content

Commit

Permalink
Refactor cover image to use nesting.
Browse files Browse the repository at this point in the history
  • Loading branch information
jorgefilipecosta committed Sep 27, 2018
1 parent 8300578 commit 5986e57
Show file tree
Hide file tree
Showing 9 changed files with 178 additions and 77 deletions.
1 change: 1 addition & 0 deletions edit-post/assets/stylesheets/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ $z-layers: (
".edit-post-header": 30,
".block-library-button__inline-link .editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
".wp-block-cover-image__inner-container": 0, // InnerBlocks area inside cover image block

// Side UI active buttons
".editor-block-mover__control": 1,
Expand Down
23 changes: 20 additions & 3 deletions packages/block-library/src/cover-image/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,28 @@
color: inherit;
}

&.has-right-content .editor-rich-text__inline-toolbar,
&.has-left-content .editor-rich-text__inline-toolbar {
justify-content: flex-start;
display: inline-block;
}

&.has-right-content .editor-rich-text__inline-toolbar {
justify-content: flex-end;
.editor-block-list__layout {
width: 100%;
}

.editor-block-list__block {
color: $light-gray-100;
}
}

// wp-block-cover-image class is used just to increase selector specificity
.wp-block-cover-image .wp-block-cover-image__inner-container {
// avoid text align inherit from cover image align.
text-align: left;
}

.wp-block-cover-image__inner-container > .editor-inner-blocks > .editor-block-list__layout {
margin-left: 0;
margin-right: 0;
}

135 changes: 77 additions & 58 deletions packages/block-library/src/cover-image/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { isEmpty } from 'lodash';
import { omit } from 'lodash';
import classnames from 'classnames';

/**
Expand All @@ -14,31 +14,28 @@ import { createBlock } from '@wordpress/blocks';
import {
BlockControls,
InspectorControls,
InnerBlocks,
BlockAlignmentToolbar,
MediaPlaceholder,
MediaUpload,
AlignmentToolbar,
RichText,
} from '@wordpress/editor';

/**
* Internal dependencies
*/
import './editor.scss';
import './style.scss';

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',
},
Expand All @@ -54,6 +51,14 @@ const blockAttributes = {

export const name = 'core/cover-image';

const INNER_BLOCKS_TEMPLATE = [
[ 'core/paragraph', {
align: 'center',
fontSize: 'large',
placeholder: __( 'Write title…' ),
} ],
];
const INNER_BLOCKS_ALLOWED_BLOCKS = [ 'core/button', 'core/heading', 'core/paragraph' ];
export const settings = {
title: __( 'Cover Image' ),

Expand All @@ -67,13 +72,6 @@ export const settings = {

transforms: {
from: [
{
type: 'block',
blocks: [ 'core/heading' ],
transform: ( { content } ) => (
createBlock( 'core/cover-image', { title: content } )
),
},
{
type: 'block',
blocks: [ 'core/image' ],
Expand All @@ -88,13 +86,6 @@ export const settings = {
},
],
to: [
{
type: 'block',
blocks: [ 'core/heading' ],
transform: ( { title } ) => (
createBlock( 'core/heading', { content: title } )
),
},
{
type: 'block',
blocks: [ 'core/image' ],
Expand All @@ -117,8 +108,8 @@ export const settings = {
}
},

edit: withNotices( ( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI } ) => {
const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
edit: withNotices( ( { attributes, setAttributes, className, noticeOperations, noticeUI } ) => {
const { align, url, id, hasParallax, dimRatio } = attributes;
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
const onSelectImage = ( media ) => {
if ( ! media || ! media.url ) {
Expand All @@ -133,7 +124,6 @@ export const settings = {
const style = backgroundImageStyles( url );
const classes = classnames(
className,
contentAlign !== 'center' && `has-${ contentAlign }-content`,
dimRatioToClass( dimRatio ),
{
'has-background-dim': dimRatio !== 0,
Expand All @@ -148,12 +138,6 @@ export const settings = {
value={ align }
onChange={ updateAlignment }
/>
<AlignmentToolbar
value={ contentAlign }
onChange={ ( nextAlign ) => {
setAttributes( { contentAlign: nextAlign } );
} }
/>
<Toolbar>
<MediaUpload
onSelect={ onSelectImage }
Expand Down Expand Up @@ -193,16 +177,8 @@ export const settings = {
);

if ( ! url ) {
const hasTitle = ! isEmpty( title );
const icon = hasTitle ? undefined : 'format-image';
const label = hasTitle ? (
<RichText
tagName="h2"
value={ title }
onChange={ ( value ) => setAttributes( { title: value } ) }
inlineToolbar
/>
) : __( 'Cover Image' );
const icon = 'format-image';
const label = __( 'Cover Image' );

return (
<Fragment>
Expand Down Expand Up @@ -232,45 +208,88 @@ export const settings = {
style={ style }
className={ classes }
>
{ ( ! RichText.isEmpty( title ) || isSelected ) && (
<RichText
tagName="p"
className="wp-block-cover-image-text"
placeholder={ __( 'Write title…' ) }
value={ title }
onChange={ ( value ) => setAttributes( { title: value } ) }
inlineToolbar
<div className="wp-block-cover-image__inner-container">
<InnerBlocks
template={ INNER_BLOCKS_TEMPLATE }
allowedBlocks={ INNER_BLOCKS_ALLOWED_BLOCKS }
/>
) }
</div>
</div>
</Fragment>
);
} ),

save( { attributes, className } ) {
const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
const { url, hasParallax, dimRatio, align } = attributes;
const style = backgroundImageStyles( url );
const classes = classnames(
className,
dimRatioToClass( dimRatio ),
{
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
},
align ? `align${ align }` : null,
);

return (
<div className={ classes } style={ style }>
{ ! RichText.isEmpty( title ) && (
<RichText.Content tagName="p" className="wp-block-cover-image-text" value={ title } />
) }
<div className="wp-block-cover-image__inner-container">
<InnerBlocks.Content />
</div>
</div>
);
},

deprecated: [ {
attributes: {
...blockAttributes,
title: {
type: 'array',
source: 'children',
selector: 'p',
},
contentAlign: {
type: 'string',
default: 'center',
},
},

save( { attributes, className } ) {
const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
const style = backgroundImageStyles( url );
const classes = classnames(
className,
dimRatioToClass( dimRatio ),
{
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
[ `has-${ contentAlign }-content` ]: contentAlign !== 'center',
},
align ? `align${ align }` : null,
);

return (
<div className={ classes } style={ style }>
{ title && title.length > 0 && (
<RichText.Content tagName="p" className="wp-block-cover-image-text" value={ title } />
) }
</div>
);
},

migrate( attributes ) {
return [
omit( attributes, [ 'title', 'contentAlign' ] ),
[ createBlock( 'core/paragraph', {
content: attributes.title,
align: attributes.contentAlign,
fontSize: 'large',
placeholder: __( 'Write title…' ),
} ) ],
];
},
}, {
attributes: {
...blockAttributes,
title: {
Expand Down
28 changes: 27 additions & 1 deletion packages/block-library/src/cover-image/style.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
.wp-block-cover-image,
.wp-block-cover-image.alignleft,
.wp-block-cover-image.aligncenter,
.wp-block-cover-image.alignright,
.wp-block-cover-image.alignwide,
.wp-block-cover-image.alignfull {
display: flex;
}

.wp-block-cover-image {
position: relative;
background-size: cover;
background-position: center center;
min-height: 430px;
width: 100%;
margin: 0 0 1.5em 0;
display: flex;

justify-content: center;
align-items: center;

Expand Down Expand Up @@ -80,4 +89,21 @@
max-width: $content-width / 2;
width: 100%;
}

.wp-block-cover-image__inner-container {
width: calc(100% - 70px);
z-index: z-index(".wp-block-cover-image__inner-container");
color: $light-gray-100;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-subhead {
color: inherit;
}
}
8 changes: 7 additions & 1 deletion post-content.php
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
<!-- wp:cover-image {"url":"https://cldup.com/Fz-ASbo2s3.jpg","align":"wide"} -->
<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"><?php _e( 'Of Mountains &amp; Printing Presses', 'gutenberg' ); ?></p></div>
<div class="wp-block-cover-image has-background-dim alignwide" style="background-image:url(https://cldup.com/Fz-ASbo2s3.jpg)">
<div class="wp-block-cover-image__inner-container">
<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p style="text-align:center" class="has-large-font-size">Of Mountains &amp; Printing Presses</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:cover-image -->

<!-- wp:paragraph -->
Expand Down
12 changes: 8 additions & 4 deletions test/integration/full-content/fixtures/core__cover-image.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
<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>
<!-- wp:cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","id":8398,"dimRatio": 40} -->
<div class="wp-block-cover-image has-background-dim has-background-dim-40" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg)">
<div class="wp-block-cover-image__inner-container">
<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p style="text-align:center" class="has-large-font-size">Paragraph 1</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:core/cover-image -->
<!-- /wp:cover-image -->
26 changes: 20 additions & 6 deletions test/integration/full-content/fixtures/core__cover-image.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,29 @@
"name": "core/cover-image",
"isValid": true,
"attributes": {
"title": [
"Guten Berg!"
],
"url": "https://cldup.com/uuUqE_dXzy.jpg",
"contentAlign": "center",
"id": 8398,
"hasParallax": false,
"dimRatio": 40
},
"innerBlocks": [],
"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>"
"innerBlocks": [
{
"clientId": "_clientId_0",
"name": "core/paragraph",
"isValid": true,
"attributes": {
"content": [
"Paragraph 1"
],
"align": "center",
"dropCap": false,
"placeholder": "Write title…",
"fontSize": "large"
},
"innerBlocks": [],
"originalContent": "<p style=\"text-align:center\" class=\"has-large-font-size\">Paragraph 1</p>"
}
],
"originalContent": "<div class=\"wp-block-cover-image has-background-dim has-background-dim-40\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n <div class=\"wp-block-cover-image__inner-container\">\n\t\t\n </div>\n</div>"
}
]
Loading

0 comments on commit 5986e57

Please sign in to comment.