Skip to content

Commit

Permalink
Blocks: Extract and factorize block alignment controls
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad committed Jun 8, 2017
1 parent 321a8e8 commit 597af75
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 194 deletions.
50 changes: 50 additions & 0 deletions blocks/block-alignment-toolbar/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/**
* WordPress dependencies
*/
import { __ } from 'i18n';
import { Toolbar } from 'components';

const BLOCK_ALIGNMENTS_CONTROLS = {
left: {
icon: 'align-left',
title: __( 'Align left' ),
},
center: {
icon: 'align-center',
title: __( 'Align center' ),
},
right: {
icon: 'align-right',
title: __( 'Align right' ),
},
wide: {
icon: 'align-wide',
title: __( 'Wide width' ),
},
full: {
icon: 'align-full-width',
title: __( 'Full width' ),
},
};

const DEFAULT_CONTROLS = [ 'left', 'center', 'right' ];

export default function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS } ) {
function applyOrUnset( align ) {
return () => onChange( value === align ? undefined : align );
}

return (
<Toolbar
controls={
controls.map( control => {
return {
...BLOCK_ALIGNMENTS_CONTROLS[ control ],
isActive: value === control,
onClick: applyOrUnset( control ),
};
} )
}
/>
);
}
53 changes: 13 additions & 40 deletions blocks/library/button/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,11 @@ import { IconButton } from 'components';
import './style.scss';
import { registerBlockType, query } from '../../api';
import Editable from '../../editable';
import BlockControls from '../../block-controls';
import BlockAlignmentToolbar from '../../block-alignment-toolbar';

const { attr, children } = query;

/**
* Returns an attribute setter with behavior that if the target value is
* already the assigned attribute value, it will be set to undefined.
*
* @param {string} align Alignment value
* @return {Function} Attribute setter
*/
function applyOrUnset( align ) {
return ( attributes, setAttributes ) => {
const nextAlign = attributes.align === align ? undefined : align;
setAttributes( { align: nextAlign } );
};
}

registerBlockType( 'core/button', {
title: wp.i18n.__( 'Button' ),

Expand All @@ -39,27 +27,6 @@ registerBlockType( 'core/button', {
text: children( 'a' ),
},

controls: [
{
icon: 'align-left',
title: wp.i18n.__( 'Align left' ),
isActive: ( { align } ) => 'left' === align,
onClick: applyOrUnset( 'left' ),
},
{
icon: 'align-center',
title: wp.i18n.__( 'Align center' ),
isActive: ( { align } ) => 'center' === align,
onClick: applyOrUnset( 'center' ),
},
{
icon: 'align-right',
title: wp.i18n.__( 'Align right' ),
isActive: ( { align } ) => 'right' === align,
onClick: applyOrUnset( 'right' ),
},
],

getEditWrapperProps( attributes ) {
const { align } = attributes;
if ( 'left' === align || 'right' === align || 'center' === align ) {
Expand All @@ -68,10 +35,16 @@ registerBlockType( 'core/button', {
},

edit( { attributes, setAttributes, focus, setFocus } ) {
const { text, url, title } = attributes;
const { text, url, title, align } = attributes;
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );

return (
<span className="blocks-button" title={ title }>
return [
focus && (
<BlockControls key="controls">
<BlockAlignmentToolbar value={ align } onChange={ updateAlignment } />
</BlockControls>
),
<span key="button" className="blocks-button" title={ title }>
<Editable
tagName="span"
placeholder={ wp.i18n.__( 'Write label…' ) }
Expand All @@ -98,8 +71,8 @@ registerBlockType( 'core/button', {
<IconButton icon="editor-break" type="submit" />
</form>
}
</span>
);
</span>,
];
},

save( { attributes } ) {
Expand Down
85 changes: 31 additions & 54 deletions blocks/library/embed/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,13 @@ import { Button, Placeholder, HtmlEmbed, Spinner } from 'components';
import './style.scss';
import { registerBlockType, query } from '../../api';
import Editable from '../../editable';
import BlockControls from '../../block-controls';
import BlockAlignmentToolbar from '../../block-alignment-toolbar';

const { attr, children } = query;

const HOSTS_NO_PREVIEWS = [ 'facebook.com' ];

/**
* Returns an attribute setter with behavior that if the target value is
* already the assigned attribute value, it will be set to undefined.
*
* @param {string} align Alignment value
* @return {Function} Attribute setter
*/
function toggleAlignment( align ) {
return ( attributes, setAttributes ) => {
const nextAlign = attributes.align === align ? undefined : align;
setAttributes( { align: nextAlign } );
};
}

function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
return {
title: wp.i18n.__( title ),
Expand All @@ -47,33 +35,6 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
caption: children( 'figcaption' ),
},

controls: [
{
icon: 'align-left',
title: wp.i18n.__( 'Align left' ),
isActive: ( { align } ) => 'left' === align,
onClick: toggleAlignment( 'left' ),
},
{
icon: 'align-center',
title: wp.i18n.__( 'Align center' ),
isActive: ( { align } ) => ! align || 'center' === align,
onClick: toggleAlignment( 'center' ),
},
{
icon: 'align-right',
title: wp.i18n.__( 'Align right' ),
isActive: ( { align } ) => 'right' === align,
onClick: toggleAlignment( 'right' ),
},
{
icon: 'align-full-width',
title: wp.i18n.__( 'Wide width' ),
isActive: ( { align } ) => 'wide' === align,
onClick: toggleAlignment( 'wide' ),
},
],

getEditWrapperProps( attributes ) {
const { align } = attributes;
if ( 'left' === align || 'right' === align || 'wide' === align ) {
Expand Down Expand Up @@ -138,21 +99,36 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {

render() {
const { html, type, error, fetching } = this.state;
const { url, caption } = this.props.attributes;
const { align, url, caption } = this.props.attributes;
const { setAttributes, focus, setFocus } = this.props;
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );

const controls = (
focus && (
<BlockControls key="controls">
<BlockAlignmentToolbar
value={ align }
onChange={ updateAlignment }
controls={ [ 'left', 'center', 'right', 'wide' ] }
/>
</BlockControls>
)
);

if ( fetching ) {
return (
<div className="blocks-embed is-loading">
return [
controls,
<div key="loading" className="blocks-embed is-loading">
<Spinner />
<p>{ wp.i18n.__( 'Embedding…' ) }</p>
</div>
);
</div>,
];
}

if ( ! html ) {
return (
<Placeholder icon={ icon } label={ wp.i18n.sprintf( wp.i18n.__( '%s URL' ), title ) } className="blocks-embed">
return [
controls,
<Placeholder key="placeholder" icon={ icon } label={ wp.i18n.sprintf( wp.i18n.__( '%s URL' ), title ) } className="blocks-embed">
<form onSubmit={ this.doServerSideRender }>
<input
type="url"
Expand All @@ -167,8 +143,8 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
</Button>
{ error && <p className="components-placeholder__error">{ wp.i18n.__( 'Sorry, we could not embed that content.' ) }</p> }
</form>
</Placeholder>
);
</Placeholder>,
];
}

const parsedUrl = parse( url );
Expand All @@ -179,8 +155,9 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
typeClassName = 'blocks-embed-video';
}

return (
<figure className={ typeClassName }>
return [
controls,
<figure key="embed" className={ typeClassName }>
{ ( cannotPreview ) ? (
<Placeholder icon={ icon } label={ wp.i18n.__( 'Embed URL' ) }>
<p className="components-placeholder__error"><a href={ url }>{ url }</a></p>
Expand All @@ -201,8 +178,8 @@ function getEmbedBlockSettings( { title, icon, category = 'embed' } ) {
inlineToolbar
/>
) : null }
</figure>
);
</figure>,
];
}
},

Expand Down
Loading

0 comments on commit 597af75

Please sign in to comment.