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 Apr 19, 2018
1 parent a105592 commit f922df2
Show file tree
Hide file tree
Showing 21 changed files with 648 additions and 128 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, allowedBlocks, template } ) {
return <BlockList { ...{ layouts, allowedBlocks, template } } />;
}

InnerBlocks = withContext( 'BlockList' )()( InnerBlocks );
Expand Down
46 changes: 44 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,52 @@
}

&.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%;
}

.wp-block-cover-image__inner-container {
width: calc( 100% - 70px );
margin-left: auto;
margin-right: auto;
// avoid text align inherit from cover image align.
text-align: left;

.editor-inserter-with-shortcuts .components-icon-button,
.editor-block-list__empty-block-inserter .components-icon-button {
color: $white;
}
.editor-default-block-appender {
&:hover {
.components-icon-button {
color: $white;
}
}

.components-icon-button {
color: $light-gray-900;
}
}


.editor-block-list__insertion-point-inserter:before {
background: $white;
}

p.wp-block-subhead {
color: $light-gray-100;
}

.components-draggable__clone > .editor-block-list__block > .editor-block-list__block-draggable,
.editor-block-list__block-draggable > .editor-block-list__block-draggable-inner {
background-color: rgba( $white, 0.3 );
}
}
}
162 changes: 98 additions & 64 deletions blocks/library/cover-image/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { isEmpty } from 'lodash';
import { omit } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -17,32 +17,23 @@ 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,8 +88,8 @@ export const settings = {
}
},

edit( { attributes, setAttributes, isSelected, className } ) {
const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
edit( { attributes, setAttributes, className } ) {
const { align, url, 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 } );
Expand All @@ -107,7 +98,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 @@ -117,7 +107,6 @@ export const settings = {

const alignmentToolbar = (
<AlignmentToolbar
value={ contentAlign }
onChange={ ( nextAlign ) => {
setAttributes( { contentAlign: nextAlign } );
} }
Expand Down Expand Up @@ -172,16 +161,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 All @@ -201,74 +182,127 @@ 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 } ) }
inlineToolbar
<div className="wp-block-cover-image__inner-container">
<InnerBlocks
template={ [
[ 'core/paragraph', {
align: 'center',
fontSize: 'large',
placeholder: __( 'Write title…' ),
textColor: '#fff',
} ],
] }
allowedBlocks={ [ 'core/button', 'core/heading', 'core/paragraph', 'core/subhead' ] }
/>
) : null }
</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 }>
{ 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>
);
},

deprecated: [ {
attributes: {
...blockAttributes,
title: {
type: 'array',
source: 'children',
selector: 'h2',
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 && (
<p className="wp-block-cover-image-text">{ title }</p>
) }
</div>
);
},
},

save( { attributes, className } ) {
const { url, title, hasParallax, dimRatio, align } = attributes;
const style = backgroundImageStyles( url );
const classes = classnames(
className,
dimRatioToClass( dimRatio ),
{
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
migrate( attributes ) {
return [
omit( attributes, [ 'title', 'contentAlign' ] ),
[ createBlock( 'core/paragraph', {
content: attributes.title,
align: attributes.contentAlign,
fontSize: 'large',
placeholder: __( 'Write title…' ),
} ) ],
];
},
},
{
attributes: {
...blockAttributes,
title: {
type: 'array',
source: 'children',
selector: 'h2',
},
align ? `align${ align }` : null,
);
},

return (
<section className={ classes } style={ style }>
<h2>{ title }</h2>
</section>
);
save( { attributes, className } ) {
const { url, title, hasParallax, dimRatio, align } = attributes;
const style = backgroundImageStyles( url );
const classes = classnames(
className,
dimRatioToClass( dimRatio ),
{
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
},
align ? `align${ align }` : null,
);

return (
<section className={ classes } style={ style }>
<h2>{ title }</h2>
</section>
);
},
},
} ],
],
};

function dimRatioToClass( ratio ) {
Expand Down
14 changes: 14 additions & 0 deletions blocks/library/cover-image/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,18 @@
max-width: $content-width / 2;
width: 100%;
}

.wp-block-cover-image__inner-container {
width: calc( 100% - 70px );
color: $light-gray-100;
z-index: z-index( '.wp-block-cover-image__inner-container' );
p {
margin-top: 0;
margin-bottom: 0;
}
}

h1, h2, h3, h4, h5, h6, .wp-block-subhead {
color: inherit;
}
}
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,"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…","textColor":"#fff","fontSize":"large"} -->
<p style="color:#fff;text-align:center" class="is-large-text">Paragraph 1</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:core/cover-image -->
<!-- /wp:cover-image -->
27 changes: 21 additions & 6 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
},
"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": "large"
},
"innerBlocks": [],
"originalContent": "<p style=\"color:#fff;text-align:center\" class=\"is-large-text\">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 f922df2

Please sign in to comment.