From 0b124ebb99b7ed199e088478d5d6e913131c99db Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 15 Dec 2017 17:13:19 +1100
Subject: [PATCH 1/5] Refactor Reusable Blocks controller to use
 WP_REST_Posts_Controller

We can remove a lot of code by subclassing WP_REST_Posts_Controller,
which gives us methods for creating, reading, updating and deleting
posts (in this case, blocks) for free.

This also adds support for DELETEing a block to the API, and renames the
'name' field to 'title'.
---
 blocks/api/factory.js                         |   2 +-
 blocks/api/test/factory.js                    |   2 +-
 blocks/library/block/edit-panel/index.js      |  14 +-
 blocks/library/block/edit-panel/style.scss    |   2 +-
 blocks/library/block/index.js                 |  20 +-
 editor/components/inserter/menu.js            |   2 +-
 editor/store/effects.js                       |  14 +-
 editor/store/test/effects.js                  |  24 +-
 lib/class-wp-rest-blocks-controller.php       | 116 +++++++
 ...ass-wp-rest-reusable-blocks-controller.php | 306 ------------------
 lib/client-assets.php                         |   2 +-
 lib/load.php                                  |   2 +-
 lib/register.php                              |  22 +-
 phpunit/class-rest-blocks-controller-test.php | 206 ++++++++++++
 ...s-rest-reusable-blocks-controller-test.php | 270 ----------------
 15 files changed, 373 insertions(+), 631 deletions(-)
 create mode 100644 lib/class-wp-rest-blocks-controller.php
 delete mode 100644 lib/class-wp-rest-reusable-blocks-controller.php
 create mode 100644 phpunit/class-rest-blocks-controller-test.php
 delete mode 100644 phpunit/class-rest-reusable-blocks-controller-test.php

diff --git a/blocks/api/factory.js b/blocks/api/factory.js
index 60dfc8ce1bf7f3..f2cff80082af76 100644
--- a/blocks/api/factory.js
+++ b/blocks/api/factory.js
@@ -224,7 +224,7 @@ export function createReusableBlock( type, attributes ) {
 	return {
 		id: +uniqueId(), // Temorary id replaced when the block is saved server side
 		isTemporary: true,
-		name: __( 'Untitled block' ),
+		title: __( 'Untitled block' ),
 		type,
 		attributes,
 	};
diff --git a/blocks/api/test/factory.js b/blocks/api/test/factory.js
index 0bbb4837c69105..9932007d88f82b 100644
--- a/blocks/api/test/factory.js
+++ b/blocks/api/test/factory.js
@@ -624,7 +624,7 @@ describe( 'block factory', () => {
 
 			expect( createReusableBlock( type, attributes ) ).toMatchObject( {
 				id: expect.any( Number ),
-				name: 'Untitled block',
+				title: 'Untitled block',
 				type,
 				attributes,
 			} );
diff --git a/blocks/library/block/edit-panel/index.js b/blocks/library/block/edit-panel/index.js
index 793ef1f932ca0e..357c9dd683aa82 100644
--- a/blocks/library/block/edit-panel/index.js
+++ b/blocks/library/block/edit-panel/index.js
@@ -10,13 +10,13 @@ import { __ } from '@wordpress/i18n';
 import './style.scss';
 
 function ReusableBlockEditPanel( props ) {
-	const { isEditing, name, isSaving, onEdit, onDetach, onChangeName, onSave, onCancel } = props;
+	const { isEditing, title, isSaving, onEdit, onDetach, onChangeTitle, onSave, onCancel } = props;
 
 	return (
 		<div className="reusable-block-edit-panel">
 			{ ! isEditing && ! isSaving && [
 				<span key="info" className="reusable-block-edit-panel__info">
-					<b>{ name }</b>
+					<b>{ title }</b>
 				</span>,
 				<Button
 					key="edit"
@@ -35,18 +35,18 @@ function ReusableBlockEditPanel( props ) {
 			] }
 			{ ( isEditing || isSaving ) && [
 				<input
-					key="name"
+					key="title"
 					type="text"
 					disabled={ isSaving }
-					className="reusable-block-edit-panel__name"
-					value={ name }
-					onChange={ ( event ) => onChangeName( event.target.value ) } />,
+					className="reusable-block-edit-panel__title"
+					value={ title }
+					onChange={ ( event ) => onChangeTitle( event.target.value ) } />,
 				<Button
 					key="save"
 					isPrimary
 					isLarge
 					isBusy={ isSaving }
-					disabled={ ! name || isSaving }
+					disabled={ ! title || isSaving }
 					className="reusable-block-edit-panel__button"
 					onClick={ onSave }>
 					{ __( 'Save' ) }
diff --git a/blocks/library/block/edit-panel/style.scss b/blocks/library/block/edit-panel/style.scss
index 4baef7e219d37d..3f8259415e8dc9 100644
--- a/blocks/library/block/edit-panel/style.scss
+++ b/blocks/library/block/edit-panel/style.scss
@@ -17,7 +17,7 @@
 		margin-right: auto;
 	}
 
-	.reusable-block-edit-panel__name {
+	.reusable-block-edit-panel__title {
 		flex-grow: 1;
 		font-size: 14px;
 		height: 30px;
diff --git a/blocks/library/block/index.js b/blocks/library/block/index.js
index 0988ca56ab53b9..82e655095f63c8 100644
--- a/blocks/library/block/index.js
+++ b/blocks/library/block/index.js
@@ -25,12 +25,12 @@ class ReusableBlockEdit extends Component {
 		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.setTitle = this.setTitle.bind( this );
 		this.updateReusableBlock = this.updateReusableBlock.bind( this );
 
 		this.state = {
 			isEditing: false,
-			name: null,
+			title: null,
 			attributes: null,
 		};
 	}
@@ -48,7 +48,7 @@ class ReusableBlockEdit extends Component {
 	stopEditing() {
 		this.setState( {
 			isEditing: false,
-			name: null,
+			title: null,
 			attributes: null,
 		} );
 	}
@@ -59,16 +59,16 @@ class ReusableBlockEdit extends Component {
 		} ) );
 	}
 
-	setName( name ) {
-		this.setState( { name } );
+	setTitle( title ) {
+		this.setState( { title } );
 	}
 
 	updateReusableBlock() {
-		const { name, attributes } = this.state;
+		const { title, attributes } = this.state;
 
 		// Use pickBy to include only changed (assigned) values in payload
 		const payload = pickBy( {
-			name,
+			title,
 			attributes,
 		} );
 
@@ -79,7 +79,7 @@ class ReusableBlockEdit extends Component {
 
 	render() {
 		const { focus, reusableBlock, isSaving, convertBlockToStatic } = this.props;
-		const { isEditing, name, attributes } = this.state;
+		const { isEditing, title, attributes } = this.state;
 
 		if ( ! reusableBlock ) {
 			return <Placeholder><Spinner /></Placeholder>;
@@ -102,11 +102,11 @@ class ReusableBlockEdit extends Component {
 				<ReusableBlockEditPanel
 					key="panel"
 					isEditing={ isEditing }
-					name={ name !== null ? name : reusableBlock.name }
+					title={ title !== null ? title : reusableBlock.title }
 					isSaving={ isSaving }
 					onEdit={ this.startEditing }
 					onDetach={ convertBlockToStatic }
-					onChangeName={ this.setName }
+					onChangeTitle={ this.setTitle }
 					onSave={ this.updateReusableBlock }
 					onCancel={ this.stopEditing }
 				/>
diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
index 231fbf6762b951..e151b56449d95b 100644
--- a/editor/components/inserter/menu.js
+++ b/editor/components/inserter/menu.js
@@ -149,7 +149,7 @@ export class InserterMenu extends Component {
 			initialAttributes: {
 				ref: reusableBlock.id,
 			},
-			title: reusableBlock.name,
+			title: reusableBlock.title,
 			icon: 'layout',
 			category: 'reusable-blocks',
 		} ) );
diff --git a/editor/store/effects.js b/editor/store/effects.js
index 96046d03034f3f..c6777602c4f244 100644
--- a/editor/store/effects.js
+++ b/editor/store/effects.js
@@ -321,18 +321,18 @@ export default {
 
 		let result;
 		if ( id ) {
-			result = new wp.api.models.ReusableBlocks( { id } ).fetch();
+			result = new wp.api.models.Blocks( { id } ).fetch();
 		} else {
-			result = new wp.api.collections.ReusableBlocks().fetch();
+			result = new wp.api.collections.Blocks().fetch();
 		}
 
 		result.then(
 			( reusableBlockOrBlocks ) => {
 				dispatch( {
 					type: 'FETCH_REUSABLE_BLOCKS_SUCCESS',
-					reusableBlocks: castArray( reusableBlockOrBlocks ).map( ( { id: itemId, name, content } ) => {
+					reusableBlocks: castArray( reusableBlockOrBlocks ).map( ( { id: itemId, title, content } ) => {
 						const [ { name: type, attributes } ] = parse( content );
-						return { id: itemId, name, type, attributes };
+						return { id: itemId, title, type, attributes };
 					} ),
 				} );
 			},
@@ -351,10 +351,10 @@ export default {
 		const { id } = action;
 		const { getState, dispatch } = store;
 
-		const { name, type, attributes, isTemporary } = getReusableBlock( getState(), id );
+		const { title, type, attributes, isTemporary } = getReusableBlock( getState(), id );
 		const content = serialize( createBlock( type, attributes ) );
-		const requestData = isTemporary ? { name, content } : { id, name, content };
-		new wp.api.models.ReusableBlocks( requestData ).save().then(
+		const requestData = isTemporary ? { title, content } : { id, title, content };
+		new wp.api.models.Blocks( requestData ).save().then(
 			( updatedReusableBlock ) => {
 				dispatch( {
 					type: 'SAVE_REUSABLE_BLOCK_SUCCESS',
diff --git a/editor/store/test/effects.js b/editor/store/test/effects.js
index a2fed5952e5615..95ec8b946cbc7f 100644
--- a/editor/store/test/effects.js
+++ b/editor/store/test/effects.js
@@ -501,12 +501,12 @@ describe( 'effects', () => {
 				const promise = Promise.resolve( [
 					{
 						id: 'a9691cf9-ecaa-42bd-a9ca-49587e817647',
-						name: 'My cool block',
+						title: 'My cool block',
 						content: '<!-- wp:core/test-block {"name":"Big Bird"} /-->',
 					},
 				] );
 
-				set( global, 'wp.api.collections.ReusableBlocks', class {
+				set( global, 'wp.api.collections.Blocks', class {
 					fetch() {
 						return promise;
 					}
@@ -523,7 +523,7 @@ describe( 'effects', () => {
 						reusableBlocks: [
 							{
 								id: 'a9691cf9-ecaa-42bd-a9ca-49587e817647',
-								name: 'My cool block',
+								title: 'My cool block',
 								type: 'core/test-block',
 								attributes: {
 									name: 'Big Bird',
@@ -540,11 +540,11 @@ describe( 'effects', () => {
 				let modelAttributes;
 				const promise = Promise.resolve( {
 					id,
-					name: 'My cool block',
+					title: 'My cool block',
 					content: '<!-- wp:core/test-block {"name":"Big Bird"} /-->',
 				} );
 
-				set( global, 'wp.api.models.ReusableBlocks', class {
+				set( global, 'wp.api.models.Blocks', class {
 					constructor( attributes ) {
 						modelAttributes = attributes;
 					}
@@ -566,7 +566,7 @@ describe( 'effects', () => {
 						reusableBlocks: [
 							{
 								id: 'a9691cf9-ecaa-42bd-a9ca-49587e817647',
-								name: 'My cool block',
+								title: 'My cool block',
 								type: 'core/test-block',
 								attributes: {
 									name: 'Big Bird',
@@ -580,7 +580,7 @@ describe( 'effects', () => {
 			it( 'should handle an API error', () => {
 				const promise = Promise.reject( {} );
 
-				set( global, 'wp.api.collections.ReusableBlocks', class {
+				set( global, 'wp.api.collections.Blocks', class {
 					fetch() {
 						return promise;
 					}
@@ -610,7 +610,7 @@ describe( 'effects', () => {
 				let modelAttributes;
 				const promise = Promise.resolve( { id: 3 } );
 
-				set( global, 'wp.api.models.ReusableBlocks', class {
+				set( global, 'wp.api.models.Blocks', class {
 					constructor( attributes ) {
 						modelAttributes = attributes;
 					}
@@ -622,7 +622,7 @@ describe( 'effects', () => {
 
 				const reusableBlock = {
 					id: '69f00b2b-ea09-4d5c-a98f-0b1112d7d400',
-					name: 'My cool block',
+					title: 'My cool block',
 					type: 'core/test-block',
 					attributes: {
 						name: 'Big Bird',
@@ -640,7 +640,7 @@ describe( 'effects', () => {
 
 				expect( modelAttributes ).toEqual( {
 					id: '69f00b2b-ea09-4d5c-a98f-0b1112d7d400',
-					name: 'My cool block',
+					title: 'My cool block',
 					content: '<!-- wp:test-block {\"name\":\"Big Bird\"} /-->',
 				} );
 				return promise.then( () => {
@@ -655,7 +655,7 @@ describe( 'effects', () => {
 			it( 'should handle an API error', () => {
 				const promise = Promise.reject( {} );
 
-				set( global, 'wp.api.models.ReusableBlocks', class {
+				set( global, 'wp.api.models.Blocks', class {
 					save() {
 						return promise;
 					}
@@ -753,7 +753,7 @@ describe( 'effects', () => {
 					updateReusableBlock( 1, {
 						id: 1,
 						isTemporary: true,
-						name: 'Untitled block',
+						title: 'Untitled block',
 						type: staticBlock.name,
 						attributes: staticBlock.attributes,
 					} )
diff --git a/lib/class-wp-rest-blocks-controller.php b/lib/class-wp-rest-blocks-controller.php
new file mode 100644
index 00000000000000..2b19e2a5f0b0e7
--- /dev/null
+++ b/lib/class-wp-rest-blocks-controller.php
@@ -0,0 +1,116 @@
+<?php
+/**
+ * Reusable Blocks REST API: WP_REST_Blocks_Controller class
+ *
+ * @package gutenberg
+ * @since 0.10.0
+ */
+
+/**
+ * Controller which provides a REST endpoint for Gutenberg to read, create,
+ * edit and delete reusable blocks. Blocks are stored as posts with the
+ * wp_block post type.
+ *
+ * @since 0.10.0
+ *
+ * @see WP_REST_Controller
+ */
+class WP_REST_Blocks_Controller extends WP_REST_Posts_Controller {
+	/**
+	 * Given an update or create request, build the post object that is saved to
+	 * the database.
+	 *
+	 * @since 1.10.0
+	 *
+	 * @param WP_REST_Request $request Request object.
+	 * @return stdClass|WP_Error Post object or WP_Error.
+	 */
+	protected function prepare_item_for_database( $request ) {
+		$prepared_post = new stdClass;
+
+		if ( isset( $request['id'] ) ) {
+			$existing_post = $this->get_post( $request['id'] );
+			if ( is_wp_error( $existing_post ) ) {
+				return $existing_post;
+			}
+
+			$prepared_post->ID = $existing_post->ID;
+		}
+
+		$prepared_post->post_title   = $request['title'];
+		$prepared_post->post_content = $request['content'];
+		$prepared_post->post_type    = $this->post_type;
+		$prepared_post->post_status  = 'publish';
+
+		return apply_filters( "rest_pre_insert_{$this->post_type}", $prepared_post, $request );
+	}
+
+	/**
+	 * Given a post from the database, build the array that is returned from an
+	 * API response.
+	 *
+	 * @since 1.10.0
+	 *
+	 * @param WP_Post         $post    Post object.
+	 * @param WP_REST_Request $request Request object.
+	 * @return WP_REST_Response Response object.
+	 */
+	public function prepare_item_for_response( $post, $request ) {
+		$data = array(
+			'id'      => $post->ID,
+			'title'   => $post->post_title,
+			'content' => $post->post_content,
+		);
+
+		$response = rest_ensure_response( $data );
+
+		return apply_filters( "rest_prepare_{$this->post_type}", $response, $post, $request );
+	}
+
+	/**
+	 * Handle a DELETE request.
+	 *
+	 * @since 1.10.0
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
+	 */
+	public function delete_item( $request ) {
+		// Always hard-delete a block.
+		$request->set_param( 'force', true );
+
+		return parent::delete_item( $request );
+	}
+
+	/**
+	 * Builds the block's schema, conforming to JSON Schema.
+	 *
+	 * @since 1.10.0
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		return array(
+			'$schema'    => 'http://json-schema.org/schema#',
+			'title'      => $this->post_type,
+			'type'       => 'object',
+			'properties' => array(
+				'id'      => array(
+					'description' => __( 'Unique identifier for the block.', 'gutenberg' ),
+					'type'        => 'integer',
+					'readonly'    => true,
+				),
+				'title'   => array(
+					'description' => __( 'The block\'s title.', 'gutenberg' ),
+					'type'        => 'string',
+					'required'    => true,
+				),
+				'content' => array(
+					'description' => __( 'The block\'s HTML content.', 'gutenberg' ),
+					'type'        => 'string',
+					'required'    => true,
+				),
+			),
+		);
+	}
+}
diff --git a/lib/class-wp-rest-reusable-blocks-controller.php b/lib/class-wp-rest-reusable-blocks-controller.php
deleted file mode 100644
index 17b6d80054d73d..00000000000000
--- a/lib/class-wp-rest-reusable-blocks-controller.php
+++ /dev/null
@@ -1,306 +0,0 @@
-<?php
-/**
- * Reusable Blocks REST API: WP_REST_Reusable_Blocks_Controller class
- *
- * @package gutenberg
- * @since 0.10.0
- */
-
-/**
- * Controller which provides a REST endpoint for Gutenberg to read, create and edit reusable blocks. Reusable blocks are
- * stored as posts with a custom post type.
- *
- * @since 0.10.0
- *
- * @see WP_REST_Controller
- */
-class WP_REST_Reusable_Blocks_Controller extends WP_REST_Controller {
-	/**
-	 * Constructs the controller.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 */
-	public function __construct() {
-		// @codingStandardsIgnoreLine - PHPCS mistakes $this->namespace for the namespace keyword
-		$this->namespace = 'gutenberg/v1';
-		$this->rest_base = 'reusable-blocks';
-	}
-
-	/**
-	 * Registers the necessary REST API routes.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 */
-	public function register_routes() {
-		// @codingStandardsIgnoreLine - PHPCS mistakes $this->namespace for the namespace keyword
-		$namespace = $this->namespace;
-
-		register_rest_route( $namespace, '/' . $this->rest_base, array(
-			array(
-				'methods'             => WP_REST_Server::READABLE,
-				'callback'            => array( $this, 'get_items' ),
-				'permission_callback' => array( $this, 'get_items_permissions_check' ),
-			),
-			array(
-				'methods'             => WP_REST_Server::CREATABLE,
-				'callback'            => array( $this, 'save_item' ),
-				'permission_callback' => array( $this, 'save_item_permissions_check' ),
-			),
-			'schema' => array( $this, 'get_public_item_schema' ),
-		) );
-
-		register_rest_route( $namespace, '/' . $this->rest_base . '/(?P<id>[\w-]+)', array(
-			array(
-				'methods'             => WP_REST_Server::READABLE,
-				'callback'            => array( $this, 'get_item' ),
-				'permission_callback' => array( $this, 'get_item_permissions_check' ),
-			),
-			array(
-				'methods'             => WP_REST_Server::EDITABLE,
-				'callback'            => array( $this, 'save_item' ),
-				'permission_callback' => array( $this, 'save_item_permissions_check' ),
-			),
-			'schema' => array( $this, 'get_public_item_schema' ),
-		) );
-	}
-
-	/**
-	 * Checks if a given request has access to read reusable blocks.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 *
-	 * @param  WP_REST_Request $request Full details about the request.
-	 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
-	 */
-	public function get_items_permissions_check( $request ) {
-		if ( ! current_user_can( 'edit_posts' ) ) {
-			return new WP_Error( 'gutenberg_reusable_block_cannot_read', __( 'Sorry, you are not allowed to read reusable blocks as this user.', 'gutenberg' ), array(
-				'status' => rest_authorization_required_code(),
-			) );
-		}
-
-		return true;
-	}
-
-	/**
-	 * Retrieves a collection of reusable blocks.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
-	 */
-	public function get_items( $request ) {
-		$reusable_blocks = get_posts( array(
-			'post_type' => 'wp_block',
-		) );
-
-		$collection = array();
-
-		foreach ( $reusable_blocks as $reusable_block ) {
-			$response     = $this->prepare_item_for_response( $reusable_block, $request );
-			$collection[] = $this->prepare_response_for_collection( $response );
-		}
-
-		return rest_ensure_response( $collection );
-	}
-
-	/**
-	 * Checks if a given request has access to read a reusable block.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 *
-	 * @param  WP_REST_Request $request Full details about the request.
-	 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
-	 */
-	public function get_item_permissions_check( $request ) {
-		if ( ! current_user_can( 'edit_posts' ) ) {
-			return new WP_Error( 'gutenberg_reusable_block_cannot_read', __( 'Sorry, you are not allowed to read reusable blocks as this user.', 'gutenberg' ), array(
-				'status' => rest_authorization_required_code(),
-			) );
-		}
-
-		return true;
-	}
-
-	/**
-	 * Retrieves a single reusable block.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
-	 */
-	public function get_item( $request ) {
-		$id             = $request['id'];
-		$reusable_block = get_post( $id );
-		if ( ! $reusable_block ) {
-			return new WP_Error( 'gutenberg_reusable_block_not_found', __( 'No reusable block with that ID found.', 'gutenberg' ), array(
-				'status' => 404,
-			) );
-		}
-
-		return $this->prepare_item_for_response( $reusable_block, $request );
-	}
-
-	/**
-	 * Checks if a given request has access to update/create a reusable block.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return true|WP_Error True if the request has access to update the item, WP_Error object otherwise.
-	 */
-	public function save_item_permissions_check( $request ) {
-		if ( ! current_user_can( 'edit_posts' ) ) {
-			return new WP_Error( 'gutenberg_reusable_block_cannot_edit', __( 'Sorry, you are not allowed to edit reusable blocks as this user.', 'gutenberg' ), array(
-				'status' => rest_authorization_required_code(),
-			) );
-		}
-
-		return true;
-	}
-
-	/**
-	 * Updates a single reusable block or creates a new one if no id provided.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
-	 */
-	public function save_item( $request ) {
-		$reusable_block = $this->prepare_item_for_database( $request );
-		if ( is_wp_error( $reusable_block ) ) {
-			return $reusable_block;
-		}
-
-		// wp_insert_post will unslash its input, so we have to slash it first.
-		$post_id = wp_insert_post( wp_slash( (array) $reusable_block ), true );
-		if ( is_wp_error( $post_id ) ) {
-			return $post_id;
-		}
-
-		$reusable_block = get_post( $post_id );
-
-		return $this->prepare_item_for_response( $reusable_block, $request );
-	}
-
-	/**
-	 * Prepares a single reusable block for update.
-	 *
-	 * @since 0.10.0
-	 * @access protected
-	 *
-	 * @param WP_REST_Request $request Request object.
-	 * @return stdClass|WP_Error Object suitable for passing to wp_insert_post, or WP_Error.
-	 */
-	protected function prepare_item_for_database( $request ) {
-		$prepared_reusable_block = new stdClass();
-
-		$existing_reusable_block = get_post( $request['id'] );
-		if ( $existing_reusable_block ) {
-			$prepared_reusable_block->ID = $existing_reusable_block->ID;
-		}
-
-		$prepared_reusable_block->post_type   = 'wp_block';
-		$prepared_reusable_block->post_status = 'publish';
-
-		// Name.
-		if ( isset( $request['name'] ) && is_string( $request['name'] ) ) {
-			$prepared_reusable_block->post_title = $request['name'];
-		} else {
-			return new WP_Error( 'gutenberg_reusable_block_invalid_field', __( 'Invalid reusable block name.', 'gutenberg' ), array(
-				'status' => 400,
-			) );
-		}
-
-		// Content.
-		if ( isset( $request['content'] ) && is_string( $request['content'] ) ) {
-			$prepared_reusable_block->post_content = $request['content'];
-		} else {
-			return new WP_Error( 'gutenberg_reusable_block_invalid_field', __( 'Invalid reusable block content.', 'gutenberg' ), array(
-				'status' => 400,
-			) );
-		}
-
-		return $prepared_reusable_block;
-	}
-
-	/**
-	 * Prepares a single reusable block output for response.
-	 *
-	 * @since 0.10.0
-	 * @access protected
-	 *
-	 * @param WP_Post         $reusable_block The reusable block.
-	 * @param WP_REST_Request $request Request object.
-	 * @return WP_REST_Response Response object.
-	 */
-	public function prepare_item_for_response( $reusable_block, $request ) {
-		$data = array(
-			'id'      => $reusable_block->ID,
-			'name'    => $reusable_block->post_title,
-			'content' => $reusable_block->post_content,
-		);
-
-		return rest_ensure_response( $data );
-	}
-
-	/**
-	 * Prepares a response for insertion into a collection.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 *
-	 * @param WP_REST_Response $response Response object.
-	 * @return array|mixed Response data, ready for insertion into collection data.
-	 */
-	public function prepare_response_for_collection( $response ) {
-		return (array) $response->get_data();
-	}
-
-	/**
-	 * Retrieves a reusable block's schema, conforming to JSON Schema.
-	 *
-	 * @since 0.10.0
-	 * @access public
-	 *
-	 * @return array Item schema data.
-	 */
-	public function get_item_schema() {
-		return array(
-			'$schema'    => 'http://json-schema.org/schema#',
-			'title'      => 'reusable-block',
-			'type'       => 'object',
-			'properties' => array(
-				'id'      => array(
-					'description' => __( 'ID that identifies this reusable block.', 'gutenberg' ),
-					'type'        => 'string',
-					'context'     => array( 'view', 'edit' ),
-					'readonly'    => true,
-				),
-				'name'    => array(
-					'description' => __( 'Name that identifies this reusable block', 'gutenberg' ),
-					'type'        => 'string',
-					'context'     => array( 'view', 'edit' ),
-					'required'    => true,
-				),
-				'content' => array(
-					'description' => __( 'The block\'s HTML content.', 'gutenberg' ),
-					'type'        => 'object',
-					'context'     => array( 'view', 'edit' ),
-					'required'    => true,
-				),
-			),
-		);
-	}
-}
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 31507acc2d493f..8beeaaf5d7f2d4 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -829,7 +829,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	$script  = '( function() {';
 	$script .= sprintf( 'var editorSettings = %s;', wp_json_encode( $editor_settings ) );
 	$script .= <<<JS
-		window._wpLoadGutenbergEditor = Promise.all( [ wp.api.init(), wp.api.init( { versionString: 'gutenberg/v1/' } ) ] ).then( function() {
+		window._wpLoadGutenbergEditor = wp.api.init().then( function() {
 			return wp.editor.createEditorInstance( 'editor', window._wpGutenbergPost, editorSettings );
 		} );
 JS;
diff --git a/lib/load.php b/lib/load.php
index f50f03990b50dd..0da31fddf577cc 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -12,7 +12,7 @@
 require dirname( __FILE__ ) . '/meta-box-partial-page.php';
 require dirname( __FILE__ ) . '/class-wp-block-type.php';
 require dirname( __FILE__ ) . '/class-wp-block-type-registry.php';
-require dirname( __FILE__ ) . '/class-wp-rest-reusable-blocks-controller.php';
+require dirname( __FILE__ ) . '/class-wp-rest-blocks-controller.php';
 require dirname( __FILE__ ) . '/blocks.php';
 require dirname( __FILE__ ) . '/client-assets.php';
 require dirname( __FILE__ ) . '/compat.php';
diff --git a/lib/register.php b/lib/register.php
index a8bc99b75bc8c5..94fa4ed1779bb6 100644
--- a/lib/register.php
+++ b/lib/register.php
@@ -394,23 +394,19 @@ function gutenberg_add_gutenberg_post_state( $post_states, $post ) {
  */
 function gutenberg_register_post_types() {
 	register_post_type( 'wp_block', array(
-		'public' => false,
+		'labels'                => array(
+			'name'          => 'Blocks',
+			'singular_name' => 'Block',
+		),
+		'public'                => false,
+		'capability_type'       => 'post',
+		'show_in_rest'          => true,
+		'rest_base'             => 'blocks',
+		'rest_controller_class' => 'WP_REST_Blocks_Controller',
 	) );
 }
 add_action( 'init', 'gutenberg_register_post_types' );
 
-/**
- * Registers the REST API routes needed by the Gutenberg editor.
- *
- * @since 0.10.0
- */
-function gutenberg_register_rest_routes() {
-	$controller = new WP_REST_Reusable_Blocks_Controller();
-	$controller->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_rest_routes' );
-
-
 /**
  * Gets revisions details for the selected post.
  *
diff --git a/phpunit/class-rest-blocks-controller-test.php b/phpunit/class-rest-blocks-controller-test.php
new file mode 100644
index 00000000000000..bf317ce670bd93
--- /dev/null
+++ b/phpunit/class-rest-blocks-controller-test.php
@@ -0,0 +1,206 @@
+<?php
+/**
+ * WP_REST_Blocks_Controller tests
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Tests for WP_REST_Blocks_Controller.
+ */
+class REST_Blocks_Controller_Test extends WP_Test_REST_Controller_Testcase {
+
+	/**
+	 * Our fake block's post ID.
+	 *
+	 * @var int
+	 */
+	protected static $post_id;
+
+	/**
+	 * Our fake user's ID.
+	 *
+	 * @var int
+	 */
+	protected static $user_id;
+
+	/**
+	 * Create fake data before our tests run.
+	 *
+	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
+	 */
+	public static function wpSetUpBeforeClass( $factory ) {
+		self::$post_id = wp_insert_post(
+			array(
+				'post_type'    => 'wp_block',
+				'post_status'  => 'publish',
+				'post_title'   => 'My cool block',
+				'post_content' => '<!-- wp:core/paragraph --><p>Hello!</p><!-- /wp:core/paragraph -->',
+			)
+		);
+
+		self::$user_id = $factory->user->create(
+			array(
+				'role' => 'editor',
+			)
+		);
+	}
+
+	/**
+	 * Delete our fake data after our tests run.
+	 */
+	public static function wpTearDownAfterClass() {
+		wp_delete_post( self::$post_id );
+
+		self::delete_user( self::$user_id );
+	}
+
+	/**
+	 * Check that our routes get set up properly.
+	 */
+	public function test_register_routes() {
+		$routes = $this->server->get_routes();
+
+		$this->assertArrayHasKey( '/wp/v2/blocks', $routes );
+		$this->assertCount( 2, $routes['/wp/v2/blocks'] );
+		$this->assertArrayHasKey( '/wp/v2/blocks/(?P<id>[\d]+)', $routes );
+		$this->assertCount( 3, $routes['/wp/v2/blocks/(?P<id>[\d]+)'] );
+	}
+
+	/**
+	 * Check that we can GET a collection of blocks.
+	 */
+	public function test_get_items() {
+		wp_set_current_user( self::$user_id );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/blocks' );
+		$response = $this->server->dispatch( $request );
+
+		$this->assertEquals( 200, $response->get_status() );
+		$this->assertEquals(
+			array(
+				array(
+					'id'      => self::$post_id,
+					'title'   => 'My cool block',
+					'content' => '<!-- wp:core/paragraph --><p>Hello!</p><!-- /wp:core/paragraph -->',
+				),
+			), $response->get_data()
+		);
+	}
+
+	/**
+	 * Check that we can GET a single block.
+	 */
+	public function test_get_item() {
+		wp_set_current_user( self::$user_id );
+
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/blocks/' . self::$post_id );
+		$response = $this->server->dispatch( $request );
+
+		$this->assertEquals( 200, $response->get_status() );
+		$this->assertEquals(
+			array(
+				'id'      => self::$post_id,
+				'title'   => 'My cool block',
+				'content' => '<!-- wp:core/paragraph --><p>Hello!</p><!-- /wp:core/paragraph -->',
+			), $response->get_data()
+		);
+	}
+
+	/**
+	 * Check that we can POST to create a new block.
+	 */
+	public function test_create_item() {
+		wp_set_current_user( self::$user_id );
+
+		$request = new WP_REST_Request( 'POST', '/wp/v2/blocks/' . self::$post_id );
+		$request->set_body_params(
+			array(
+				'title'   => 'New cool block',
+				'content' => '<!-- wp:core/paragraph --><p>Wow!</p><!-- /wp:core/paragraph -->',
+			)
+		);
+
+		$response = $this->server->dispatch( $request );
+
+		$this->assertEquals( 200, $response->get_status() );
+		$this->assertEquals(
+			array(
+				'id'      => self::$post_id,
+				'title'   => 'New cool block',
+				'content' => '<!-- wp:core/paragraph --><p>Wow!</p><!-- /wp:core/paragraph -->',
+			), $response->get_data()
+		);
+	}
+
+	/**
+	 * Check that we can PUT to update a block.
+	 */
+	public function test_update_item() {
+		wp_set_current_user( self::$user_id );
+
+		$request = new WP_REST_Request( 'PUT', '/wp/v2/blocks/' . self::$post_id );
+		$request->set_body_params(
+			array(
+				'title'   => 'Updated cool block',
+				'content' => '<!-- wp:core/paragraph --><p>Nice!</p><!-- /wp:core/paragraph -->',
+			)
+		);
+
+		$response = $this->server->dispatch( $request );
+
+		$this->assertEquals( 200, $response->get_status() );
+		$this->assertEquals(
+			array(
+				'id'      => self::$post_id,
+				'title'   => 'Updated cool block',
+				'content' => '<!-- wp:core/paragraph --><p>Nice!</p><!-- /wp:core/paragraph -->',
+			), $response->get_data()
+		);
+	}
+
+	/**
+	 * Check that we can DELETE a block.
+	 */
+	public function test_delete_item() {
+		wp_set_current_user( self::$user_id );
+
+		$request = new WP_REST_Request( 'DELETE', '/wp/v2/blocks/' . self::$post_id );
+
+		$response = $this->server->dispatch( $request );
+
+		$this->assertEquals( 200, $response->get_status() );
+		$this->assertEquals(
+			array(
+				'deleted'  => true,
+				'previous' => array(
+					'id'      => 8,
+					'title'   => 'My cool block',
+					'content' => '<!-- wp:core/paragraph --><p>Hello!</p><!-- /wp:core/paragraph -->',
+				),
+			), $response->get_data()
+		);
+	}
+
+	/**
+	 * Check that we have defined a JSON schema.
+	 */
+	public function test_get_item_schema() {
+		$request    = new WP_REST_Request( 'OPTIONS', '/wp/v2/blocks' );
+		$response   = $this->server->dispatch( $request );
+		$data       = $response->get_data();
+		$properties = $data['schema']['properties'];
+
+		$this->assertEquals( 3, count( $properties ) );
+		$this->assertArrayHasKey( 'id', $properties );
+		$this->assertArrayHasKey( 'title', $properties );
+		$this->assertArrayHasKey( 'content', $properties );
+	}
+
+	public function test_context_param() {
+		$this->markTestSkipped( 'Controller doesn\'t implement get_context_param().' );
+	}
+	public function test_prepare_item() {
+		$this->markTestSkipped( 'Controller doesn\'t implement prepare_item().' );
+	}
+}
diff --git a/phpunit/class-rest-reusable-blocks-controller-test.php b/phpunit/class-rest-reusable-blocks-controller-test.php
deleted file mode 100644
index 824d16abe32765..00000000000000
--- a/phpunit/class-rest-reusable-blocks-controller-test.php
+++ /dev/null
@@ -1,270 +0,0 @@
-<?php
-/**
- * WP_REST_Reusable_Blocks_Controller tests
- *
- * @package gutenberg
- */
-
-/**
- * Tests for WP_REST_Reusable_Blocks_Controller.
- */
-class REST_Reusable_Blocks_Controller_Test extends WP_Test_REST_Controller_Testcase {
-
-	/**
-	 * Our fake reusable block's post ID.
-	 *
-	 * @var int
-	 */
-	protected static $reusable_block_post_id;
-
-	/**
-	 * Our fake editor's user ID.
-	 *
-	 * @var int
-	 */
-	protected static $editor_id;
-
-	/**
-	 * Our fake subscriber's user ID.
-	 *
-	 * @var int
-	 */
-	protected static $subscriber_id;
-
-	/**
-	 * Create fake data before our tests run.
-	 *
-	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
-	 */
-	public static function wpSetUpBeforeClass( $factory ) {
-		self::$reusable_block_post_id = wp_insert_post( array(
-			'post_type'    => 'wp_block',
-			'post_status'  => 'publish',
-			'post_title'   => 'My cool block',
-			'post_content' => '<p class="has-drop-cap">Hello!</p>',
-		) );
-
-		self::$editor_id     = $factory->user->create( array(
-			'role' => 'editor',
-		) );
-		self::$subscriber_id = $factory->user->create( array(
-			'role' => 'subscriber',
-		) );
-	}
-
-	/**
-	 * Delete our fake data after our tests run.
-	 */
-	public static function wpTearDownAfterClass() {
-		wp_delete_post( self::$reusable_block_post_id );
-
-		self::delete_user( self::$editor_id );
-		self::delete_user( self::$subscriber_id );
-	}
-
-	/**
-	 * Check that our routes get set up properly.
-	 */
-	public function test_register_routes() {
-		$routes = $this->server->get_routes();
-
-		$this->assertArrayHasKey( '/gutenberg/v1/reusable-blocks', $routes );
-		$this->assertCount( 2, $routes['/gutenberg/v1/reusable-blocks'] );
-		$this->assertArrayHasKey( '/gutenberg/v1/reusable-blocks/(?P<id>[\w-]+)', $routes );
-		$this->assertCount( 2, $routes['/gutenberg/v1/reusable-blocks/(?P<id>[\w-]+)'] );
-	}
-
-	/**
-	 * Check that we can GET a collection of reusable blocks.
-	 */
-	public function test_get_items() {
-		wp_set_current_user( self::$editor_id );
-
-		$request  = new WP_REST_Request( 'GET', '/gutenberg/v1/reusable-blocks' );
-		$response = $this->server->dispatch( $request );
-
-		$this->assertEquals( 200, $response->get_status() );
-		$this->assertEquals( array(
-			array(
-				'id'      => self::$reusable_block_post_id,
-				'name'    => 'My cool block',
-				'content' => '<p class="has-drop-cap">Hello!</p>',
-			),
-		), $response->get_data() );
-	}
-
-	/**
-	 * Check that users without permission can't GET a collection of reusable blocks.
-	 */
-	public function test_get_items_when_not_allowed() {
-		wp_set_current_user( self::$subscriber_id );
-
-		$request  = new WP_REST_Request( 'GET', '/gutenberg/v1/reusable-blocks' );
-		$response = $this->server->dispatch( $request );
-		$data     = $response->get_data();
-
-		$this->assertEquals( 403, $response->get_status() );
-		$this->assertEquals( 'gutenberg_reusable_block_cannot_read', $data['code'] );
-	}
-
-	/**
-	 * Check that we can GET a single reusable block.
-	 */
-	public function test_get_item() {
-		wp_set_current_user( self::$editor_id );
-
-		$request  = new WP_REST_Request( 'GET', '/gutenberg/v1/reusable-blocks/' . self::$reusable_block_post_id );
-		$response = $this->server->dispatch( $request );
-
-		$this->assertEquals( 200, $response->get_status() );
-		$this->assertEquals( array(
-			'id'      => self::$reusable_block_post_id,
-			'name'    => 'My cool block',
-			'content' => '<p class="has-drop-cap">Hello!</p>',
-		), $response->get_data() );
-	}
-
-	/**
-	 * Check that users without permission can't GET a single reusable block.
-	 */
-	public function test_get_item_when_not_allowed() {
-		wp_set_current_user( self::$subscriber_id );
-
-		$request  = new WP_REST_Request( 'GET', '/gutenberg/v1/reusable-blocks/' . self::$reusable_block_post_id );
-		$response = $this->server->dispatch( $request );
-		$data     = $response->get_data();
-
-		$this->assertEquals( 403, $response->get_status() );
-		$this->assertEquals( 'gutenberg_reusable_block_cannot_read', $data['code'] );
-	}
-
-	/**
-	 * Check that we get a 404 when we GET a non-existent reusable block.
-	 */
-	public function test_get_item_not_found() {
-		wp_set_current_user( self::$editor_id );
-
-		$request  = new WP_REST_Request( 'GET', '/gutenberg/v1/reusable-blocks/unknownid' );
-		$response = $this->server->dispatch( $request );
-		$data     = $response->get_data();
-
-		$this->assertEquals( 404, $response->get_status() );
-		$this->assertEquals( 'gutenberg_reusable_block_not_found', $data['code'] );
-	}
-
-	/**
-	 * Check that we can PUT a single reusable block.
-	 */
-	public function test_update_item() {
-		wp_set_current_user( self::$editor_id );
-
-		$request = new WP_REST_Request( 'PUT', '/gutenberg/v1/reusable-blocks/' . self::$reusable_block_post_id );
-		$request->set_body_params( array(
-			'name'    => 'Another cool block',
-			'content' => '<figure class="wp-block-image"><img src="/image.jpg" alt="An image" /></figure>',
-		) );
-
-		$response = $this->server->dispatch( $request );
-
-		$this->assertEquals( 200, $response->get_status() );
-		$this->assertEquals( array(
-			'id'      => self::$reusable_block_post_id,
-			'name'    => 'Another cool block',
-			'content' => '<figure class="wp-block-image"><img src="/image.jpg" alt="An image" /></figure>',
-		), $response->get_data() );
-	}
-
-	/**
-	 * Check that users without permission can't PUT a single reusable block.
-	 */
-	public function test_save_item_when_not_allowed() {
-		wp_set_current_user( self::$subscriber_id );
-
-		$request  = new WP_REST_Request( 'PUT', '/gutenberg/v1/reusable-blocks/' . self::$reusable_block_post_id );
-		$response = $this->server->dispatch( $request );
-		$data     = $response->get_data();
-
-		$this->assertEquals( 403, $response->get_status() );
-		$this->assertEquals( 'gutenberg_reusable_block_cannot_edit', $data['code'] );
-	}
-
-	/**
-	 * Test cases for test_save_item_with_invalid_fields().
-	 *
-	 * @return array
-	 */
-	public function data_save_item_with_invalid_fields() {
-		return array(
-			array(
-				array(),
-				'Invalid reusable block name.',
-			),
-			array(
-				array(
-					'name' => 42,
-				),
-				'Invalid reusable block name.',
-			),
-			array(
-				array(
-					'name' => 'My cool block',
-				),
-				'Invalid reusable block content.',
-			),
-			array(
-				array(
-					'name'    => 'My cool block',
-					'content' => 42,
-				),
-				'Invalid reusable block content.',
-			),
-		);
-	}
-
-	/**
-	 * Check that attributes are validated correctly when we PUT a single reusable block.
-	 *
-	 * @dataProvider data_save_item_with_invalid_fields
-	 */
-	public function test_save_item_with_invalid_fields( $body_params, $expected_message ) {
-		wp_set_current_user( self::$editor_id );
-
-		$request = new WP_REST_Request( 'PUT', '/gutenberg/v1/reusable-blocks/' . self::$reusable_block_post_id );
-		$request->set_body_params( $body_params );
-
-		$response = $this->server->dispatch( $request );
-		$data     = $response->get_data();
-
-		$this->assertEquals( 400, $response->get_status() );
-		$this->assertEquals( 'gutenberg_reusable_block_invalid_field', $data['code'] );
-		$this->assertEquals( $expected_message, $data['message'] );
-	}
-
-	/**
-	 * Check that we have defined a JSON schema.
-	 */
-	public function test_get_item_schema() {
-		$request    = new WP_REST_Request( 'OPTIONS', '/gutenberg/v1/reusable-blocks' );
-		$response   = $this->server->dispatch( $request );
-		$data       = $response->get_data();
-		$properties = $data['schema']['properties'];
-
-		$this->assertEquals( 3, count( $properties ) );
-		$this->assertArrayHasKey( 'id', $properties );
-		$this->assertArrayHasKey( 'name', $properties );
-		$this->assertArrayHasKey( 'content', $properties );
-	}
-
-	public function test_context_param() {
-		$this->markTestSkipped( 'Controller doesn\'t implement get_context_param().' );
-	}
-	public function test_create_item() {
-		$this->markTestSkipped( 'Controller doesn\'t implement create_item().' );
-	}
-	public function test_delete_item() {
-		$this->markTestSkipped( 'Controller doesn\'t implement delete_item().' );
-	}
-	public function test_prepare_item() {
-		$this->markTestSkipped( 'Controller doesn\'t implement prepare_item().' );
-	}
-}

From e7755e9e1c2b5b744165087eb2b9ca3bcedbbff8 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 20 Dec 2017 15:02:53 +1100
Subject: [PATCH 2/5] Add DELETE_REUSABLE_BLOCK effect

Adds an effect (DELETE_REUSABLE_BLOCK) which triggers deletes a reusable
block via the API. The action that triggers this effect can be created
with the deleteReusableBlock() action creator.

The reusable block is optimistically removed from local redux state by
the reducer handling the REMOVE_REUSABLE_BLOCK action.
---
 editor/store/actions.js      | 13 ++++++
 editor/store/effects.js      | 47 ++++++++++++++++++---
 editor/store/reducer.js      |  5 +++
 editor/store/test/actions.js |  9 ++++
 editor/store/test/effects.js | 80 +++++++++++++++++++++++++++++++++++-
 editor/store/test/reducer.js | 28 +++++++++++++
 6 files changed, 176 insertions(+), 6 deletions(-)

diff --git a/editor/store/actions.js b/editor/store/actions.js
index 23027df7e93a74..42ad74dd18f043 100644
--- a/editor/store/actions.js
+++ b/editor/store/actions.js
@@ -566,6 +566,19 @@ export function saveReusableBlock( id ) {
 	};
 }
 
+/**
+ * Returns an action object used to delete a reusable block via the REST API.
+ * 
+ * @param {number} id  The ID of the reusable block to delete.
+ * @return {Object}    Action object.
+ */
+export function deleteReusableBlock( id ) {
+	return {
+		type: 'DELETE_REUSABLE_BLOCK',
+		id,
+	};
+}
+
 /**
  * Returns an action object used to convert a reusable block into a static
  * block.
diff --git a/editor/store/effects.js b/editor/store/effects.js
index c6777602c4f244..1aa1bb7e204880 100644
--- a/editor/store/effects.js
+++ b/editor/store/effects.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { BEGIN, COMMIT, REVERT } from 'redux-optimist';
-import { get, includes, map, castArray } from 'lodash';
+import { get, includes, map, castArray, uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -58,7 +58,7 @@ import {
  */
 const SAVE_POST_NOTICE_ID = 'SAVE_POST_NOTICE_ID';
 const TRASH_POST_NOTICE_ID = 'TRASH_POST_NOTICE_ID';
-const SAVE_REUSABLE_BLOCK_NOTICE_ID = 'SAVE_REUSABLE_BLOCK_NOTICE_ID';
+const REUSABLE_BLOCK_NOTICE_ID = 'REUSABLE_BLOCK_NOTICE_ID';
 
 export default {
 	REQUEST_POST_UPDATE( action, store ) {
@@ -363,14 +363,51 @@ export default {
 				} );
 				dispatch( createSuccessNotice(
 					__( 'Block updated.' ),
-					{ id: SAVE_REUSABLE_BLOCK_NOTICE_ID }
+					{ id: REUSABLE_BLOCK_NOTICE_ID }
 				) );
 			},
 			( error ) => {
 				dispatch( { type: 'SAVE_REUSABLE_BLOCK_FAILURE', id } );
 				dispatch( createErrorNotice(
-					get( error.responseJSON, 'message', __( 'An unknown error occured.' ) ),
-					{ id: SAVE_REUSABLE_BLOCK_NOTICE_ID }
+					get( error.responseJSON, 'message', __( 'An unknown error occurred.' ) ),
+					{ id: REUSABLE_BLOCK_NOTICE_ID }
+				) );
+			}
+		);
+	},
+	DELETE_REUSABLE_BLOCK( action, store ) {
+		const { id } = action;
+		const { dispatch } = store;
+
+		const transactionId = uniqueId();
+
+		dispatch( {
+			type: 'REMOVE_REUSABLE_BLOCK',
+			id,
+			optimist: { type: BEGIN, id: transactionId },
+		} );
+
+		new wp.api.models.Blocks( { id } ).destroy().then(
+			() => {
+				dispatch( {
+					type: 'DELETE_REUSABLE_BLOCK_SUCCESS',
+					id,
+					optimist: { type: COMMIT, id: transactionId },
+				} );
+				dispatch( createSuccessNotice(
+					__( 'Block deleted.' ),
+					{ id: REUSABLE_BLOCK_NOTICE_ID },
+				) );
+			},
+			( error ) => {
+				dispatch( {
+					type: 'DELETE_REUSABLE_BLOCK_FAILURE',
+					id,
+					optimist: { type: REVERT, id: transactionId },
+				} );
+				dispatch( createErrorNotice(
+					get( error.responseJSON, 'message', __( 'An unknown error occurred.' ) ),
+					{ id: REUSABLE_BLOCK_NOTICE_ID }
 				) );
 			}
 		);
diff --git a/editor/store/reducer.js b/editor/store/reducer.js
index 0def9eeed7bd61..88d1e9296d7d52 100644
--- a/editor/store/reducer.js
+++ b/editor/store/reducer.js
@@ -759,6 +759,11 @@ export const reusableBlocks = combineReducers( {
 					},
 				};
 			}
+
+			case 'REMOVE_REUSABLE_BLOCK': {
+				const { id } = action;
+				return omit( state, id );
+			}
 		}
 
 		return state;
diff --git a/editor/store/test/actions.js b/editor/store/test/actions.js
index aa1e4e2c99ad59..90b23e90f7c877 100644
--- a/editor/store/test/actions.js
+++ b/editor/store/test/actions.js
@@ -13,6 +13,7 @@ import {
 	fetchReusableBlocks,
 	updateReusableBlock,
 	saveReusableBlock,
+	deleteReusableBlock,
 	convertBlockToStatic,
 	convertBlockToReusable,
 	toggleSelection,
@@ -639,6 +640,14 @@ describe( 'actions', () => {
 		} );
 	} );
 
+	describe( 'deleteReusableBlock', () => {
+		const id = 123;
+		expect( deleteReusableBlock( id ) ).toEqual( {
+			type: 'DELETE_REUSABLE_BLOCK',
+			id,
+		} );
+	} );
+
 	describe( 'convertBlockToStatic', () => {
 		const uid = '358b59ee-bab3-4d6f-8445-e8c6971a5605';
 		expect( convertBlockToStatic( uid ) ).toEqual( {
diff --git a/editor/store/test/effects.js b/editor/store/test/effects.js
index 95ec8b946cbc7f..dfe5dfef39441b 100644
--- a/editor/store/test/effects.js
+++ b/editor/store/test/effects.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, reduce, set } from 'lodash';
+import lodash from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,6 +23,7 @@ import {
 	requestMetaBoxUpdates,
 	updateReusableBlock,
 	saveReusableBlock,
+	deleteReusableBlock,
 	fetchReusableBlocks,
 	convertBlockToStatic,
 	convertBlockToReusable,
@@ -31,6 +32,8 @@ import reducer from '../reducer';
 import effects from '../effects';
 import * as selectors from '../../store/selectors';
 
+const { noop, reduce, set } = lodash;
+
 // Make all generated UUIDs the same for testing
 jest.mock( 'uuid/v4', () => {
 	return jest.fn( () => 'this-is-a-mock-uuid' );
@@ -471,6 +474,8 @@ describe( 'effects', () => {
 
 	describe( 'reusable block effects', () => {
 		beforeAll( () => {
+			lodash.uniqueId = jest.spyOn( lodash, 'uniqueId' );
+
 			registerBlockType( 'core/test-block', {
 				title: 'Test block',
 				category: 'common',
@@ -489,7 +494,13 @@ describe( 'effects', () => {
 			} );
 		} );
 
+		beforeEach( () => {
+			lodash.uniqueId.mockReset();
+		} );
+
 		afterAll( () => {
+			lodash.uniqueId.mockRestore();
+
 			unregisterBlockType( 'core/test-block' );
 			unregisterBlockType( 'core/block' );
 		} );
@@ -688,6 +699,71 @@ describe( 'effects', () => {
 			} );
 		} );
 
+		describe( '.DELETE_REUSABLE_BLOCK', () => {
+			const handler = effects.DELETE_REUSABLE_BLOCK;
+
+			it( 'should delete a reusable block', () => {
+				let modelAttributes;
+				const promise = Promise.resolve( {} );
+
+				set( global, 'wp.api.models.Blocks', class {
+					constructor( attributes ) {
+						modelAttributes = attributes;
+					}
+
+					destroy() {
+						return promise;
+					}
+				} );
+
+				const state = reducer( undefined, {} );
+				const dispatch = jest.fn();
+				const store = { getState: () => state, dispatch };
+
+				handler( deleteReusableBlock( 123 ), store );
+
+				expect( dispatch ).toHaveBeenCalledWith( {
+					type: 'REMOVE_REUSABLE_BLOCK',
+					id: 123,
+					optimist: expect.any( Object ),
+				} );
+				expect( modelAttributes ).toEqual( {
+					id: 123,
+				} );
+				return promise.then( () => {
+					expect( dispatch ).toHaveBeenCalledWith( {
+						type: 'DELETE_REUSABLE_BLOCK_SUCCESS',
+						id: 123,
+						optimist: expect.any( Object ),
+					} );
+				} );
+			} );
+
+			it( 'should handle an API error', () => {
+				const promise = Promise.reject( {} );
+
+				set( global, 'wp.api.models.Blocks', class {
+					destroy() {
+						return promise;
+					}
+				} );
+
+				const state = reducer( undefined, {} );
+				const dispatch = jest.fn();
+				const store = { getState: () => state, dispatch };
+
+				handler( deleteReusableBlock( 123 ), store );
+
+				return promise.catch( () => {
+					expect( dispatch ).toHaveBeenCalledWith( {
+						type: 'DELETE_REUSABLE_BLOCK_FAILURE',
+						id: 123,
+						optimist: expect.any( Object ),
+					} );
+				} );
+			} );
+		} );
+
 		describe( '.CONVERT_BLOCK_TO_STATIC', () => {
 			const handler = effects.CONVERT_BLOCK_TO_STATIC;
 
@@ -747,6 +823,8 @@ describe( 'effects', () => {
 				const dispatch = jest.fn();
 				const store = { getState: () => state, dispatch };
 
+				lodash.uniqueId.mockReturnValue( 1 );
+
 				handler( convertBlockToReusable( staticBlock.uid ), store );
 
 				expect( dispatch ).toHaveBeenCalledWith(
diff --git a/editor/store/test/reducer.js b/editor/store/test/reducer.js
index 3505481a137612..bbc814c9d31bef 100644
--- a/editor/store/test/reducer.js
+++ b/editor/store/test/reducer.js
@@ -1464,6 +1464,34 @@ describe( 'state', () => {
 			} );
 		} );
 
+		it( 'should remove a reusable block', () => {
+			const id = 123;
+			const initialState = {
+				data: {
+					[ id ]: {
+						id,
+						name: 'My cool block',
+						type: 'core/paragraph',
+						attributes: {
+							content: 'Hello!',
+							dropCap: true,
+						},
+					},
+				},
+				isSaving: {},
+			};
+
+			const state = reusableBlocks( deepFreeze( initialState ), {
+				type: 'REMOVE_REUSABLE_BLOCK',
+				id,
+			} );
+
+			expect( state ).toEqual( {
+				data: {},
+				isSaving: {},
+			} );
+		} );
+
 		it( 'should indicate that a reusable block is saving', () => {
 			const id = '358b59ee-bab3-4d6f-8445-e8c6971a5605';
 			const initialState = {

From 4cb5925e5e069010d48ae3acae95b80769c6b215 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 21 Dec 2017 12:17:17 +1100
Subject: [PATCH 3/5] Add UI for deleting a reusable block

Moves 'Detach from Reusable Block' and adds 'Delete Reusable Block'
buttons to a <ReusableBlockSettings> component that lives inside
<BlockSettingsMenu>.
---
 blocks/library/block/edit-panel/index.js      |  9 +--
 blocks/library/block/index.js                 |  9 +--
 .../block-transformations.js                  |  2 +-
 .../components/block-settings-menu/index.js   |  4 +-
 .../reusable-block-settings.js                | 81 +++++++++++++++++++
 .../reusable-block-toggle.js                  | 49 -----------
 .../components/block-settings-menu/style.scss |  2 +-
 .../test/reusable-block-settings.js           | 59 ++++++++++++++
 .../test/reusable-block-toggle.js             | 29 -------
 element/index.js                              |  7 +-
 10 files changed, 152 insertions(+), 99 deletions(-)
 create mode 100644 editor/components/block-settings-menu/reusable-block-settings.js
 delete mode 100644 editor/components/block-settings-menu/reusable-block-toggle.js
 create mode 100644 editor/components/block-settings-menu/test/reusable-block-settings.js
 delete mode 100644 editor/components/block-settings-menu/test/reusable-block-toggle.js

diff --git a/blocks/library/block/edit-panel/index.js b/blocks/library/block/edit-panel/index.js
index 357c9dd683aa82..a948573b8035a1 100644
--- a/blocks/library/block/edit-panel/index.js
+++ b/blocks/library/block/edit-panel/index.js
@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import './style.scss';
 
 function ReusableBlockEditPanel( props ) {
-	const { isEditing, title, isSaving, onEdit, onDetach, onChangeTitle, onSave, onCancel } = props;
+	const { isEditing, title, isSaving, onEdit, onChangeTitle, onSave, onCancel } = props;
 
 	return (
 		<div className="reusable-block-edit-panel">
@@ -25,13 +25,6 @@ function ReusableBlockEditPanel( props ) {
 					onClick={ onEdit }>
 					{ __( 'Edit' ) }
 				</Button>,
-				<Button
-					key="detach"
-					isLarge
-					className="reusable-block-edit-panel__button"
-					onClick={ onDetach }>
-					{ __( 'Detach' ) }
-				</Button>,
 			] }
 			{ ( isEditing || isSaving ) && [
 				<input
diff --git a/blocks/library/block/index.js b/blocks/library/block/index.js
index 82e655095f63c8..4a32a82c28deae 100644
--- a/blocks/library/block/index.js
+++ b/blocks/library/block/index.js
@@ -78,7 +78,7 @@ class ReusableBlockEdit extends Component {
 	}
 
 	render() {
-		const { focus, reusableBlock, isSaving, convertBlockToStatic } = this.props;
+		const { focus, reusableBlock, isSaving } = this.props;
 		const { isEditing, title, attributes } = this.state;
 
 		if ( ! reusableBlock ) {
@@ -105,7 +105,6 @@ class ReusableBlockEdit extends Component {
 					title={ title !== null ? title : reusableBlock.title }
 					isSaving={ isSaving }
 					onEdit={ this.startEditing }
-					onDetach={ convertBlockToStatic }
 					onChangeTitle={ this.setTitle }
 					onSave={ this.updateReusableBlock }
 					onCancel={ this.stopEditing }
@@ -140,12 +139,6 @@ const ConnectedReusableBlockEdit = connect(
 				id: ownProps.attributes.ref,
 			} );
 		},
-		convertBlockToStatic() {
-			dispatch( {
-				type: 'CONVERT_BLOCK_TO_STATIC',
-				uid: ownProps.id,
-			} );
-		},
 	} )
 )( ReusableBlockEdit );
 
diff --git a/editor/components/block-settings-menu/block-transformations.js b/editor/components/block-settings-menu/block-transformations.js
index 05572814e438b2..c2cfa7c468a23e 100644
--- a/editor/components/block-settings-menu/block-transformations.js
+++ b/editor/components/block-settings-menu/block-transformations.js
@@ -25,7 +25,7 @@ function BlockTransformations( { blocks, small = false, onTransform, onClick = n
 		return null;
 	}
 	return (
-		<div className="editor-block-settings-menu__block-transformations">
+		<div className="editor-block-settings-menu__section">
 			{ possibleBlockTransformations.map( ( { name, title, icon } ) => {
 			/* translators: label indicating the transformation of a block into another block */
 				const shownText = sprintf( __( 'Turn into %s' ), title );
diff --git a/editor/components/block-settings-menu/index.js b/editor/components/block-settings-menu/index.js
index b903cc9f196f32..f3775a327251d0 100644
--- a/editor/components/block-settings-menu/index.js
+++ b/editor/components/block-settings-menu/index.js
@@ -18,7 +18,7 @@ import BlockInspectorButton from './block-inspector-button';
 import BlockModeToggle from './block-mode-toggle';
 import BlockDeleteButton from './block-delete-button';
 import BlockTransformations from './block-transformations';
-import ReusableBlockToggle from './reusable-block-toggle';
+import ReusableBlockSettings from './reusable-block-settings';
 import UnknownConverter from './unknown-converter';
 import { selectBlock } from '../../store/actions';
 
@@ -58,7 +58,7 @@ function BlockSettingsMenu( { uids, onSelect, focus } ) {
 					{ count === 1 && <BlockModeToggle uid={ uids[ 0 ] } onToggle={ onClose } /> }
 					{ count === 1 && <UnknownConverter uid={ uids[ 0 ] } /> }
 					<BlockDeleteButton uids={ uids } />
-					{ count === 1 && <ReusableBlockToggle uid={ uids[ 0 ] } onToggle={ onClose } /> }
+					{ count === 1 && <ReusableBlockSettings uid={ uids[ 0 ] } onToggle={ onClose } /> }
 					<BlockTransformations uids={ uids } onClick={ onClose } />
 				</NavigableMenu>
 			) }
diff --git a/editor/components/block-settings-menu/reusable-block-settings.js b/editor/components/block-settings-menu/reusable-block-settings.js
new file mode 100644
index 00000000000000..6bb9950b17333b
--- /dev/null
+++ b/editor/components/block-settings-menu/reusable-block-settings.js
@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { IconButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { isReusableBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { getBlock } from '../../store/selectors';
+import { convertBlockToStatic, convertBlockToReusable, deleteReusableBlock } from '../../store/actions';
+
+export function ReusableBlockSettings( { block, onConvertToStatic, onConvertToReusable, onDelete } ) {
+	const isReusable = isReusableBlock( block );
+
+	return (
+		<Fragment>
+			{ ! isReusable && (
+				<IconButton
+					className="editor-block-settings-menu__control"
+					icon="controls-repeat"
+					onClick={ onConvertToReusable }
+				>
+					{ __( 'Convert to Reusable Block' ) }
+				</IconButton>
+			) }
+			{ isReusable && (
+				<div className="editor-block-settings-menu__section">
+					<IconButton
+						className="editor-block-settings-menu__control"
+						icon="controls-repeat"
+						onClick={ onConvertToStatic }
+					>
+						{ __( 'Detach from Reusable Block' ) }
+					</IconButton>
+					<IconButton
+						className="editor-block-settings-menu__control"
+						icon="no"
+						onClick={ () => onDelete( block.attributes.ref ) }
+					>
+						{ __( 'Delete Reusable Block' ) }
+					</IconButton>
+				</div>
+			) }
+		</Fragment>
+	);
+}
+
+export default connect(
+	( state, { uid } ) => {
+		return {
+			block: getBlock( state, uid ),
+		};
+	},
+	( dispatch, { uid, onToggle = noop } ) => ( {
+		onConvertToStatic() {
+			dispatch( convertBlockToStatic( uid ) );
+			onToggle();
+		},
+		onConvertToReusable() {
+			dispatch( convertBlockToReusable( uid ) );
+			onToggle();
+		},
+		onDelete( id ) {
+			// TODO: Make this a <Confirm /> component or similar
+			// eslint-disable-next-line no-alert
+			if ( window.confirm( __( 'Are you sure you want to permanently delete this Reusable Block?' ) ) ) {
+				dispatch( deleteReusableBlock( id ) );
+				onToggle();
+			}
+		},
+	} )
+)( ReusableBlockSettings );
diff --git a/editor/components/block-settings-menu/reusable-block-toggle.js b/editor/components/block-settings-menu/reusable-block-toggle.js
deleted file mode 100644
index b8c5301a4d0133..00000000000000
--- a/editor/components/block-settings-menu/reusable-block-toggle.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-import { noop } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { IconButton } from '@wordpress/components';
-import { isReusableBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { getBlock } from '../../store/selectors';
-import { convertBlockToStatic, convertBlockToReusable } from '../../store/actions';
-
-export function ReusableBlockToggle( { isReusable, convertToStatic, convertToReusable } ) {
-	return (
-		<IconButton
-			className="editor-block-settings-menu__control"
-			icon="controls-repeat"
-			onClick={ isReusable ? convertToStatic : convertToReusable }
-		>
-			{ isReusable ? __( 'Detach from Reusable Block' ) : __( 'Convert to Reusable Block' ) }
-		</IconButton>
-	);
-}
-
-export default connect(
-	( state, { uid } ) => {
-		const block = getBlock( state, uid );
-		return {
-			isReusable: isReusableBlock( block ),
-		};
-	},
-	( dispatch, { uid, onToggle = noop } ) => ( {
-		convertToStatic() {
-			dispatch( convertBlockToStatic( uid ) );
-			onToggle();
-		},
-		convertToReusable() {
-			dispatch( convertBlockToReusable( uid ) );
-			onToggle();
-		},
-	} )
-)( ReusableBlockToggle );
diff --git a/editor/components/block-settings-menu/style.scss b/editor/components/block-settings-menu/style.scss
index c6ac5f1ebe1b12..72b0e3a8c77142 100644
--- a/editor/components/block-settings-menu/style.scss
+++ b/editor/components/block-settings-menu/style.scss
@@ -46,7 +46,7 @@
 	}
 }
 
-.editor-block-settings-menu__block-transformations {
+.editor-block-settings-menu__section {
 	margin-top: $item-spacing;
 	padding-top: $item-spacing;
 	border-top: 1px solid $light-gray-500;
diff --git a/editor/components/block-settings-menu/test/reusable-block-settings.js b/editor/components/block-settings-menu/test/reusable-block-settings.js
new file mode 100644
index 00000000000000..39a943d3a1a114
--- /dev/null
+++ b/editor/components/block-settings-menu/test/reusable-block-settings.js
@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { ReusableBlockSettings } from '../reusable-block-settings';
+
+describe( 'ReusableBlockSettings', () => {
+	it( 'should allow converting a static block to reusable', () => {
+		const onConvert = jest.fn();
+		const wrapper = shallow(
+			<ReusableBlockSettings
+				block={ { name: 'core/paragraph' } }
+				onConvertToReusable={ onConvert }
+			/>
+		);
+
+		const text = wrapper.find( 'IconButton' ).children().text();
+		expect( text ).toEqual( 'Convert to Reusable Block' );
+
+		wrapper.find( 'IconButton' ).simulate( 'click' );
+		expect( onConvert ).toHaveBeenCalled();
+	} );
+
+	it( 'should allow converting a reusable block to static', () => {
+		const onConvert = jest.fn();
+		const wrapper = shallow(
+			<ReusableBlockSettings
+				block={ { name: 'core/block' } }
+				onConvertToStatic={ onConvert }
+			/>
+		);
+
+		const text = wrapper.find( 'IconButton' ).first().children().text();
+		expect( text ).toEqual( 'Detach from Reusable Block' );
+
+		wrapper.find( 'IconButton' ).first().simulate( 'click' );
+		expect( onConvert ).toHaveBeenCalled();
+	} );
+
+	it( 'should allow deleting a reusable block', () => {
+		const onDelete = jest.fn();
+		const wrapper = shallow(
+			<ReusableBlockSettings
+				block={ { name: 'core/block', attributes: { ref: 123 } } }
+				onDelete={ onDelete }
+			/>
+		);
+
+		const text = wrapper.find( 'IconButton' ).last().children().text();
+		expect( text ).toEqual( 'Delete Reusable Block' );
+
+		wrapper.find( 'IconButton' ).last().simulate( 'click' );
+		expect( onDelete ).toHaveBeenCalledWith( 123 );
+	} );
+} );
diff --git a/editor/components/block-settings-menu/test/reusable-block-toggle.js b/editor/components/block-settings-menu/test/reusable-block-toggle.js
deleted file mode 100644
index 4c6258d49f1947..00000000000000
--- a/editor/components/block-settings-menu/test/reusable-block-toggle.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * Internal dependencies
- */
-import { ReusableBlockToggle } from '../reusable-block-toggle';
-
-describe( 'ReusableBlockToggle', () => {
-	it( 'should allow converting a reusable block to static', () => {
-		const wrapper = shallow(
-			<ReusableBlockToggle isReusable={ true } />
-		);
-		const text = wrapper.find( 'IconButton' ).first().prop( 'children' );
-
-		expect( text ).toEqual( 'Detach from Reusable Block' );
-	} );
-
-	it( 'should allow converting a static block to reusable', () => {
-		const wrapper = shallow(
-			<ReusableBlockToggle isReusable={ false } />
-		);
-		const text = wrapper.find( 'IconButton' ).first().prop( 'children' );
-
-		expect( text ).toEqual( 'Convert to Reusable Block' );
-	} );
-} );
diff --git a/element/index.js b/element/index.js
index 0094a8392ff74b..f850aa80b79553 100644
--- a/element/index.js
+++ b/element/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { createElement, Component, cloneElement, Children } from 'react';
+import { createElement, Component, cloneElement, Children, Fragment } from 'react';
 import { render, findDOMNode, createPortal, unmountComponentAtNode } from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { camelCase, flowRight, isString, upperFirst } from 'lodash';
@@ -58,6 +58,11 @@ export { findDOMNode };
 
 export { Children };
 
+/**
+ * A component which renders its children without any wrapping element.
+ */
+export { Fragment };
+
 /**
  * Creates a portal into which a component can be rendered.
  *

From 7be6489a46f33d714a6a434af4e8c7c877e3b048 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 21 Dec 2017 12:20:00 +1100
Subject: [PATCH 4/5] Rename 'Delete' button in block settings menu to 'Remove'

This helps reduce the ambiguity between removing a block and deleting a
Reusable Block.
---
 editor/components/block-list/block-mobile-toolbar.js   |  4 ++--
 .../{block-delete-button.js => block-remove-button.js} | 10 +++++-----
 editor/components/block-settings-menu/index.js         |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)
 rename editor/components/block-settings-menu/{block-delete-button.js => block-remove-button.js} (83%)

diff --git a/editor/components/block-list/block-mobile-toolbar.js b/editor/components/block-list/block-mobile-toolbar.js
index 006181bd71afb4..5a45f331518057 100644
--- a/editor/components/block-list/block-mobile-toolbar.js
+++ b/editor/components/block-list/block-mobile-toolbar.js
@@ -2,14 +2,14 @@
  * Internal dependencies
  */
 import BlockMover from '../block-mover';
-import BlockDeleteButton from '../block-settings-menu/block-delete-button';
+import BlockRemoveButton from '../block-settings-menu/block-remove-button';
 import BlockSettingsMenu from '../block-settings-menu';
 
 function BlockMobileToolbar( { uid } ) {
 	return (
 		<div className="editor-block-list__block-mobile-toolbar">
 			<BlockMover uids={ [ uid ] } />
-			<BlockDeleteButton uids={ [ uid ] } small />
+			<BlockRemoveButton uids={ [ uid ] } small />
 			<BlockSettingsMenu uids={ [ uid ] } />
 		</div>
 	);
diff --git a/editor/components/block-settings-menu/block-delete-button.js b/editor/components/block-settings-menu/block-remove-button.js
similarity index 83%
rename from editor/components/block-settings-menu/block-delete-button.js
rename to editor/components/block-settings-menu/block-remove-button.js
index 0037e6039e6320..8756112e61fa25 100644
--- a/editor/components/block-settings-menu/block-delete-button.js
+++ b/editor/components/block-settings-menu/block-remove-button.js
@@ -16,17 +16,17 @@ import { compose } from '@wordpress/element';
  */
 import { removeBlocks } from '../../store/actions';
 
-export function BlockDeleteButton( { onDelete, onClick = noop, isLocked, small = false } ) {
+export function BlockRemoveButton( { onRemove, onClick = noop, isLocked, small = false } ) {
 	if ( isLocked ) {
 		return null;
 	}
 
-	const label = __( 'Delete' );
+	const label = __( 'Remove' );
 
 	return (
 		<IconButton
 			className="editor-block-settings-menu__control"
-			onClick={ flow( onDelete, onClick ) }
+			onClick={ flow( onRemove, onClick ) }
 			icon="trash"
 			label={ small ? label : undefined }
 		>
@@ -39,7 +39,7 @@ export default compose(
 	connect(
 		undefined,
 		( dispatch, ownProps ) => ( {
-			onDelete() {
+			onRemove() {
 				dispatch( removeBlocks( ownProps.uids ) );
 			},
 		} )
@@ -51,4 +51,4 @@ export default compose(
 			isLocked: !! templateLock,
 		};
 	} ),
-)( BlockDeleteButton );
+)( BlockRemoveButton );
diff --git a/editor/components/block-settings-menu/index.js b/editor/components/block-settings-menu/index.js
index f3775a327251d0..b314f4a62d47f9 100644
--- a/editor/components/block-settings-menu/index.js
+++ b/editor/components/block-settings-menu/index.js
@@ -16,7 +16,7 @@ import { IconButton, Dropdown, NavigableMenu } from '@wordpress/components';
 import './style.scss';
 import BlockInspectorButton from './block-inspector-button';
 import BlockModeToggle from './block-mode-toggle';
-import BlockDeleteButton from './block-delete-button';
+import BlockRemoveButton from './block-remove-button';
 import BlockTransformations from './block-transformations';
 import ReusableBlockSettings from './reusable-block-settings';
 import UnknownConverter from './unknown-converter';
@@ -57,7 +57,7 @@ function BlockSettingsMenu( { uids, onSelect, focus } ) {
 					<BlockInspectorButton onClick={ onClose } />
 					{ count === 1 && <BlockModeToggle uid={ uids[ 0 ] } onToggle={ onClose } /> }
 					{ count === 1 && <UnknownConverter uid={ uids[ 0 ] } /> }
-					<BlockDeleteButton uids={ uids } />
+					<BlockRemoveButton uids={ uids } />
 					{ count === 1 && <ReusableBlockSettings uid={ uids[ 0 ] } onToggle={ onClose } /> }
 					<BlockTransformations uids={ uids } onClick={ onClose } />
 				</NavigableMenu>

From 968bd14ea1020cc2e217c00acfa5f6594a37425e Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 22 Dec 2017 14:22:52 +1100
Subject: [PATCH 5/5] When deleting a Reusable Block, remove associated blocks
 from the post

Makes the REMOVE_REUSABLE_BLOCK action also remove any blocks that are
using the removed Reusable Block from the editor state.
---
 blocks/library/block/index.js |  11 ++-
 editor/store/effects.js       |  11 ++-
 editor/store/reducer.js       |  34 +++++++++
 editor/store/test/effects.js  |  30 +++++---
 editor/store/test/reducer.js  | 128 ++++++++++++++++++++++++++++++++--
 5 files changed, 194 insertions(+), 20 deletions(-)

diff --git a/blocks/library/block/index.js b/blocks/library/block/index.js
index 4a32a82c28deae..0b5e6cb68a813a 100644
--- a/blocks/library/block/index.js
+++ b/blocks/library/block/index.js
@@ -78,13 +78,17 @@ class ReusableBlockEdit extends Component {
 	}
 
 	render() {
-		const { focus, reusableBlock, isSaving } = this.props;
+		const { focus, reusableBlock, isFetching, isSaving } = this.props;
 		const { isEditing, title, attributes } = this.state;
 
-		if ( ! reusableBlock ) {
+		if ( ! reusableBlock && isFetching ) {
 			return <Placeholder><Spinner /></Placeholder>;
 		}
 
+		if ( ! reusableBlock ) {
+			return <Placeholder>{ __( 'Block has been deleted or is unavailable.' ) }</Placeholder>;
+		}
+
 		const reusableBlockAttributes = { ...reusableBlock.attributes, ...attributes };
 
 		return [
@@ -103,7 +107,7 @@ class ReusableBlockEdit extends Component {
 					key="panel"
 					isEditing={ isEditing }
 					title={ title !== null ? title : reusableBlock.title }
-					isSaving={ isSaving }
+					isSaving={ isSaving && ! reusableBlock.isTemporary }
 					onEdit={ this.startEditing }
 					onChangeTitle={ this.setTitle }
 					onSave={ this.updateReusableBlock }
@@ -117,6 +121,7 @@ class ReusableBlockEdit extends Component {
 const ConnectedReusableBlockEdit = connect(
 	( state, ownProps ) => ( {
 		reusableBlock: state.reusableBlocks.data[ ownProps.attributes.ref ],
+		isFetching: state.reusableBlocks.isFetching[ ownProps.attributes.ref ],
 		isSaving: state.reusableBlocks.isSaving[ ownProps.attributes.ref ],
 	} ),
 	( dispatch, ownProps ) => ( {
diff --git a/editor/store/effects.js b/editor/store/effects.js
index 1aa1bb7e204880..77ac0d8623ee17 100644
--- a/editor/store/effects.js
+++ b/editor/store/effects.js
@@ -14,6 +14,7 @@ import {
 	createBlock,
 	serialize,
 	createReusableBlock,
+	isReusableBlock,
 	getDefaultBlockName,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
@@ -49,6 +50,7 @@ import {
 	isEditedPostNew,
 	isEditedPostSaveable,
 	getBlock,
+	getBlocks,
 	getReusableBlock,
 	POST_UPDATE_TRANSACTION_ID,
 } from './selectors';
@@ -330,6 +332,7 @@ export default {
 			( reusableBlockOrBlocks ) => {
 				dispatch( {
 					type: 'FETCH_REUSABLE_BLOCKS_SUCCESS',
+					id,
 					reusableBlocks: castArray( reusableBlockOrBlocks ).map( ( { id: itemId, title, content } ) => {
 						const [ { name: type, attributes } ] = parse( content );
 						return { id: itemId, title, type, attributes };
@@ -339,6 +342,7 @@ export default {
 			( error ) => {
 				dispatch( {
 					type: 'FETCH_REUSABLE_BLOCKS_FAILURE',
+					id,
 					error: error.responseJSON || {
 						code: 'unknown_error',
 						message: __( 'An unknown error occurred.' ),
@@ -377,13 +381,18 @@ export default {
 	},
 	DELETE_REUSABLE_BLOCK( action, store ) {
 		const { id } = action;
-		const { dispatch } = store;
+		const { getState, dispatch } = store;
+
+		const allBlocks = getBlocks( getState() );
+		const associatedBlocks = allBlocks.filter( block => isReusableBlock( block ) && block.attributes.ref === id );
+		const associatedBlockUids = associatedBlocks.map( block => block.uid );
 
 		const transactionId = uniqueId();
 
 		dispatch( {
 			type: 'REMOVE_REUSABLE_BLOCK',
 			id,
+			associatedBlockUids,
 			optimist: { type: BEGIN, id: transactionId },
 		} );
 
diff --git a/editor/store/reducer.js b/editor/store/reducer.js
index 88d1e9296d7d52..86ed4971bf5ebf 100644
--- a/editor/store/reducer.js
+++ b/editor/store/reducer.js
@@ -217,6 +217,9 @@ export const editor = flow( [
 					return block;
 				} );
 			}
+
+			case 'REMOVE_REUSABLE_BLOCK':
+				return omit( state, action.associatedBlockUids );
 		}
 
 		return state;
@@ -293,6 +296,9 @@ export const editor = flow( [
 
 			case 'REMOVE_BLOCKS':
 				return without( state, ...action.uids );
+
+			case 'REMOVE_REUSABLE_BLOCK':
+				return without( state, ...action.associatedBlockUids );
 		}
 
 		return state;
@@ -769,6 +775,34 @@ export const reusableBlocks = combineReducers( {
 		return state;
 	},
 
+	isFetching( state = {}, action ) {
+		switch ( action.type ) {
+			case 'FETCH_REUSABLE_BLOCKS': {
+				const { id } = action;
+				if ( ! id ) {
+					return state;
+				}
+
+				return {
+					...state,
+					[ id ]: true,
+				};
+			}
+
+			case 'FETCH_REUSABLE_BLOCKS_SUCCESS':
+			case 'FETCH_REUSABLE_BLOCKS_FAILURE': {
+				const { id } = action;
+				if ( ! id ) {
+					return state;
+				}
+
+				return omit( state, id );
+			}
+		}
+
+		return state;
+	},
+
 	isSaving( state = {}, action ) {
 		switch ( action.type ) {
 			case 'SAVE_REUSABLE_BLOCK':
diff --git a/editor/store/test/effects.js b/editor/store/test/effects.js
index dfe5dfef39441b..08b54d59911644 100644
--- a/editor/store/test/effects.js
+++ b/editor/store/test/effects.js
@@ -546,7 +546,7 @@ describe( 'effects', () => {
 			} );
 
 			it( 'should fetch a single reusable block', () => {
-				const id = 'a9691cf9-ecaa-42bd-a9ca-49587e817647';
+				const id = 123;
 
 				let modelAttributes;
 				const promise = Promise.resolve( {
@@ -574,9 +574,10 @@ describe( 'effects', () => {
 				return promise.then( () => {
 					expect( dispatch ).toHaveBeenCalledWith( {
 						type: 'FETCH_REUSABLE_BLOCKS_SUCCESS',
+						id,
 						reusableBlocks: [
 							{
-								id: 'a9691cf9-ecaa-42bd-a9ca-49587e817647',
+								id,
 								title: 'My cool block',
 								type: 'core/test-block',
 								attributes: {
@@ -716,24 +717,35 @@ describe( 'effects', () => {
 					}
 				} );
 
-				const state = reducer( undefined, {} );
+				const id = 123;
+
+				const associatedBlock = {
+					uid: 'd6b55aa9-16b5-4123-9675-749d75a7f14d',
+					name: 'core/block',
+					attributes: {
+						ref: id,
+					},
+				};
+
+				const initialState = reducer( undefined, {} );
+				const state = reducer( initialState, resetBlocks( [ associatedBlock ] ) );
+
 				const dispatch = jest.fn();
 				const store = { getState: () => state, dispatch };
 
-				handler( deleteReusableBlock( 123 ), store );
+				handler( deleteReusableBlock( id ), store );
 
 				expect( dispatch ).toHaveBeenCalledWith( {
 					type: 'REMOVE_REUSABLE_BLOCK',
-					id: 123,
+					id,
+					associatedBlockUids: [ associatedBlock.uid ],
 					optimist: expect.any( Object ),
 				} );
-				expect( modelAttributes ).toEqual( {
-					id: 123,
-				} );
+				expect( modelAttributes ).toEqual( { id } );
 				return promise.then( () => {
 					expect( dispatch ).toHaveBeenCalledWith( {
 						type: 'DELETE_REUSABLE_BLOCK_SUCCESS',
-						id: 123,
+						id,
 						optimist: expect.any( Object ),
 					} );
 				} );
diff --git a/editor/store/test/reducer.js b/editor/store/test/reducer.js
index bbc814c9d31bef..6d8e4df9c8bb49 100644
--- a/editor/store/test/reducer.js
+++ b/editor/store/test/reducer.js
@@ -403,6 +403,35 @@ describe( 'state', () => {
 			expect( state.present.blockOrder ).toEqual( [ 'kumquat', 'persimmon', 'loquat' ] );
 		} );
 
+		it( 'should remove associated blocks when deleting a reusable block', () => {
+			const original = editor( undefined, {
+				type: 'RESET_BLOCKS',
+				blocks: [ {
+					uid: 'chicken',
+					name: 'core/test-block',
+					attributes: {},
+				}, {
+					uid: 'ribs',
+					name: 'core/test-block',
+					attributes: {},
+				} ],
+			} );
+			const state = editor( original, {
+				type: 'REMOVE_REUSABLE_BLOCK',
+				id: 123,
+				associatedBlockUids: [ 'chicken', 'veggies' ],
+			} );
+
+			expect( state.present.blockOrder ).toEqual( [ 'ribs' ] );
+			expect( state.present.blocksByUid ).toEqual( {
+				ribs: {
+					uid: 'ribs',
+					name: 'core/test-block',
+					attributes: {},
+				},
+			} );
+		} );
+
 		describe( 'edits()', () => {
 			it( 'should save newly edited properties', () => {
 				const original = editor( undefined, {
@@ -1329,13 +1358,14 @@ describe( 'state', () => {
 			const state = reusableBlocks( undefined, {} );
 			expect( state ).toEqual( {
 				data: {},
+				isFetching: {},
 				isSaving: {},
 			} );
 		} );
 
 		it( 'should add fetched reusable blocks', () => {
 			const reusableBlock = {
-				id: '358b59ee-bab3-4d6f-8445-e8c6971a5605',
+				id: 123,
 				name: 'My cool block',
 				type: 'core/paragraph',
 				attributes: {
@@ -1352,13 +1382,14 @@ describe( 'state', () => {
 				data: {
 					[ reusableBlock.id ]: reusableBlock,
 				},
+				isFetching: {},
 				isSaving: {},
 			} );
 		} );
 
 		it( 'should add a reusable block', () => {
 			const reusableBlock = {
-				id: '358b59ee-bab3-4d6f-8445-e8c6971a5605',
+				id: 123,
 				name: 'My cool block',
 				type: 'core/paragraph',
 				attributes: {
@@ -1376,12 +1407,13 @@ describe( 'state', () => {
 				data: {
 					[ reusableBlock.id ]: reusableBlock,
 				},
+				isFetching: {},
 				isSaving: {},
 			} );
 		} );
 
 		it( 'should update a reusable block', () => {
-			const id = '358b59ee-bab3-4d6f-8445-e8c6971a5605';
+			const id = 123;
 			const initialState = {
 				data: {
 					[ id ]: {
@@ -1394,6 +1426,7 @@ describe( 'state', () => {
 						},
 					},
 				},
+				isFetching: {},
 				isSaving: {},
 			};
 
@@ -1420,12 +1453,13 @@ describe( 'state', () => {
 						},
 					},
 				},
+				isFetching: {},
 				isSaving: {},
 			} );
 		} );
 
 		it( 'should update the reusable block\'s id if it was temporary', () => {
-			const id = '358b59ee-bab3-4d6f-8445-e8c6971a5605';
+			const id = 123;
 			const initialState = {
 				data: {
 					[ id ]: {
@@ -1460,6 +1494,7 @@ describe( 'state', () => {
 						},
 					},
 				},
+				isFetching: {},
 				isSaving: {},
 			} );
 		} );
@@ -1478,6 +1513,7 @@ describe( 'state', () => {
 						},
 					},
 				},
+				isFetching: {},
 				isSaving: {},
 			};
 
@@ -1488,14 +1524,87 @@ describe( 'state', () => {
 
 			expect( state ).toEqual( {
 				data: {},
+				isFetching: {},
+				isSaving: {},
+			} );
+		} );
+
+		it( 'should indicate that a reusable block is fetching', () => {
+			const id = 123;
+			const initialState = {
+				data: {},
+				isFetching: {},
+				isSaving: {},
+			};
+
+			const state = reusableBlocks( initialState, {
+				type: 'FETCH_REUSABLE_BLOCKS',
+				id,
+			} );
+
+			expect( state ).toEqual( {
+				data: {},
+				isFetching: {
+					[ id ]: true,
+				},
+				isSaving: {},
+			} );
+		} );
+
+		it( 'should stop indicating that a reusable block is saving when the fetch succeeded', () => {
+			const id = 123;
+			const initialState = {
+				data: {
+					[ id ]: { id },
+				},
+				isFetching: {
+					[ id ]: true,
+				},
+				isSaving: {},
+			};
+
+			const state = reusableBlocks( initialState, {
+				type: 'FETCH_REUSABLE_BLOCKS_SUCCESS',
+				id,
+				updatedId: id,
+			} );
+
+			expect( state ).toEqual( {
+				data: {
+					[ id ]: { id },
+				},
+				isFetching: {},
+				isSaving: {},
+			} );
+		} );
+
+		it( 'should stop indicating that a reusable block is fetching when there is an error', () => {
+			const id = 123;
+			const initialState = {
+				data: {},
+				isFetching: {
+					[ id ]: true,
+				},
+				isSaving: {},
+			};
+
+			const state = reusableBlocks( initialState, {
+				type: 'FETCH_REUSABLE_BLOCKS_FAILURE',
+				id,
+			} );
+
+			expect( state ).toEqual( {
+				data: {},
+				isFetching: {},
 				isSaving: {},
 			} );
 		} );
 
 		it( 'should indicate that a reusable block is saving', () => {
-			const id = '358b59ee-bab3-4d6f-8445-e8c6971a5605';
+			const id = 123;
 			const initialState = {
 				data: {},
+				isFetching: {},
 				isSaving: {},
 			};
 
@@ -1506,6 +1615,7 @@ describe( 'state', () => {
 
 			expect( state ).toEqual( {
 				data: {},
+				isFetching: {},
 				isSaving: {
 					[ id ]: true,
 				},
@@ -1513,11 +1623,12 @@ describe( 'state', () => {
 		} );
 
 		it( 'should stop indicating that a reusable block is saving when the save succeeded', () => {
-			const id = '358b59ee-bab3-4d6f-8445-e8c6971a5605';
+			const id = 123;
 			const initialState = {
 				data: {
 					[ id ]: { id },
 				},
+				isFetching: {},
 				isSaving: {
 					[ id ]: true,
 				},
@@ -1533,14 +1644,16 @@ describe( 'state', () => {
 				data: {
 					[ id ]: { id },
 				},
+				isFetching: {},
 				isSaving: {},
 			} );
 		} );
 
 		it( 'should stop indicating that a reusable block is saving when there is an error', () => {
-			const id = '358b59ee-bab3-4d6f-8445-e8c6971a5605';
+			const id = 123;
 			const initialState = {
 				data: {},
+				isFetching: {},
 				isSaving: {
 					[ id ]: true,
 				},
@@ -1553,6 +1666,7 @@ describe( 'state', () => {
 
 			expect( state ).toEqual( {
 				data: {},
+				isFetching: {},
 				isSaving: {},
 			} );
 		} );