Skip to content

Commit

Permalink
Implemented nesting in cover image block.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgefilipecosta
jorgefilipecosta committed Mar 22, 2018
1 parent 8d77d9e commit 98b78d7
Show file tree
Hide file tree
Showing 16 changed files with 240 additions and 164 deletions.
4 changes: 2 additions & 2 deletions blocks/inner-blocks/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
*/
import { withContext } from '@wordpress/components';

function InnerBlocks( { BlockList, layouts } ) {
return <BlockList layouts={ layouts } />;
function InnerBlocks( { BlockList, layouts, allowedBlockNames, template } ) {
return <BlockList { ...{ layouts, allowedBlockNames, template } } />;
}

InnerBlocks = withContext( 'BlockList' )()( InnerBlocks );
Expand Down
13 changes: 11 additions & 2 deletions blocks/library/cover-image/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,19 @@
}

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

&.has-right-content .block-rich-text__inline-toolbar{
justify-content: flex-end;
display: inline-block;
}

.editor-block-list__layout {
width: 100%;
.editor-block-list__block:not(.is-multi-selected) .wp-block-paragraph {
background: none;
}
}


}
87 changes: 21 additions & 66 deletions blocks/library/cover-image/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
/**
* External dependencies
*/
import { isEmpty } from 'lodash';

/**
* WordPress dependencies
*/
import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar } from '@wordpress/components';
import { IconButton, RangeControl, ToggleControl, Toolbar } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

Expand All @@ -16,32 +11,18 @@ import classnames from 'classnames';
import './editor.scss';
import './style.scss';
import { createBlock } from '../../api';
import RichText from '../../rich-text';
import AlignmentToolbar from '../../alignment-toolbar';
import MediaUpload from '../../media-upload';
import ImagePlaceholder from '../../image-placeholder';
import BlockControls from '../../block-controls';
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
import InspectorControls from '../../inspector-controls';
import InnerBlocks from '../../inner-blocks';

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 Down Expand Up @@ -97,39 +78,23 @@ export const settings = {
},

edit( { attributes, setAttributes, isSelected, className } ) {
const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
const { url, id, hasParallax, dimRatio } = attributes;
const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );

const style = backgroundImageStyles( url );
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 = isSelected && [
<BlockControls key="controls">
<BlockAlignmentToolbar
value={ align }
onChange={ updateAlignment }
/>

{ alignmentToolbar }
<Toolbar>
<MediaUpload
onSelect={ onSelectImage }
Expand Down Expand Up @@ -161,24 +126,12 @@ export const settings = {
max={ 100 }
step={ 10 }
/>
<PanelBody title={ __( 'Text Alignment' ) }>
{ alignmentToolbar }
</PanelBody>
</InspectorControls>,
];

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 } ) }
isSelected={ isSelected }
inlineToolbar
/>
) : __( 'Cover Image' );
const icon = 'format-image';
const label = __( 'Cover Image' );

return [
controls,
Expand All @@ -196,23 +149,25 @@ export const settings = {
style={ style }
className={ classes }
>
{ title || isSelected ? (
<RichText
tagName="p"
className="wp-block-cover-image-text"
placeholder={ __( 'Write title…' ) }
value={ title }
onChange={ ( value ) => setAttributes( { title: value } ) }
isSelected={ isSelected }
inlineToolbar
<div className="wp-block-cover-image__inner-container">
<InnerBlocks
template={ [
[ 'core/paragraph', {
align: 'center',
fontSize: 37,
placeholder: 'Write title…',
textColor: '#fff',
} ],
] }
allowedBlockNames={ [ 'core/button', 'core/heading', 'core/paragraph', 'core/subhead' ] }
/>
) : null }
</div>
</div>,
];
},

save( { attributes, className } ) {
const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
const { url, hasParallax, dimRatio, align, contentAlign } = attributes;
const style = backgroundImageStyles( url );
const classes = classnames(
className,
Expand All @@ -227,9 +182,9 @@ export const settings = {

return (
<div className={ classes } style={ style }>
{ title && title.length > 0 && (
<p className="wp-block-cover-image-text">{ title }</p>
) }
<div className="wp-block-cover-image__inner-container">
<InnerBlocks.Content />
</div>
</div>
);
},
Expand Down
51 changes: 11 additions & 40 deletions blocks/library/cover-image/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,7 @@
margin: 0 0 1.5em 0;
display: flex;
justify-content: center;
align-items: center;

&.has-left-content {
justify-content: flex-start;

h2,
.wp-block-cover-image-text {
margin-left: 0;
text-align: left;
}
}

&.has-right-content {
justify-content: flex-end;

h2,
.wp-block-cover-image-text {
margin-right: 0;
text-align: right;
}
}

h2,
.wp-block-cover-image-text {
color: white;
font-size: 2em;
line-height: 1.25;
z-index: 1;
margin-bottom: 0;
max-width: $content-width;
padding: $block-padding;
text-align: center;

a,
a:hover,
a:focus,
a:active {
color: white;
}
}
flex-direction: column;

&.has-parallax {
background-attachment: fixed;
Expand All @@ -71,4 +32,14 @@
height: inherit;
}

.wp-block-cover-image__inner-container {
width: 100%;
p {
margin-top: 0;
margin-bottom: 0;
}
}



}
12 changes: 8 additions & 4 deletions blocks/test/fixtures/core__cover-image.html
View file
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} -->
<div class="wp-block-cover-image has-background-dim has-undefined-content" 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…","textColor":"#fff","fontSize":37} -->
<p style="color:#fff;text-align:center">Paragraph 1</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:core/cover-image -->
<!-- /wp:cover-image -->
29 changes: 22 additions & 7 deletions blocks/test/fixtures/core__cover-image.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,30 @@
"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
"dimRatio": 50
},
"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": [
{
"uid": "_uid_0",
"name": "core/paragraph",
"isValid": true,
"attributes": {
"content": [
"Paragraph 1"
],
"align": "center",
"dropCap": false,
"placeholder": "Write title…",
"textColor": "#fff",
"fontSize": "37"
},
"innerBlocks": [],
"originalContent": "<p style=\"color:#fff;text-align:center\">Paragraph 1</p>"
}
],
"originalContent": "<div class=\"wp-block-cover-image has-background-dim has-undefined-content\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n <div class=\"wp-block-cover-image__inner-container\">\n \n </div>\n</div>"
}
]
18 changes: 15 additions & 3 deletions blocks/test/fixtures/core__cover-image.parsed.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,22 @@
"blockName": "core/cover-image",
"attrs": {
"url": "https://cldup.com/uuUqE_dXzy.jpg",
"dimRatio": 40
"id": 8398
},
"innerBlocks": [],
"innerHTML": "\n<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>\n"
"innerBlocks": [
{
"blockName": "core/paragraph",
"attrs": {
"align": "center",
"placeholder": "Write title…",
"textColor": "#fff",
"fontSize": 37
},
"innerBlocks": [],
"innerHTML": "\n <p style=\"color:#fff;text-align:center\">Paragraph 1</p>\n "
}
],
"innerHTML": "\n<div class=\"wp-block-cover-image has-background-dim has-undefined-content\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">\n <div class=\"wp-block-cover-image__inner-container\">\n \n </div>\n</div>\n"
},
{
"attrs": {},
Expand Down
10 changes: 7 additions & 3 deletions blocks/test/fixtures/core__cover-image.serialized.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<!-- wp: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} -->
<div class="wp-block-cover-image has-background-dim has-undefined-content" 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…","textColor":"#fff","fontSize":"37"} -->
<p style="color:#fff;text-align:center">Paragraph 1</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:cover-image -->
Loading

0 comments on commit 98b78d7

Please sign in to comment.