Add reusable blocks

blocks/api/categories.js

@@ -17,6 +17,7 @@ const categories = [
 	{ slug: 'layout', title: __( 'Layout Blocks' ) },
 	{ slug: 'widgets', title: __( 'Widgets' ) },
 	{ slug: 'embed', title: __( 'Embed' ) },
+	{ slug: 'reusable-blocks', title: __( 'My Reusable Blocks' ) },
 ];
 
 /**

blocks/api/factory.js

@@ -11,6 +11,11 @@ import {
 	find,
 } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -116,3 +121,19 @@ export function switchToBlockType( block, name ) {
 		uid: index === firstSwitchedBlock ? block.uid : result.uid,
 	} ) );
 }
+
+/**
+ * Creates a new reusable block.
+ *
+ * @param {String} type       The type of the block referenced by the reusable block
+ * @param {Object} attributes The attributes of the block referenced by the reusable block
+ * @return {Object}           A reusable block object
+ */
+export function createReusableBlock( type, attributes ) {
+	return {
+		id: uuid(),
+		name: __( 'Untitled block' ),
+		type,
+		attributes,
+	};
+}

blocks/api/index.js

@@ -4,7 +4,7 @@
 import * as source from './source';
 
 export { source };
-export { createBlock, switchToBlockType } from './factory';
+export { createBlock, switchToBlockType, createReusableBlock } from './factory';
 export { default as parse, getSourcedAttributes } from './parser';
 export { default as pasteHandler } from './paste';
 export { default as serialize, getBlockDefaultClassname, getBlockContent } from './serializer';

blocks/api/test/factory.js

@@ -6,7 +6,7 @@ import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
-import { createBlock, switchToBlockType } from '../factory';
+import { createBlock, switchToBlockType, createReusableBlock } from '../factory';
 import { getBlockTypes, unregisterBlockType, setUnknownTypeHandlerName, registerBlockType } from '../registration';
 
 describe( 'block factory', () => {
@@ -460,4 +460,18 @@ describe( 'block factory', () => {
 			} );
 		} );
 	} );
+
+	describe( 'createReusableBlock', () => {
+		it( 'should create a reusable block', () => {
+			const type = 'core/test-block';
+			const attributes = { name: 'Big Bird' };
+
+			expect( createReusableBlock( type, attributes ) ).toMatchObject( {
+				id: expect.stringMatching( /\w{8}-\w{4}-\w{4}-\w{4}-\w{12}/ ),
+				name: 'Untitled block',
+				type,
+				attributes,
+			} );
+		} );
+	} );
 } );

blocks/inspector-controls/button-control/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, withInstanceId } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from './../base-control';
+import './style.scss';
+
+function ButtonControl( { instanceId, label, value, help, ...props } ) {
+	const id = 'inspector-button-control-' + instanceId;
+	return (
+		<BaseControl id={ id } label={ label } help={ help } className="blocks-button-control">
+			<Button { ...props } id={ id } isLarge className={ 'blocks-button-control__button' }>
+				{ value }
+			</Button>
+		</BaseControl>
+	);
+}
+
+export default withInstanceId( ButtonControl );

blocks/inspector-controls/button-control/style.scss

@@ -0,0 +1,3 @@
+.blocks-button-control .blocks-button-control__button {
+	margin-bottom: 0.5em;
+}

blocks/inspector-controls/index.js

@@ -7,6 +7,7 @@ import { Fill } from 'react-slot-fill';
  * Internal dependencies
  */
 import BaseControl from './base-control';
+import ButtonControl from './button-control';
 import CheckboxControl from './checkbox-control';
 import RadioControl from './radio-control';
 import RangeControl from './range-control';
@@ -24,6 +25,7 @@ export default function InspectorControls( { children } ) {
 }
 
 InspectorControls.BaseControl = BaseControl;
+InspectorControls.ButtonControl = ButtonControl;
 InspectorControls.CheckboxControl = CheckboxControl;
 InspectorControls.RadioControl = RadioControl;
 InspectorControls.RangeControl = RangeControl;

blocks/library/index.js

@@ -22,3 +22,4 @@ import './text-columns';
 import './verse';
 import './video';
 import './audio';
+import './reusable-block';

blocks/library/reusable-block/edit-panel/index.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function ReusableBlockEditPanel( props ) {
+	const { isEditing, name, isSaving, onEdit, onDetach, onChangeName, onSave, onCancel } = props;
+
+	return (
+		<div className="reusable-block-edit-panel">
+			{ ! isEditing && ! isSaving && [
+				<span key="info" className="reusable-block-edit-panel__info">
+					<b>{ name }</b>
+				</span>,
+				<Button
+					key="edit"
+					isLarge
+					className="reusable-block-edit-panel__button"
+					onClick={ onEdit }>
+					{ __( 'Edit' ) }
+				</Button>,
+				<Button
+					key="detach"
+					isLarge
+					className="reusable-block-edit-panel__button"
+					onClick={ onDetach }>
+					{ __( 'Detach' ) }
+				</Button>,
+			] }
+			{ ( isEditing || isSaving ) && [
+				<input
+					key="name"
+					type="text"
+					disabled={ isSaving }
+					className="reusable-block-edit-panel__name"
+					value={ name }
+					onChange={ ( event ) => onChangeName( event.target.value ) } />,
+				<Button
+					key="save"
+					isPrimary
+					isLarge
+					isIndicatingProgress={ isSaving }
+					disabled={ ! name || isSaving }
+					className="reusable-block-edit-panel__button"
+					onClick={ onSave }>
+					{ __( 'Save' ) }
+				</Button>,
+				<Button
+					key="cancel"
+					isLarge
+					disabled={ isSaving }
+					className="reusable-block-edit-panel__button"
+					onClick={ onCancel }>
+					{ __( 'Cancel' ) }
+				</Button>,
+			] }
+		</div>
+	);
+}
+
+export default ReusableBlockEditPanel;
+

blocks/library/reusable-block/edit-panel/style.scss

@@ -0,0 +1,32 @@
+.reusable-block-edit-panel {
+	align-items: center;
+	background: $light-gray-100;
+	color: $dark-gray-500;
+	display: flex;
+	font-family: $default-font;
+	font-size: $default-font-size;
+	justify-content: flex-end;
+	margin: $block-padding (-$block-padding) (-$block-padding);
+	padding: 10px $block-padding;
+
+	.reusable-block-edit-panel__spinner {
+		margin: 0 5px;
+	}
+
+	.reusable-block-edit-panel__info {
+		margin-right: auto;
+	}
+
+	.reusable-block-edit-panel__name {
+		flex-grow: 1;
+		font-size: 14px;
+		height: 30px;
+		margin: 0 auto 0 0;
+		max-width: 230px;
+	}
+
+	// Needs specificity to override the margin-bottom set by .button
+	.wp-core-ui & .reusable-block-edit-panel__button {
+		margin: 0 0 0 5px;
+	}
+}

blocks/library/reusable-block/index.js

@@ -0,0 +1,166 @@
+/**
+ * External dependencies
+ */
+import { pickBy, noop } from 'lodash';
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Placeholder, Spinner } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getBlockType, registerBlockType } from '../../api';
+import ReusableBlockEditPanel from './edit-panel';
+
+class ReusableBlockEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.startEditing = this.startEditing.bind( this );
+		this.stopEditing = this.stopEditing.bind( this );
+		this.setAttributes = this.setAttributes.bind( this );
+		this.setName = this.setName.bind( this );
+		this.updateReusableBlock = this.updateReusableBlock.bind( this );
+
+		this.state = {
+			isEditing: false,
+			name: null,
+			attributes: null,
+		};
+	}
+
+	componentDidMount() {
+		if ( ! this.props.reusableBlock ) {
+			this.props.fetchReusableBlock();
+		}
+	}
+
+	startEditing() {
+		this.setState( { isEditing: true } );
+	}
+
+	stopEditing() {
+		this.setState( {
+			isEditing: false,
+			name: null,
+			attributes: null,
+		} );
+	}
+
+	setAttributes( attributes ) {
+		this.setState( ( prevState ) => ( {
+			attributes: { ...prevState.attributes, ...attributes },
+		} ) );
+	}
+
+	setName( name ) {
+		this.setState( { name } );
+	}
+
+	updateReusableBlock() {
+		const { name, attributes } = this.state;
+
+		// Use pickBy to include only changed (assigned) values in payload
+		const payload = pickBy( {
+			name,
+			attributes,
+		} );
+
+		this.props.updateReusableBlock( payload );
+		this.props.saveReusableBlock();
+		this.stopEditing();
+	}
+
+	render() {
+		const { focus, reusableBlock, convertBlockToStatic } = this.props;
+		const { isEditing, name, attributes } = this.state;
+
+		if ( ! reusableBlock ) {
+			return <Placeholder><Spinner /></Placeholder>;
+		}
+
+		const blockType = getBlockType( reusableBlock.type );
+		const BlockEdit = blockType.edit || blockType.save;
+
+		return [
+			// We fake the block being read-only by wrapping it with an element that has pointer-events: none
+			<div key="edit" style={ { pointerEvents: isEditing ? 'auto' : 'none' } }>
+				<BlockEdit
+					{ ...this.props }
+					focus={ isEditing ? focus : null }
+					attributes={ { ...reusableBlock.attributes, ...attributes } }
+					setAttributes={ isEditing ? this.setAttributes : noop } />
+			</div>,
+			focus && (
+				<ReusableBlockEditPanel
+					key="panel"
+					isEditing={ isEditing }
+					name={ name !== null ? name : reusableBlock.name }
+					isSaving={ reusableBlock.isSaving }
+					onEdit={ this.startEditing }
+					onDetach={ convertBlockToStatic }
+					onChangeName={ this.setName }
+					onSave={ this.updateReusableBlock }
+					onCancel={ this.stopEditing } />
+			),
+		];
+	}
+}
+
+/**
+ * TODO:
+ * These should use selectors and action creators that we gather from context.
+ * OR this entire component should move to `editor`, I can't decide.
+ */
+const ConnectedReusableBlockEdit = connect(
+	( state, ownProps ) => ( {
+		reusableBlock: state.reusableBlocks[ ownProps.attributes.ref ],
+	} ),
+	( dispatch, ownProps ) => ( {
+		fetchReusableBlock() {
+			dispatch( {
+				type: 'FETCH_REUSABLE_BLOCKS',
+				id: ownProps.attributes.ref,
+			} );
+		},
+		updateReusableBlock( reusableBlock ) {
+			dispatch( {
+				type: 'UPDATE_REUSABLE_BLOCK',
+				id: ownProps.attributes.ref,
+				reusableBlock,
+			} );
+		},
+		saveReusableBlock() {
+			dispatch( {
+				type: 'SAVE_REUSABLE_BLOCK',
+				id: ownProps.attributes.ref,
+			} );
+		},
+		convertBlockToStatic() {
+			dispatch( {
+				type: 'CONVERT_BLOCK_TO_STATIC',
+				uid: ownProps.id,
+			} );
+		},
+	} )
+)( ReusableBlockEdit );
+
+registerBlockType( 'core/reusable-block', {
+	title: __( 'Reusable Block' ),
+	category: 'reusable-blocks',
+	isPrivate: true,
+
+	attributes: {
+		ref: {
+			type: 'string',
+		},
+	},
+
+	edit: ConnectedReusableBlockEdit,
+	save: () => null,
+} );