Blocks: Extract and factorize block alignment controls

WordPress · Jun 5, 2017 · 6dd1048 · 6dd1048
1 parent d9e9633
commit 6dd1048
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 185 deletions.
diff --git a/blocks/block-alignment-toolbar/index.js b/blocks/block-alignment-toolbar/index.js
@@ -0,0 +1,46 @@
+/**
+ * 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-full-width',
+		title: wp.i18n.__( 'Wide 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 ),
+					};
+				} )
+			}
+		/>
+	);
+}
diff --git a/blocks/block-controls/index.js b/blocks/block-controls/index.js
@@ -8,10 +8,11 @@ import { Fill } from 'react-slot-fill';
  */
 import { Toolbar } from 'components';
 
-export default function BlockControls( { controls } ) {
+export default function BlockControls( { controls, children } ) {
 	return (
 		<Fill name="Formatting.Toolbar">
 			<Toolbar controls={ controls } />
+			{ children }
 		</Fill>
 	);
 }
diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
@@ -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' ),
 
@@ -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 ) {
@@ -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…' ) }
@@ -98,8 +71,8 @@ registerBlockType( 'core/button', {
 						<IconButton icon="editor-break" type="submit" />
 					</form>
 				}
-			</span>
-		);
+			</span>,
+		];
 	},
 
 	save( { attributes } ) {

diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -9,23 +9,11 @@ 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;
 
-/**
- * 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 } );
-	};
-}
-
 registerBlockType( 'core/embed', {
 	title: wp.i18n.__( 'Embed' ),
 
@@ -38,33 +26,6 @@ registerBlockType( 'core/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 ) {
@@ -126,12 +87,26 @@ registerBlockType( 'core/embed', {
 
 		render() {
 			const { html, type, error, fetching } = this.state;
-			const { url, caption } = this.props.attributes;
+			const { url, caption, align } = 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 ( ! html ) {
-				return (
-					<Placeholder icon="cloud" label={ wp.i18n.__( 'Embed URL' ) } className="blocks-embed">
+				return [
+					controls,
+					<Placeholder key="placeholder" icon="cloud" label={ wp.i18n.__( 'Embed URL' ) } className="blocks-embed">
 						<form onSubmit={ this.doServerSideRender }>
 							<input
 								type="url"
@@ -148,8 +123,8 @@ registerBlockType( 'core/embed', {
 							}
 							{ error && <p className="components-placeholder__error">{ wp.i18n.__( 'Sorry, we could not embed that content.' ) }</p> }
 						</form>
-					</Placeholder>
-				);
+					</Placeholder>,
+				];
 			}
 
 			const domain = url.split( '/' )[ 2 ].replace( /^www\./, '' );
@@ -160,8 +135,9 @@ registerBlockType( 'core/embed', {
 				typeClassName = 'blocks-embed-video';
 			}
 
-			return (
-				<figure className={ typeClassName }>
+			return [
+				controls,
+				<figure key="embed" className={ typeClassName }>
 					{ ( cannotPreview ) ? (
 						<Placeholder icon="cloud" label={ wp.i18n.__( 'Embed URL' ) }>
 							<p className="components-placeholder__error"><a href={ url }>{ url }</a></p>
@@ -182,8 +158,8 @@ registerBlockType( 'core/embed', {
 							inlineToolbar
 						/>
 					) : null }
-				</figure>
-			);
+				</figure>,
+			];
 		}
 	},
 

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -10,23 +10,11 @@ import './style.scss';
 import { registerBlockType, query } from '../../api';
 import Editable from '../../editable';
 import MediaUploadButton from '../../media-upload-button';
+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 toggleAlignment( align ) {
-	return ( attributes, setAttributes ) => {
-		const nextAlign = attributes.align === align ? undefined : align;
-		setAttributes( { align: nextAlign } );
-	};
-}
-
 registerBlockType( 'core/image', {
 	title: wp.i18n.__( 'Image' ),
 
@@ -40,33 +28,6 @@ registerBlockType( 'core/image', {
 		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 ) {
@@ -75,13 +36,28 @@ registerBlockType( 'core/image', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus } ) {
-		const { url, alt, caption } = attributes;
+		const { url, alt, caption, align } = attributes;
+		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
+
+		const controls = (
+			focus && (
+				<BlockControls key="controls">
+					<BlockAlignmentToolbar
+						value={ align }
+						onChange={ updateAlignment }
+						controls={ [ 'left', 'center', 'right', 'wide' ] }
+					/>
+				</BlockControls>
+			)
+		);
 
 		if ( ! url ) {
 			const uploadButtonProps = { isLarge: true };
 			const setMediaURL = ( media ) => setAttributes( { url: media.url } );
-			return (
+			return [
+				controls,
 				<Placeholder
+					key="placeholder"
 					instructions={ wp.i18n.__( 'Drag image here or insert from media library' ) }
 					icon="format-image"
 					label={ wp.i18n.__( 'Image' ) }
@@ -94,17 +70,18 @@ registerBlockType( 'core/image', {
 					>
 						{ wp.i18n.__( 'Insert from Media Library' ) }
 					</MediaUploadButton>
-				</Placeholder>
-			);
+				</Placeholder>,
+			];
 		}
 
 		const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
 
 		// Disable reason: Each block can be selected by clicking on it
 
 		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
-		return (
-			<figure className="blocks-image">
+		return [
+			controls,
+			<figure key="image" className="blocks-image">
 				<img src={ url } alt={ alt } onClick={ setFocus } />
 				{ ( caption && caption.length > 0 ) || !! focus ? (
 					<Editable
@@ -118,8 +95,8 @@ registerBlockType( 'core/image', {
 						inlineToolbar
 					/>
 				) : null }
-			</figure>
-		);
+			</figure>,
+		];
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 	},