From 12339e57eb1b2c9c7fbefecef176a1cde9fc623e Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Tue, 23 Apr 2019 14:28:05 +0100
Subject: [PATCH 01/19] Rename block into Content Preview

---
 .../blocks/content-preview/index.js           | 123 ++++++++++++++++++
 .../blocks/content-preview/style.scss         |  18 +++
 2 files changed, 141 insertions(+)
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
new file mode 100644
index 00000000000000..6d313fdc0aef70
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
@@ -0,0 +1,123 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { find, get, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { IconButton, Placeholder, SelectControl, Toolbar } from '@wordpress/components';
+import { compose, withState } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+import { BlockControls } from '@wordpress/editor';
+import { Fragment, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const edit = compose(
+	withSelect( select => ( {
+		// TODO: Replace with a better way to fetch pages
+		pages: select( 'core' ).getEntityRecords( 'postType', 'page' ),
+	} ) ),
+	withState( {
+		isEditing: false,
+	} )
+)( ( { attributes, isEditing, pages, setAttributes, setState } ) => {
+	const { align, selectedPageId } = attributes;
+
+	const selectOptions = [
+		{ label: '', value: undefined },
+		...map( pages, page => ( {
+			label: page.title.rendered,
+			value: page.id,
+		} ) ),
+	];
+
+	const toggleEditing = () => setState( { isEditing: ! isEditing } );
+
+	const onChange = pageId => {
+		if ( pageId ) {
+			setState( { isEditing: false } );
+		}
+		setAttributes( { selectedPageId: parseInt( pageId, 10 ) } );
+	};
+
+	const selectedPage = find( pages, { id: selectedPageId } );
+
+	const showToggleButton = ! isEditing || !! selectedPageId;
+	const showPlaceholder = isEditing || ! selectedPageId;
+	const showPreview = ! isEditing && !! selectedPageId;
+
+	return (
+		<Fragment>
+			{ showToggleButton && (
+				<BlockControls>
+					<Toolbar>
+						<IconButton
+							className={ classNames( 'components-icon-button components-toolbar__control', {
+								'is-active': isEditing,
+							} ) }
+							label={ __( 'Change Preview' ) }
+							onClick={ toggleEditing }
+							icon="edit"
+						/>
+					</Toolbar>
+				</BlockControls>
+			) }
+			<div
+				className={ classNames( 'a8c-content-preview-block', {
+					[ `align${ align }` ]: align,
+				} ) }
+			>
+				{ showPlaceholder && (
+					<Placeholder
+						icon="layout"
+						label={ __( 'Content Preview' ) }
+						instructions={ __( 'Select a page to preview' ) }
+					>
+						<div className="a8c-content-preview-block__selector">
+							<SelectControl
+								onChange={ onChange }
+								options={ selectOptions }
+								value={ selectedPageId }
+							/>
+							{ !! selectedPageId && (
+								<a href={ `?post=${ selectedPageId }&action=edit` }>{ __( 'Edit Page' ) }</a>
+							) }
+						</div>
+					</Placeholder>
+				) }
+				{ showPreview && (
+					<RawHTML className="a8c-content-preview-block__preview">
+						{ get( selectedPage, 'content.rendered' ) }
+					</RawHTML>
+				) }
+			</div>
+		</Fragment>
+	);
+} );
+
+registerBlockType( 'a8c/content-preview', {
+	title: __( 'Content Preview' ),
+	icon: 'layout',
+	category: 'layout',
+	attributes: {
+		selectedPageId: { type: 'number' },
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		html: false,
+		multiple: false,
+		reusable: false,
+	},
+	edit,
+	save: () => null,
+} );
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss
new file mode 100644
index 00000000000000..284e9af300c7ff
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss
@@ -0,0 +1,18 @@
+.a8c-content-preview-block.alignfull {
+	padding: 0 12px;
+}
+
+.a8c-content-preview-block__selector a {
+	font-family: sans-serif;
+	font-size: 13px;
+	padding-left: 8px;
+}
+
+.a8c-content-preview-block__preview {
+	pointer-events: none;
+	&::after {
+		content: '';
+		clear: both;
+		display: table;
+	}
+}

From be1c912fd2f773db90324ec758e8591a147f2b77 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Tue, 23 Apr 2019 14:37:29 +0100
Subject: [PATCH 02/19] Improve block properties

---
 .../full-site-editing-plugin/blocks/content-preview/index.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
index 6d313fdc0aef70..e1220c4351e9ad 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
@@ -106,6 +106,7 @@ const edit = compose(
 
 registerBlockType( 'a8c/content-preview', {
 	title: __( 'Content Preview' ),
+	description: __( 'Previews the content of a post or a page into the editor.' ),
 	icon: 'layout',
 	category: 'layout',
 	attributes: {
@@ -115,7 +116,6 @@ registerBlockType( 'a8c/content-preview', {
 		align: [ 'wide', 'full' ],
 		anchor: true,
 		html: false,
-		multiple: false,
 		reusable: false,
 	},
 	edit,

From fb7c146f2f79bf5c006b5620c9adf07b226d3b1e Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Tue, 23 Apr 2019 17:55:49 +0100
Subject: [PATCH 03/19] Add an autocomplete input for any CPT

---
 .../blocks/content-preview/index.js           | 54 ++++++-------------
 1 file changed, 17 insertions(+), 37 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
index e1220c4351e9ad..07d5c4fde1156b 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
@@ -3,15 +3,14 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import { find, get, map } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { IconButton, Placeholder, SelectControl, Toolbar } from '@wordpress/components';
+import { IconButton, Placeholder, Toolbar } from '@wordpress/components';
 import { compose, withState } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
 import { BlockControls } from '@wordpress/editor';
 import { Fragment, RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -19,41 +18,26 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import PostAutocomplete from '../../components/post-autocomplete';
 import './style.scss';
 
 const edit = compose(
-	withSelect( select => ( {
-		// TODO: Replace with a better way to fetch pages
-		pages: select( 'core' ).getEntityRecords( 'postType', 'page' ),
-	} ) ),
 	withState( {
 		isEditing: false,
 	} )
-)( ( { attributes, isEditing, pages, setAttributes, setState } ) => {
-	const { align, selectedPageId } = attributes;
-
-	const selectOptions = [
-		{ label: '', value: undefined },
-		...map( pages, page => ( {
-			label: page.title.rendered,
-			value: page.id,
-		} ) ),
-	];
+)( ( { attributes, isEditing, setAttributes, setState } ) => {
+	const { align, selectedPost } = attributes;
 
 	const toggleEditing = () => setState( { isEditing: ! isEditing } );
 
-	const onChange = pageId => {
-		if ( pageId ) {
-			setState( { isEditing: false } );
-		}
-		setAttributes( { selectedPageId: parseInt( pageId, 10 ) } );
+	const onSelectPost = post => {
+		setState( { isEditing: false } );
+		setAttributes( { selectedPost: post } );
 	};
 
-	const selectedPage = find( pages, { id: selectedPageId } );
-
-	const showToggleButton = ! isEditing || !! selectedPageId;
-	const showPlaceholder = isEditing || ! selectedPageId;
-	const showPreview = ! isEditing && !! selectedPageId;
+	const showToggleButton = ! isEditing || !! selectedPost;
+	const showPlaceholder = isEditing || ! selectedPost;
+	const showPreview = ! isEditing && !! selectedPost;
 
 	return (
 		<Fragment>
@@ -80,23 +64,19 @@ const edit = compose(
 					<Placeholder
 						icon="layout"
 						label={ __( 'Content Preview' ) }
-						instructions={ __( 'Select a page to preview' ) }
+						instructions={ __( 'Select something to preview' ) }
 					>
 						<div className="a8c-content-preview-block__selector">
-							<SelectControl
-								onChange={ onChange }
-								options={ selectOptions }
-								value={ selectedPageId }
-							/>
-							{ !! selectedPageId && (
-								<a href={ `?post=${ selectedPageId }&action=edit` }>{ __( 'Edit Page' ) }</a>
+							<PostAutocomplete onSelectPost={ onSelectPost } />
+							{ !! selectedPost && (
+								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit' ) }</a>
 							) }
 						</div>
 					</Placeholder>
 				) }
 				{ showPreview && (
 					<RawHTML className="a8c-content-preview-block__preview">
-						{ get( selectedPage, 'content.rendered' ) }
+						{ get( selectedPost, 'content.rendered' ) }
 					</RawHTML>
 				) }
 			</div>
@@ -110,7 +90,7 @@ registerBlockType( 'a8c/content-preview', {
 	icon: 'layout',
 	category: 'layout',
 	attributes: {
-		selectedPageId: { type: 'number' },
+		selectedPost: { type: 'object' },
 	},
 	supports: {
 		align: [ 'wide', 'full' ],

From b25a96d9f046b031d33ae137c3fe1d641e50d719 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Tue, 23 Apr 2019 18:45:44 +0100
Subject: [PATCH 04/19] Visual polish

---
 .../blocks/content-preview/index.js                   |  5 ++++-
 .../blocks/content-preview/style.scss                 | 11 +++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
index 07d5c4fde1156b..f6cac2c21ebffb 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
@@ -67,7 +67,10 @@ const edit = compose(
 						instructions={ __( 'Select something to preview' ) }
 					>
 						<div className="a8c-content-preview-block__selector">
-							<PostAutocomplete onSelectPost={ onSelectPost } />
+							<PostAutocomplete
+								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
+								onSelectPost={ onSelectPost }
+							/>
 							{ !! selectedPost && (
 								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit' ) }</a>
 							) }
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss
index 284e9af300c7ff..220846b69158f9 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss
@@ -2,10 +2,13 @@
 	padding: 0 12px;
 }
 
-.a8c-content-preview-block__selector a {
-	font-family: sans-serif;
-	font-size: 13px;
-	padding-left: 8px;
+.a8c-content-preview-block__selector {
+	width: 300px;
+	a {
+		font-family: sans-serif;
+		font-size: 13px;
+		padding-left: 8px;
+	}
 }
 
 .a8c-content-preview-block__preview {

From 1782f249b8330026cf8e662d2ea27e7dc1c23db6 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Wed, 24 Apr 2019 18:37:25 +0100
Subject: [PATCH 05/19] Reduce the block attributes to the bare minimum

---
 .../blocks/content-preview/index.js           | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
index f6cac2c21ebffb..4cd03d1928ac47 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
@@ -19,25 +19,42 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import PostAutocomplete from '../../components/post-autocomplete';
+import fetchPost from '../../lib/fetch-post';
 import './style.scss';
 
+const setSelectedPost = async ( attributes, setState ) => {
+	const { selectedPostId, selectedPostType } = attributes;
+	const selectedPost = await fetchPost( selectedPostId, selectedPostType );
+	setState( {
+		selectedPost,
+	} );
+};
+
 const edit = compose(
 	withState( {
 		isEditing: false,
+		selectedPost: null,
 	} )
-)( ( { attributes, isEditing, setAttributes, setState } ) => {
-	const { align, selectedPost } = attributes;
+)( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
+	const { align, selectedPostId } = attributes;
+
+	if ( !! selectedPostId && ! selectedPost ) {
+		setSelectedPost( attributes, setState );
+	}
 
 	const toggleEditing = () => setState( { isEditing: ! isEditing } );
 
 	const onSelectPost = post => {
-		setState( { isEditing: false } );
-		setAttributes( { selectedPost: post } );
+		setState( { isEditing: false, selectedPost: post } );
+		setAttributes( {
+			selectedPostId: get( post, 'id' ),
+			selectedPostType: get( post, 'type' ),
+		} );
 	};
 
-	const showToggleButton = ! isEditing || !! selectedPost;
-	const showPlaceholder = isEditing || ! selectedPost;
-	const showPreview = ! isEditing && !! selectedPost;
+	const showToggleButton = ! isEditing || !! selectedPostId;
+	const showPlaceholder = isEditing || ! selectedPostId;
+	const showPreview = ! isEditing && !! selectedPostId;
 
 	return (
 		<Fragment>
@@ -71,8 +88,8 @@ const edit = compose(
 								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
 								onSelectPost={ onSelectPost }
 							/>
-							{ !! selectedPost && (
-								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit' ) }</a>
+							{ !! selectedPostId && (
+								<a href={ `?post=${ selectedPostId }&action=edit` }>{ __( 'Edit' ) }</a>
 							) }
 						</div>
 					</Placeholder>
@@ -93,7 +110,8 @@ registerBlockType( 'a8c/content-preview', {
 	icon: 'layout',
 	category: 'layout',
 	attributes: {
-		selectedPost: { type: 'object' },
+		selectedPostId: { type: 'number' },
+		selectedPostType: { type: 'string' },
 	},
 	supports: {
 		align: [ 'wide', 'full' ],

From f827a4ad9f6f439f0fff465295fd7175ec1d942f Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Thu, 25 Apr 2019 17:43:37 +0100
Subject: [PATCH 06/19] Remove unnecessary compose

---
 .../blocks/content-preview/index.js                  | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
index 4cd03d1928ac47..876e8b919ecba2 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
@@ -10,7 +10,7 @@ import { get } from 'lodash';
  */
 import { registerBlockType } from '@wordpress/blocks';
 import { IconButton, Placeholder, Toolbar } from '@wordpress/components';
-import { compose, withState } from '@wordpress/compose';
+import { withState } from '@wordpress/compose';
 import { BlockControls } from '@wordpress/editor';
 import { Fragment, RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -30,12 +30,10 @@ const setSelectedPost = async ( attributes, setState ) => {
 	} );
 };
 
-const edit = compose(
-	withState( {
-		isEditing: false,
-		selectedPost: null,
-	} )
-)( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
+const edit = withState( {
+	isEditing: false,
+	selectedPost: null,
+} )( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
 	const { align, selectedPostId } = attributes;
 
 	if ( !! selectedPostId && ! selectedPost ) {

From 63aecfb2db20c5a97672a6bd062f926479cc6f63 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 12:41:37 +0100
Subject: [PATCH 07/19] Move the edit function in the edit file

---
 .../blocks/content-preview/edit.js            | 103 ++++++++++++++++++
 .../blocks/content-preview/index.js           |  94 +---------------
 2 files changed, 104 insertions(+), 93 deletions(-)
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js
new file mode 100644
index 00000000000000..c6ba23e5b85600
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js
@@ -0,0 +1,103 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { IconButton, Placeholder, Toolbar } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+import { BlockControls } from '@wordpress/editor';
+import { Fragment, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostAutocomplete from '../../components/post-autocomplete';
+import fetchPost from '../../lib/fetch-post';
+
+const setSelectedPost = async ( attributes, setState ) => {
+	const { selectedPostId, selectedPostType } = attributes;
+	const selectedPost = await fetchPost( selectedPostId, selectedPostType );
+	setState( {
+		selectedPost,
+	} );
+};
+
+const ContentPreviewEdit = withState( {
+	isEditing: false,
+	selectedPost: null,
+} )( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
+	const { align, selectedPostId } = attributes;
+
+	if ( !! selectedPostId && ! selectedPost ) {
+		setSelectedPost( attributes, setState );
+	}
+
+	const toggleEditing = () => setState( { isEditing: ! isEditing } );
+
+	const onSelectPost = post => {
+		setState( { isEditing: false, selectedPost: post } );
+		setAttributes( {
+			selectedPostId: get( post, 'id' ),
+			selectedPostType: get( post, 'type' ),
+		} );
+	};
+
+	const showToggleButton = ! isEditing || !! selectedPostId;
+	const showPlaceholder = isEditing || ! selectedPostId;
+	const showPreview = ! isEditing && !! selectedPostId;
+
+	return (
+		<Fragment>
+			{ showToggleButton && (
+				<BlockControls>
+					<Toolbar>
+						<IconButton
+							className={ classNames( 'components-icon-button components-toolbar__control', {
+								'is-active': isEditing,
+							} ) }
+							label={ __( 'Change Preview' ) }
+							onClick={ toggleEditing }
+							icon="edit"
+						/>
+					</Toolbar>
+				</BlockControls>
+			) }
+			<div
+				className={ classNames( 'a8c-content-preview-block', {
+					[ `align${ align }` ]: align,
+				} ) }
+			>
+				{ showPlaceholder && (
+					<Placeholder
+						icon="layout"
+						label={ __( 'Content Preview' ) }
+						instructions={ __( 'Select something to preview' ) }
+					>
+						<div className="a8c-content-preview-block__selector">
+							<PostAutocomplete
+								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
+								onSelectPost={ onSelectPost }
+							/>
+							{ !! selectedPostId && (
+								<a href={ `?post=${ selectedPostId }&action=edit` }>{ __( 'Edit' ) }</a>
+							) }
+						</div>
+					</Placeholder>
+				) }
+				{ showPreview && (
+					<RawHTML className="a8c-content-preview-block__preview">
+						{ get( selectedPost, 'content.rendered' ) }
+					</RawHTML>
+				) }
+			</div>
+		</Fragment>
+	);
+} );
+
+export default ContentPreviewEdit;
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
index 876e8b919ecba2..bd3156583f886c 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
@@ -1,107 +1,15 @@
-/* eslint-disable wpcalypso/jsx-classname-namespace */
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { IconButton, Placeholder, Toolbar } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-import { BlockControls } from '@wordpress/editor';
-import { Fragment, RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import PostAutocomplete from '../../components/post-autocomplete';
-import fetchPost from '../../lib/fetch-post';
+import edit from './edit';
 import './style.scss';
 
-const setSelectedPost = async ( attributes, setState ) => {
-	const { selectedPostId, selectedPostType } = attributes;
-	const selectedPost = await fetchPost( selectedPostId, selectedPostType );
-	setState( {
-		selectedPost,
-	} );
-};
-
-const edit = withState( {
-	isEditing: false,
-	selectedPost: null,
-} )( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
-	const { align, selectedPostId } = attributes;
-
-	if ( !! selectedPostId && ! selectedPost ) {
-		setSelectedPost( attributes, setState );
-	}
-
-	const toggleEditing = () => setState( { isEditing: ! isEditing } );
-
-	const onSelectPost = post => {
-		setState( { isEditing: false, selectedPost: post } );
-		setAttributes( {
-			selectedPostId: get( post, 'id' ),
-			selectedPostType: get( post, 'type' ),
-		} );
-	};
-
-	const showToggleButton = ! isEditing || !! selectedPostId;
-	const showPlaceholder = isEditing || ! selectedPostId;
-	const showPreview = ! isEditing && !! selectedPostId;
-
-	return (
-		<Fragment>
-			{ showToggleButton && (
-				<BlockControls>
-					<Toolbar>
-						<IconButton
-							className={ classNames( 'components-icon-button components-toolbar__control', {
-								'is-active': isEditing,
-							} ) }
-							label={ __( 'Change Preview' ) }
-							onClick={ toggleEditing }
-							icon="edit"
-						/>
-					</Toolbar>
-				</BlockControls>
-			) }
-			<div
-				className={ classNames( 'a8c-content-preview-block', {
-					[ `align${ align }` ]: align,
-				} ) }
-			>
-				{ showPlaceholder && (
-					<Placeholder
-						icon="layout"
-						label={ __( 'Content Preview' ) }
-						instructions={ __( 'Select something to preview' ) }
-					>
-						<div className="a8c-content-preview-block__selector">
-							<PostAutocomplete
-								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
-								onSelectPost={ onSelectPost }
-							/>
-							{ !! selectedPostId && (
-								<a href={ `?post=${ selectedPostId }&action=edit` }>{ __( 'Edit' ) }</a>
-							) }
-						</div>
-					</Placeholder>
-				) }
-				{ showPreview && (
-					<RawHTML className="a8c-content-preview-block__preview">
-						{ get( selectedPost, 'content.rendered' ) }
-					</RawHTML>
-				) }
-			</div>
-		</Fragment>
-	);
-} );
-
 registerBlockType( 'a8c/content-preview', {
 	title: __( 'Content Preview' ),
 	description: __( 'Previews the content of a post or a page into the editor.' ),

From 3c4f273c2a30401f8eb12f3c2a838211703238fe Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 15:33:48 +0100
Subject: [PATCH 08/19] Prevent inserting multiple Preview blocks

---
 .../full-site-editing-plugin/blocks/content-preview/index.js     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
index bd3156583f886c..e0d7d73d67695d 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
@@ -23,6 +23,7 @@ registerBlockType( 'a8c/content-preview', {
 		align: [ 'wide', 'full' ],
 		anchor: true,
 		html: false,
+		multiple: false,
 		reusable: false,
 	},
 	edit,

From bffc2e84e4258e078cee197fcffac8cfbe5ba3e3 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 17:51:05 +0100
Subject: [PATCH 09/19] Stop persisting the selected post in the block
 attributes

---
 .../blocks/content-preview/edit.js            | 31 +++++--------------
 .../blocks/content-preview/index.js           |  4 ---
 2 files changed, 7 insertions(+), 28 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js
index c6ba23e5b85600..a3b7fba2437766 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js
@@ -18,39 +18,22 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import PostAutocomplete from '../../components/post-autocomplete';
-import fetchPost from '../../lib/fetch-post';
-
-const setSelectedPost = async ( attributes, setState ) => {
-	const { selectedPostId, selectedPostType } = attributes;
-	const selectedPost = await fetchPost( selectedPostId, selectedPostType );
-	setState( {
-		selectedPost,
-	} );
-};
 
 const ContentPreviewEdit = withState( {
 	isEditing: false,
 	selectedPost: null,
-} )( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
-	const { align, selectedPostId } = attributes;
-
-	if ( !! selectedPostId && ! selectedPost ) {
-		setSelectedPost( attributes, setState );
-	}
+} )( ( { attributes, isEditing, selectedPost, setState } ) => {
+	const { align } = attributes;
 
 	const toggleEditing = () => setState( { isEditing: ! isEditing } );
 
 	const onSelectPost = post => {
 		setState( { isEditing: false, selectedPost: post } );
-		setAttributes( {
-			selectedPostId: get( post, 'id' ),
-			selectedPostType: get( post, 'type' ),
-		} );
 	};
 
-	const showToggleButton = ! isEditing || !! selectedPostId;
-	const showPlaceholder = isEditing || ! selectedPostId;
-	const showPreview = ! isEditing && !! selectedPostId;
+	const showToggleButton = ! isEditing || !! selectedPost;
+	const showPlaceholder = isEditing || ! selectedPost;
+	const showPreview = ! isEditing && !! selectedPost;
 
 	return (
 		<Fragment>
@@ -84,8 +67,8 @@ const ContentPreviewEdit = withState( {
 								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
 								onSelectPost={ onSelectPost }
 							/>
-							{ !! selectedPostId && (
-								<a href={ `?post=${ selectedPostId }&action=edit` }>{ __( 'Edit' ) }</a>
+							{ !! selectedPost && (
+								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit' ) }</a>
 							) }
 						</div>
 					</Placeholder>
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
index e0d7d73d67695d..101becf5a3e6ba 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
@@ -15,10 +15,6 @@ registerBlockType( 'a8c/content-preview', {
 	description: __( 'Previews the content of a post or a page into the editor.' ),
 	icon: 'layout',
 	category: 'layout',
-	attributes: {
-		selectedPostId: { type: 'number' },
-		selectedPostType: { type: 'string' },
-	},
 	supports: {
 		align: [ 'wide', 'full' ],
 		anchor: true,

From e61dcdac853febb39b04861b8ed8d90f72d867fe Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 18:31:49 +0100
Subject: [PATCH 10/19] Add a render callback stub

---
 .../blocks/content-preview/index.php                  | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.php

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.php b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.php
new file mode 100644
index 00000000000000..7344625ae0a3f2
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.php
@@ -0,0 +1,11 @@
+<?php
+
+function render_content_preview_block( $attributes, $content ) {
+	$align = isset( $attributes['align'] ) ? ' align' . $attributes['align'] : '';
+
+	$content = '<div class="a8c-content'. $align . '">'
+		. __( '[Renders a content]', 'jetpack' )
+		. '</div>';
+
+	return $content;
+}

From cd9bfe31a1f96a4d0635bb8d25bbf773d0b7290f Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 19:00:15 +0100
Subject: [PATCH 11/19] Rename into Content Slot

---
 .../blocks/content-preview/style.scss         | 21 -------------------
 .../blocks/content-slot/edit.js               | 10 ++++-----
 .../edit.js => content-slot/edit.js~HEAD}     | 15 ++++++-------
 .../blocks/content-slot/index.js              |  4 ++--
 .../index.js => content-slot/index.js~HEAD}   |  6 +++---
 .../blocks/content-slot/index.php             |  2 +-
 .../index.php => content-slot/index.php~HEAD} |  4 ++--
 7 files changed, 21 insertions(+), 41 deletions(-)
 delete mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss
 rename apps/full-site-editing/full-site-editing-plugin/blocks/{content-preview/edit.js => content-slot/edit.js~HEAD} (83%)
 rename apps/full-site-editing/full-site-editing-plugin/blocks/{content-preview/index.js => content-slot/index.js~HEAD} (71%)
 rename apps/full-site-editing/full-site-editing-plugin/blocks/{content-preview/index.php => content-slot/index.php~HEAD} (61%)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss b/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss
deleted file mode 100644
index 220846b69158f9..00000000000000
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.a8c-content-preview-block.alignfull {
-	padding: 0 12px;
-}
-
-.a8c-content-preview-block__selector {
-	width: 300px;
-	a {
-		font-family: sans-serif;
-		font-size: 13px;
-		padding-left: 8px;
-	}
-}
-
-.a8c-content-preview-block__preview {
-	pointer-events: none;
-	&::after {
-		content: '';
-		clear: both;
-		display: table;
-	}
-}
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js
index 3d861ef08ad916..ffcf892fdcebe1 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js
@@ -44,7 +44,7 @@ const ContentSlotEdit = withState( {
 							className={ classNames( 'components-icon-button components-toolbar__control', {
 								'is-active': isEditing,
 							} ) }
-							label={ __( 'Change Preview' ) }
+							label={ __( 'Change Preview', 'jetpack' ) }
 							onClick={ toggleEditing }
 							icon="edit"
 						/>
@@ -59,17 +59,17 @@ const ContentSlotEdit = withState( {
 				{ showPlaceholder && (
 					<Placeholder
 						icon="layout"
-						label={ __( 'Content Slot' ) }
-						instructions={ __( 'Placeholder for a post or a page.' ) }
+						label={ __( 'Content Slot', 'jetpack' ) }
+						instructions={ __( 'Placeholder for a post or a page.', 'jetpack' ) }
 					>
 						<div className="a8c-content-slot-block__selector">
-							<div>{ __( 'Select something to preview:' ) }</div>
+							<div>{ __( 'Select something to preview:', 'jetpack' ) }</div>
 							<PostAutocomplete
 								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
 								onSelectPost={ onSelectPost }
 							/>
 							{ !! selectedPost && (
-								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit' ) }</a>
+								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit', 'jetpack' ) }</a>
 							) }
 						</div>
 					</Placeholder>
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js~HEAD
similarity index 83%
rename from apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js
rename to apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js~HEAD
index a3b7fba2437766..3d861ef08ad916 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/edit.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js~HEAD
@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
  */
 import PostAutocomplete from '../../components/post-autocomplete';
 
-const ContentPreviewEdit = withState( {
+const ContentSlotEdit = withState( {
 	isEditing: false,
 	selectedPost: null,
 } )( ( { attributes, isEditing, selectedPost, setState } ) => {
@@ -52,17 +52,18 @@ const ContentPreviewEdit = withState( {
 				</BlockControls>
 			) }
 			<div
-				className={ classNames( 'a8c-content-preview-block', {
+				className={ classNames( 'a8c-content-slot-block', {
 					[ `align${ align }` ]: align,
 				} ) }
 			>
 				{ showPlaceholder && (
 					<Placeholder
 						icon="layout"
-						label={ __( 'Content Preview' ) }
-						instructions={ __( 'Select something to preview' ) }
+						label={ __( 'Content Slot' ) }
+						instructions={ __( 'Placeholder for a post or a page.' ) }
 					>
-						<div className="a8c-content-preview-block__selector">
+						<div className="a8c-content-slot-block__selector">
+							<div>{ __( 'Select something to preview:' ) }</div>
 							<PostAutocomplete
 								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
 								onSelectPost={ onSelectPost }
@@ -74,7 +75,7 @@ const ContentPreviewEdit = withState( {
 					</Placeholder>
 				) }
 				{ showPreview && (
-					<RawHTML className="a8c-content-preview-block__preview">
+					<RawHTML className="a8c-content-slot-block__preview">
 						{ get( selectedPost, 'content.rendered' ) }
 					</RawHTML>
 				) }
@@ -83,4 +84,4 @@ const ContentPreviewEdit = withState( {
 	);
 } );
 
-export default ContentPreviewEdit;
+export default ContentSlotEdit;
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js
index 4c4e50cacb37fd..8c3fc6a76f2d3a 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js
@@ -11,8 +11,8 @@ import edit from './edit';
 import './style.scss';
 
 registerBlockType( 'a8c/content-slot', {
-	title: __( 'Content Slot' ),
-	description: __( 'Placeholder for a post or a page.' ),
+	title: __( 'Content Slot', 'jetpack' ),
+	description: __( 'Placeholder for a post or a page.', 'jetpack' ),
 	icon: 'layout',
 	category: 'layout',
 	supports: {
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js~HEAD
similarity index 71%
rename from apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
rename to apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js~HEAD
index 101becf5a3e6ba..4c4e50cacb37fd 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js~HEAD
@@ -10,9 +10,9 @@ import { __ } from '@wordpress/i18n';
 import edit from './edit';
 import './style.scss';
 
-registerBlockType( 'a8c/content-preview', {
-	title: __( 'Content Preview' ),
-	description: __( 'Previews the content of a post or a page into the editor.' ),
+registerBlockType( 'a8c/content-slot', {
+	title: __( 'Content Slot' ),
+	description: __( 'Placeholder for a post or a page.' ),
 	icon: 'layout',
 	category: 'layout',
 	supports: {
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php
index 85638e7518579f..565c6d60e600bf 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php
@@ -4,7 +4,7 @@ function render_content_slot_block( $attributes, $content ) {
 	$align = isset( $attributes['align'] ) ? ' align' . $attributes['align'] : '';
 
 	$content = '<div class="a8c-content'. $align . '">'
-		. __( '[Renders some content]' )
+		. __( '[Renders some content]', 'jetpack' )
 		. '</div>';
 
 	return $content;
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.php b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php~HEAD
similarity index 61%
rename from apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.php
rename to apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php~HEAD
index 7344625ae0a3f2..85638e7518579f 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-preview/index.php
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php~HEAD
@@ -1,10 +1,10 @@
 <?php
 
-function render_content_preview_block( $attributes, $content ) {
+function render_content_slot_block( $attributes, $content ) {
 	$align = isset( $attributes['align'] ) ? ' align' . $attributes['align'] : '';
 
 	$content = '<div class="a8c-content'. $align . '">'
-		. __( '[Renders a content]', 'jetpack' )
+		. __( '[Renders some content]' )
 		. '</div>';
 
 	return $content;

From ae9bb02941579fdaed0d2776257f7a082ba97d49 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 19:22:39 +0100
Subject: [PATCH 12/19] Remove Jetpack mentions

---
 .../blocks/content-slot/edit.js                        | 10 +++++-----
 .../blocks/content-slot/index.js                       |  4 ++--
 .../blocks/content-slot/index.php                      |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js
index ffcf892fdcebe1..3d861ef08ad916 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js
@@ -44,7 +44,7 @@ const ContentSlotEdit = withState( {
 							className={ classNames( 'components-icon-button components-toolbar__control', {
 								'is-active': isEditing,
 							} ) }
-							label={ __( 'Change Preview', 'jetpack' ) }
+							label={ __( 'Change Preview' ) }
 							onClick={ toggleEditing }
 							icon="edit"
 						/>
@@ -59,17 +59,17 @@ const ContentSlotEdit = withState( {
 				{ showPlaceholder && (
 					<Placeholder
 						icon="layout"
-						label={ __( 'Content Slot', 'jetpack' ) }
-						instructions={ __( 'Placeholder for a post or a page.', 'jetpack' ) }
+						label={ __( 'Content Slot' ) }
+						instructions={ __( 'Placeholder for a post or a page.' ) }
 					>
 						<div className="a8c-content-slot-block__selector">
-							<div>{ __( 'Select something to preview:', 'jetpack' ) }</div>
+							<div>{ __( 'Select something to preview:' ) }</div>
 							<PostAutocomplete
 								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
 								onSelectPost={ onSelectPost }
 							/>
 							{ !! selectedPost && (
-								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit', 'jetpack' ) }</a>
+								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit' ) }</a>
 							) }
 						</div>
 					</Placeholder>
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js
index 8c3fc6a76f2d3a..4c4e50cacb37fd 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js
@@ -11,8 +11,8 @@ import edit from './edit';
 import './style.scss';
 
 registerBlockType( 'a8c/content-slot', {
-	title: __( 'Content Slot', 'jetpack' ),
-	description: __( 'Placeholder for a post or a page.', 'jetpack' ),
+	title: __( 'Content Slot' ),
+	description: __( 'Placeholder for a post or a page.' ),
 	icon: 'layout',
 	category: 'layout',
 	supports: {
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php
index 565c6d60e600bf..85638e7518579f 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php
@@ -4,7 +4,7 @@ function render_content_slot_block( $attributes, $content ) {
 	$align = isset( $attributes['align'] ) ? ' align' . $attributes['align'] : '';
 
 	$content = '<div class="a8c-content'. $align . '">'
-		. __( '[Renders some content]', 'jetpack' )
+		. __( '[Renders some content]' )
 		. '</div>';
 
 	return $content;

From cf98a45a67433c11ccb12c68b6424ff82a9039be Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Wed, 24 Apr 2019 18:00:01 +0100
Subject: [PATCH 13/19] Initial exploration

---
 .../blocks/content-renderer/index.js          | 118 ++++++++++++++++++
 .../blocks/content-renderer/style.scss        |  21 ++++
 .../full-site-editing-plugin.php              |   4 +
 .../full-site-editing-plugin/index.js         |   1 +
 4 files changed, 144 insertions(+)
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/style.scss

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
new file mode 100644
index 00000000000000..e5734970856402
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
@@ -0,0 +1,118 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { IconButton, Placeholder, Toolbar } from '@wordpress/components';
+import { compose, withState } from '@wordpress/compose';
+import { BlockControls } from '@wordpress/editor';
+import { Fragment, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostAutocomplete from '../../components/post-autocomplete';
+import './style.scss';
+
+const edit = compose(
+	withState( {
+		isEditing: false,
+	} )
+)( ( { attributes, isEditing, setAttributes, setState } ) => {
+	const { align, selectedPost } = attributes;
+
+	const toggleEditing = () => setState( { isEditing: ! isEditing } );
+
+	const onSelectPost = post => {
+		setState( { isEditing: false } );
+		setAttributes( { selectedPost: post } );
+	};
+
+	const showToggleButton = ! isEditing || !! selectedPost;
+	const showPlaceholder = isEditing || ! selectedPost;
+	const showContent = ! isEditing && !! selectedPost;
+
+	return (
+		<Fragment>
+			{ showToggleButton && (
+				<BlockControls>
+					<Toolbar>
+						<IconButton
+							className={ classNames( 'components-icon-button components-toolbar__control', {
+								'is-active': isEditing,
+							} ) }
+							label={ __( 'Change Content' ) }
+							onClick={ toggleEditing }
+							icon="edit"
+						/>
+					</Toolbar>
+				</BlockControls>
+			) }
+			<div
+				className={ classNames( 'a8c-content-renderer-block', {
+					[ `align${ align }` ]: align,
+				} ) }
+			>
+				{ showPlaceholder && (
+					<Placeholder
+						icon="layout"
+						label={ __( 'Content Renderer' ) }
+						instructions={ __( 'Select something to render' ) }
+					>
+						<div className="a8c-content-renderer-block__selector">
+							<PostAutocomplete
+								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
+								onSelectPost={ onSelectPost }
+							/>
+							{ !! selectedPost && (
+								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit' ) }</a>
+							) }
+						</div>
+					</Placeholder>
+				) }
+				{ showContent && (
+					<RawHTML className="a8c-content-renderer-block__content">
+						{ get( selectedPost, 'content.rendered' ) }
+					</RawHTML>
+				) }
+			</div>
+		</Fragment>
+	);
+} );
+
+const save = ( { attributes } ) => {
+	const { align, selectedPost } = attributes;
+	const className = classNames( 'a8c-content-renderer', { [ `align${ align }` ]: align } );
+	return (
+		<div className={ className }>
+			<RawHTML className="a8c-content-renderer-block__content">
+				{ get( selectedPost, 'content.rendered' ) }
+			</RawHTML>
+		</div>
+	);
+};
+
+registerBlockType( 'a8c/content-renderer', {
+	title: __( 'Content Renderer' ),
+	description: __( 'Renders the content of a post or a page.' ),
+	icon: 'layout',
+	category: 'layout',
+	attributes: {
+		selectedPost: { type: 'object' },
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		anchor: true,
+		html: false,
+		reusable: false,
+	},
+	edit,
+	save,
+} );
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/style.scss b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/style.scss
new file mode 100644
index 00000000000000..6f8198e030a43c
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/style.scss
@@ -0,0 +1,21 @@
+.a8c-content-renderer-block.alignfull {
+	padding: 0 12px;
+}
+
+.a8c-content-renderer-block__selector {
+	width: 300px;
+	a {
+		font-family: sans-serif;
+		font-size: 13px;
+		padding-left: 8px;
+	}
+}
+
+.a8c-content-renderer-block__content {
+	pointer-events: none;
+	&::after {
+		content: '';
+		clear: both;
+		display: table;
+	}
+}
diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php b/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
index 2eb5408fcfb8d3..7e2ad9fe8e3786 100644
--- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
+++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
@@ -45,12 +45,16 @@ function register_script_and_style() {
 		);
 	}
 
+	// We only need to declare script and style as dependencies once
+	// Because they'll be then enqueued for every block.
 	function register_blocks() {
 		register_block_type( 'a8c/content-slot', array(
 			'editor_script'   => 'a8c-full-site-editing-script',
 			'editor_style'    => 'a8c-full-site-editing-style',
 			'render_callback' => 'render_content_slot_block',
 		 ) );
+
+		register_block_type( 'a8c/content-renderer' );
 	}
 }
 
diff --git a/apps/full-site-editing/full-site-editing-plugin/index.js b/apps/full-site-editing/full-site-editing-plugin/index.js
index 47cfaab8e26759..9dd5c4433289fd 100644
--- a/apps/full-site-editing/full-site-editing-plugin/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/index.js
@@ -2,3 +2,4 @@
  * Internal dependencies
  */
 import './blocks/content-slot';
+import './blocks/content-renderer';

From 92c1e49eb6f1fd92e79543d460794dfd6d7b5d5d Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Thu, 25 Apr 2019 16:05:47 +0100
Subject: [PATCH 14/19] Add server side rendering

---
 .../blocks/content-renderer/index.js          | 60 ++++++++++---------
 .../blocks/content-renderer/render.php        | 13 ++++
 .../full-site-editing-plugin.php              |  6 +-
 3 files changed, 50 insertions(+), 29 deletions(-)
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/render.php

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
index e5734970856402..4fa7c735286710 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
@@ -10,7 +10,7 @@ import { get } from 'lodash';
  */
 import { registerBlockType } from '@wordpress/blocks';
 import { IconButton, Placeholder, Toolbar } from '@wordpress/components';
-import { compose, withState } from '@wordpress/compose';
+import { withState } from '@wordpress/compose';
 import { BlockControls } from '@wordpress/editor';
 import { Fragment, RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -19,25 +19,40 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import PostAutocomplete from '../../components/post-autocomplete';
+import fetchPost from '../../lib/fetch-post';
 import './style.scss';
 
-const edit = compose(
-	withState( {
-		isEditing: false,
-	} )
-)( ( { attributes, isEditing, setAttributes, setState } ) => {
-	const { align, selectedPost } = attributes;
+const setSelectedPost = async ( attributes, setState ) => {
+	const { selectedPostId, selectedPostType } = attributes;
+	const selectedPost = await fetchPost( selectedPostId, selectedPostType );
+	setState( {
+		selectedPost,
+	} );
+};
+
+const edit = withState( {
+	isEditing: false,
+	selectedPost: null,
+} )( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
+	const { align, selectedPostId } = attributes;
+
+	if ( !! selectedPostId && ! selectedPost ) {
+		setSelectedPost( attributes, setState );
+	}
 
 	const toggleEditing = () => setState( { isEditing: ! isEditing } );
 
 	const onSelectPost = post => {
-		setState( { isEditing: false } );
-		setAttributes( { selectedPost: post } );
+		setState( { isEditing: false, selectedPost: post } );
+		setAttributes( {
+			selectedPostId: get( post, 'id' ),
+			selectedPostType: get( post, 'type' ),
+		} );
 	};
 
-	const showToggleButton = ! isEditing || !! selectedPost;
-	const showPlaceholder = isEditing || ! selectedPost;
-	const showContent = ! isEditing && !! selectedPost;
+	const showToggleButton = ! isEditing || !! selectedPostId;
+	const showPlaceholder = isEditing || ! selectedPostId;
+	const showContent = ! isEditing && !! selectedPostId;
 
 	return (
 		<Fragment>
@@ -71,8 +86,8 @@ const edit = compose(
 								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
 								onSelectPost={ onSelectPost }
 							/>
-							{ !! selectedPost && (
-								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit' ) }</a>
+							{ !! selectedPostId && (
+								<a href={ `?post=${ selectedPostId }&action=edit` }>{ __( 'Edit' ) }</a>
 							) }
 						</div>
 					</Placeholder>
@@ -87,25 +102,14 @@ const edit = compose(
 	);
 } );
 
-const save = ( { attributes } ) => {
-	const { align, selectedPost } = attributes;
-	const className = classNames( 'a8c-content-renderer', { [ `align${ align }` ]: align } );
-	return (
-		<div className={ className }>
-			<RawHTML className="a8c-content-renderer-block__content">
-				{ get( selectedPost, 'content.rendered' ) }
-			</RawHTML>
-		</div>
-	);
-};
-
 registerBlockType( 'a8c/content-renderer', {
 	title: __( 'Content Renderer' ),
 	description: __( 'Renders the content of a post or a page.' ),
 	icon: 'layout',
 	category: 'layout',
 	attributes: {
-		selectedPost: { type: 'object' },
+		selectedPostId: { type: 'number' },
+		selectedPostType: { type: 'string' },
 	},
 	supports: {
 		align: [ 'wide', 'full' ],
@@ -114,5 +118,5 @@ registerBlockType( 'a8c/content-renderer', {
 		reusable: false,
 	},
 	edit,
-	save,
+	save: () => null,
 } );
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/render.php b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/render.php
new file mode 100644
index 00000000000000..33b3abb19341b5
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/render.php
@@ -0,0 +1,13 @@
+<?php
+
+function render_content_renderer_block( $attributes ) {
+	if ( ! $attributes['selectedPostId'] || ! is_int( $attributes['selectedPostId'] ) ) {
+		return;
+	}
+	$align = $attributes['align'] ? ' align' . $attributes['selectedPostId'] : '';
+	$post = get_post( $attributes['selectedPostId'] );
+	setup_postdata( $post );
+	$content = '<div class="a8c-content-renderer'. $align . '">' . get_the_content() . '</div>';
+	wp_reset_postdata();
+	return $content;
+}
diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php b/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
index 7e2ad9fe8e3786..dfb70b5cd90032 100644
--- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
+++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
@@ -2,7 +2,9 @@
 /**
  * Plugin Name: Full Site Editing
  */
+
 require_once( 'blocks/content-slot/index.php' );
+require_once( 'blocks/content-renderer/render.php' );
 
 class A8C_Full_Site_Editing {
 	static $initialized = false;
@@ -54,7 +56,9 @@ function register_blocks() {
 			'render_callback' => 'render_content_slot_block',
 		 ) );
 
-		register_block_type( 'a8c/content-renderer' );
+		register_block_type( 'a8c/content-renderer', array(
+			'render_callback' => 'render_content_renderer_block',
+		) );
 	}
 }
 

From 86e2897de4ca9614ce0f8452c3cfaaf7ad18ad54 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 12:50:32 +0100
Subject: [PATCH 15/19] Move edit into the edit file and rename render.php into
 index.php

---
 .../blocks/content-renderer/edit.js           | 104 ++++++++++++++++++
 .../blocks/content-renderer/index.js          |  94 +---------------
 .../{render.php => index.php}                 |   0
 .../full-site-editing-plugin.php              |   2 +-
 4 files changed, 106 insertions(+), 94 deletions(-)
 create mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/edit.js
 rename apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/{render.php => index.php} (100%)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/edit.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/edit.js
new file mode 100644
index 00000000000000..dc62627a7ea9a7
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/edit.js
@@ -0,0 +1,104 @@
+/* eslint-disable wpcalypso/jsx-classname-namespace */
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { IconButton, Placeholder, Toolbar } from '@wordpress/components';
+import { withState } from '@wordpress/compose';
+import { BlockControls } from '@wordpress/editor';
+import { Fragment, RawHTML } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostAutocomplete from '../../components/post-autocomplete';
+import fetchPost from '../../lib/fetch-post';
+import './style.scss';
+
+const setSelectedPost = async ( attributes, setState ) => {
+	const { selectedPostId, selectedPostType } = attributes;
+	const selectedPost = await fetchPost( selectedPostId, selectedPostType );
+	setState( {
+		selectedPost,
+	} );
+};
+
+const ContentRendererEdit = withState( {
+	isEditing: false,
+	selectedPost: null,
+} )( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
+	const { align, selectedPostId } = attributes;
+
+	if ( !! selectedPostId && ! selectedPost ) {
+		setSelectedPost( attributes, setState );
+	}
+
+	const toggleEditing = () => setState( { isEditing: ! isEditing } );
+
+	const onSelectPost = post => {
+		setState( { isEditing: false, selectedPost: post } );
+		setAttributes( {
+			selectedPostId: get( post, 'id' ),
+			selectedPostType: get( post, 'type' ),
+		} );
+	};
+
+	const showToggleButton = ! isEditing || !! selectedPostId;
+	const showPlaceholder = isEditing || ! selectedPostId;
+	const showContent = ! isEditing && !! selectedPostId;
+
+	return (
+		<Fragment>
+			{ showToggleButton && (
+				<BlockControls>
+					<Toolbar>
+						<IconButton
+							className={ classNames( 'components-icon-button components-toolbar__control', {
+								'is-active': isEditing,
+							} ) }
+							label={ __( 'Change Content' ) }
+							onClick={ toggleEditing }
+							icon="edit"
+						/>
+					</Toolbar>
+				</BlockControls>
+			) }
+			<div
+				className={ classNames( 'a8c-content-renderer-block', {
+					[ `align${ align }` ]: align,
+				} ) }
+			>
+				{ showPlaceholder && (
+					<Placeholder
+						icon="layout"
+						label={ __( 'Content Renderer' ) }
+						instructions={ __( 'Select something to render' ) }
+					>
+						<div className="a8c-content-renderer-block__selector">
+							<PostAutocomplete
+								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
+								onSelectPost={ onSelectPost }
+							/>
+							{ !! selectedPostId && (
+								<a href={ `?post=${ selectedPostId }&action=edit` }>{ __( 'Edit' ) }</a>
+							) }
+						</div>
+					</Placeholder>
+				) }
+				{ showContent && (
+					<RawHTML className="a8c-content-renderer-block__content">
+						{ get( selectedPost, 'content.rendered' ) }
+					</RawHTML>
+				) }
+			</div>
+		</Fragment>
+	);
+} );
+
+export default ContentRendererEdit;
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
index 4fa7c735286710..5badcd7d6b1398 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
@@ -1,107 +1,15 @@
-/* eslint-disable wpcalypso/jsx-classname-namespace */
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-import { get } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { IconButton, Placeholder, Toolbar } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-import { BlockControls } from '@wordpress/editor';
-import { Fragment, RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import PostAutocomplete from '../../components/post-autocomplete';
-import fetchPost from '../../lib/fetch-post';
+import edit from './edit';
 import './style.scss';
 
-const setSelectedPost = async ( attributes, setState ) => {
-	const { selectedPostId, selectedPostType } = attributes;
-	const selectedPost = await fetchPost( selectedPostId, selectedPostType );
-	setState( {
-		selectedPost,
-	} );
-};
-
-const edit = withState( {
-	isEditing: false,
-	selectedPost: null,
-} )( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
-	const { align, selectedPostId } = attributes;
-
-	if ( !! selectedPostId && ! selectedPost ) {
-		setSelectedPost( attributes, setState );
-	}
-
-	const toggleEditing = () => setState( { isEditing: ! isEditing } );
-
-	const onSelectPost = post => {
-		setState( { isEditing: false, selectedPost: post } );
-		setAttributes( {
-			selectedPostId: get( post, 'id' ),
-			selectedPostType: get( post, 'type' ),
-		} );
-	};
-
-	const showToggleButton = ! isEditing || !! selectedPostId;
-	const showPlaceholder = isEditing || ! selectedPostId;
-	const showContent = ! isEditing && !! selectedPostId;
-
-	return (
-		<Fragment>
-			{ showToggleButton && (
-				<BlockControls>
-					<Toolbar>
-						<IconButton
-							className={ classNames( 'components-icon-button components-toolbar__control', {
-								'is-active': isEditing,
-							} ) }
-							label={ __( 'Change Content' ) }
-							onClick={ toggleEditing }
-							icon="edit"
-						/>
-					</Toolbar>
-				</BlockControls>
-			) }
-			<div
-				className={ classNames( 'a8c-content-renderer-block', {
-					[ `align${ align }` ]: align,
-				} ) }
-			>
-				{ showPlaceholder && (
-					<Placeholder
-						icon="layout"
-						label={ __( 'Content Renderer' ) }
-						instructions={ __( 'Select something to render' ) }
-					>
-						<div className="a8c-content-renderer-block__selector">
-							<PostAutocomplete
-								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
-								onSelectPost={ onSelectPost }
-							/>
-							{ !! selectedPostId && (
-								<a href={ `?post=${ selectedPostId }&action=edit` }>{ __( 'Edit' ) }</a>
-							) }
-						</div>
-					</Placeholder>
-				) }
-				{ showContent && (
-					<RawHTML className="a8c-content-renderer-block__content">
-						{ get( selectedPost, 'content.rendered' ) }
-					</RawHTML>
-				) }
-			</div>
-		</Fragment>
-	);
-} );
-
 registerBlockType( 'a8c/content-renderer', {
 	title: __( 'Content Renderer' ),
 	description: __( 'Renders the content of a post or a page.' ),
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/render.php b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
similarity index 100%
rename from apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/render.php
rename to apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php b/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
index dfb70b5cd90032..424e468354e408 100644
--- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
+++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
@@ -4,7 +4,7 @@
  */
 
 require_once( 'blocks/content-slot/index.php' );
-require_once( 'blocks/content-renderer/render.php' );
+require_once( 'blocks/content-renderer/index.php' );
 
 class A8C_Full_Site_Editing {
 	static $initialized = false;

From 3cf411a13b3a7618461005caf48f2a55a6fd7658 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 12:52:33 +0100
Subject: [PATCH 16/19] Fix the render function

---
 .../blocks/content-renderer/index.php                     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
index 33b3abb19341b5..6640c6a193d26d 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
@@ -1,13 +1,17 @@
 <?php
 
 function render_content_renderer_block( $attributes ) {
-	if ( ! $attributes['selectedPostId'] || ! is_int( $attributes['selectedPostId'] ) ) {
+	if ( ! isset( $attributes['selectedPostId'] ) || ! is_int( $attributes['selectedPostId'] ) ) {
 		return;
 	}
 	$align = $attributes['align'] ? ' align' . $attributes['selectedPostId'] : '';
 	$post = get_post( $attributes['selectedPostId'] );
 	setup_postdata( $post );
-	$content = '<div class="a8c-content-renderer'. $align . '">' . get_the_content() . '</div>';
+
+	$content = '<div class="a8c-content-renderer'. $align . '">'
+		. apply_filters( 'the_content', get_the_content() )
+		. '</div>';
+
 	wp_reset_postdata();
 	return $content;
 }

From fe85af2ea08519fc177229bead80d0e922545cb5 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 15:13:30 +0100
Subject: [PATCH 17/19] Fix incorrect $align check

---
 .../full-site-editing-plugin/blocks/content-renderer/index.php  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
index 6640c6a193d26d..64fbefd1325f2a 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
@@ -4,7 +4,7 @@ function render_content_renderer_block( $attributes ) {
 	if ( ! isset( $attributes['selectedPostId'] ) || ! is_int( $attributes['selectedPostId'] ) ) {
 		return;
 	}
-	$align = $attributes['align'] ? ' align' . $attributes['selectedPostId'] : '';
+	$align = isset( $attributes['align'] ) ? ' align' . $attributes['align'] : '';
 	$post = get_post( $attributes['selectedPostId'] );
 	setup_postdata( $post );
 

From b1e5c310257f7ddf4c4133209e7ed73fc942d21a Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Fri, 26 Apr 2019 19:20:57 +0100
Subject: [PATCH 18/19] Rename into Template Part

---
 .../{content-renderer => template-part}/edit.js  | 16 ++++++++--------
 .../{content-renderer => template-part}/index.js |  6 +++---
 .../index.php                                    |  4 ++--
 .../style.scss                                   |  6 +++---
 .../full-site-editing-plugin.php                 |  6 +++---
 .../full-site-editing-plugin/index.js            |  2 +-
 6 files changed, 20 insertions(+), 20 deletions(-)
 rename apps/full-site-editing/full-site-editing-plugin/blocks/{content-renderer => template-part}/edit.js (86%)
 rename apps/full-site-editing/full-site-editing-plugin/blocks/{content-renderer => template-part}/index.js (76%)
 rename apps/full-site-editing/full-site-editing-plugin/blocks/{content-renderer => template-part}/index.php (76%)
 rename apps/full-site-editing/full-site-editing-plugin/blocks/{content-renderer => template-part}/style.scss (62%)

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/edit.js b/apps/full-site-editing/full-site-editing-plugin/blocks/template-part/edit.js
similarity index 86%
rename from apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/edit.js
rename to apps/full-site-editing/full-site-editing-plugin/blocks/template-part/edit.js
index dc62627a7ea9a7..2cf5df35eea57a 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/edit.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/template-part/edit.js
@@ -29,7 +29,7 @@ const setSelectedPost = async ( attributes, setState ) => {
 	} );
 };
 
-const ContentRendererEdit = withState( {
+const TemplatePartEdit = withState( {
 	isEditing: false,
 	selectedPost: null,
 } )( ( { attributes, isEditing, selectedPost, setAttributes, setState } ) => {
@@ -62,7 +62,7 @@ const ContentRendererEdit = withState( {
 							className={ classNames( 'components-icon-button components-toolbar__control', {
 								'is-active': isEditing,
 							} ) }
-							label={ __( 'Change Content' ) }
+							label={ __( 'Change Template Part' ) }
 							onClick={ toggleEditing }
 							icon="edit"
 						/>
@@ -70,17 +70,17 @@ const ContentRendererEdit = withState( {
 				</BlockControls>
 			) }
 			<div
-				className={ classNames( 'a8c-content-renderer-block', {
+				className={ classNames( 'a8c-template-part-block', {
 					[ `align${ align }` ]: align,
 				} ) }
 			>
 				{ showPlaceholder && (
 					<Placeholder
 						icon="layout"
-						label={ __( 'Content Renderer' ) }
-						instructions={ __( 'Select something to render' ) }
+						label={ __( 'Template Part' ) }
+						instructions={ __( 'Select a template part to display' ) }
 					>
-						<div className="a8c-content-renderer-block__selector">
+						<div className="a8c-template-part-block__selector">
 							<PostAutocomplete
 								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
 								onSelectPost={ onSelectPost }
@@ -92,7 +92,7 @@ const ContentRendererEdit = withState( {
 					</Placeholder>
 				) }
 				{ showContent && (
-					<RawHTML className="a8c-content-renderer-block__content">
+					<RawHTML className="a8c-template-part-block__content">
 						{ get( selectedPost, 'content.rendered' ) }
 					</RawHTML>
 				) }
@@ -101,4 +101,4 @@ const ContentRendererEdit = withState( {
 	);
 } );
 
-export default ContentRendererEdit;
+export default TemplatePartEdit;
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js b/apps/full-site-editing/full-site-editing-plugin/blocks/template-part/index.js
similarity index 76%
rename from apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
rename to apps/full-site-editing/full-site-editing-plugin/blocks/template-part/index.js
index 5badcd7d6b1398..488aea091c6716 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/template-part/index.js
@@ -10,9 +10,9 @@ import { __ } from '@wordpress/i18n';
 import edit from './edit';
 import './style.scss';
 
-registerBlockType( 'a8c/content-renderer', {
-	title: __( 'Content Renderer' ),
-	description: __( 'Renders the content of a post or a page.' ),
+registerBlockType( 'a8c/template-part', {
+	title: __( 'Template Part' ),
+	description: __( 'Display a template part.' ),
 	icon: 'layout',
 	category: 'layout',
 	attributes: {
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php b/apps/full-site-editing/full-site-editing-plugin/blocks/template-part/index.php
similarity index 76%
rename from apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
rename to apps/full-site-editing/full-site-editing-plugin/blocks/template-part/index.php
index 64fbefd1325f2a..ed96d04985db06 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/index.php
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/template-part/index.php
@@ -1,6 +1,6 @@
 <?php
 
-function render_content_renderer_block( $attributes ) {
+function render_template_part_block( $attributes ) {
 	if ( ! isset( $attributes['selectedPostId'] ) || ! is_int( $attributes['selectedPostId'] ) ) {
 		return;
 	}
@@ -8,7 +8,7 @@ function render_content_renderer_block( $attributes ) {
 	$post = get_post( $attributes['selectedPostId'] );
 	setup_postdata( $post );
 
-	$content = '<div class="a8c-content-renderer'. $align . '">'
+	$content = '<div class="a8c-template-part'. $align . '">'
 		. apply_filters( 'the_content', get_the_content() )
 		. '</div>';
 
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/style.scss b/apps/full-site-editing/full-site-editing-plugin/blocks/template-part/style.scss
similarity index 62%
rename from apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/style.scss
rename to apps/full-site-editing/full-site-editing-plugin/blocks/template-part/style.scss
index 6f8198e030a43c..c198ab7b43a0bd 100644
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-renderer/style.scss
+++ b/apps/full-site-editing/full-site-editing-plugin/blocks/template-part/style.scss
@@ -1,8 +1,8 @@
-.a8c-content-renderer-block.alignfull {
+.a8c-template-part-block.alignfull {
 	padding: 0 12px;
 }
 
-.a8c-content-renderer-block__selector {
+.a8c-template-part-block__selector {
 	width: 300px;
 	a {
 		font-family: sans-serif;
@@ -11,7 +11,7 @@
 	}
 }
 
-.a8c-content-renderer-block__content {
+.a8c-template-part-block__content {
 	pointer-events: none;
 	&::after {
 		content: '';
diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php b/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
index 424e468354e408..15232d04f34976 100644
--- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
+++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing-plugin.php
@@ -4,7 +4,7 @@
  */
 
 require_once( 'blocks/content-slot/index.php' );
-require_once( 'blocks/content-renderer/index.php' );
+require_once( 'blocks/template-part/index.php' );
 
 class A8C_Full_Site_Editing {
 	static $initialized = false;
@@ -56,8 +56,8 @@ function register_blocks() {
 			'render_callback' => 'render_content_slot_block',
 		 ) );
 
-		register_block_type( 'a8c/content-renderer', array(
-			'render_callback' => 'render_content_renderer_block',
+		register_block_type( 'a8c/template-part', array(
+			'render_callback' => 'render_template_part_block',
 		) );
 	}
 }
diff --git a/apps/full-site-editing/full-site-editing-plugin/index.js b/apps/full-site-editing/full-site-editing-plugin/index.js
index 9dd5c4433289fd..05ebde42195163 100644
--- a/apps/full-site-editing/full-site-editing-plugin/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/index.js
@@ -2,4 +2,4 @@
  * Internal dependencies
  */
 import './blocks/content-slot';
-import './blocks/content-renderer';
+import './blocks/template-part';

From a49bc5390a682329868a04e29ef951575f371626 Mon Sep 17 00:00:00 2001
From: Copons <copons@users.noreply.github.com>
Date: Mon, 29 Apr 2019 11:36:31 +0100
Subject: [PATCH 19/19] Remove rebase leftovers

---
 .../blocks/content-slot/edit.js~HEAD          | 87 -------------------
 .../blocks/content-slot/index.js~HEAD         | 27 ------
 .../blocks/content-slot/index.php~HEAD        | 11 ---
 3 files changed, 125 deletions(-)
 delete mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js~HEAD
 delete mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js~HEAD
 delete mode 100644 apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php~HEAD

diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js~HEAD b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js~HEAD
deleted file mode 100644
index 3d861ef08ad916..00000000000000
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/edit.js~HEAD
+++ /dev/null
@@ -1,87 +0,0 @@
-/* eslint-disable wpcalypso/jsx-classname-namespace */
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-import { get } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { IconButton, Placeholder, Toolbar } from '@wordpress/components';
-import { withState } from '@wordpress/compose';
-import { BlockControls } from '@wordpress/editor';
-import { Fragment, RawHTML } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import PostAutocomplete from '../../components/post-autocomplete';
-
-const ContentSlotEdit = withState( {
-	isEditing: false,
-	selectedPost: null,
-} )( ( { attributes, isEditing, selectedPost, setState } ) => {
-	const { align } = attributes;
-
-	const toggleEditing = () => setState( { isEditing: ! isEditing } );
-
-	const onSelectPost = post => {
-		setState( { isEditing: false, selectedPost: post } );
-	};
-
-	const showToggleButton = ! isEditing || !! selectedPost;
-	const showPlaceholder = isEditing || ! selectedPost;
-	const showPreview = ! isEditing && !! selectedPost;
-
-	return (
-		<Fragment>
-			{ showToggleButton && (
-				<BlockControls>
-					<Toolbar>
-						<IconButton
-							className={ classNames( 'components-icon-button components-toolbar__control', {
-								'is-active': isEditing,
-							} ) }
-							label={ __( 'Change Preview' ) }
-							onClick={ toggleEditing }
-							icon="edit"
-						/>
-					</Toolbar>
-				</BlockControls>
-			) }
-			<div
-				className={ classNames( 'a8c-content-slot-block', {
-					[ `align${ align }` ]: align,
-				} ) }
-			>
-				{ showPlaceholder && (
-					<Placeholder
-						icon="layout"
-						label={ __( 'Content Slot' ) }
-						instructions={ __( 'Placeholder for a post or a page.' ) }
-					>
-						<div className="a8c-content-slot-block__selector">
-							<div>{ __( 'Select something to preview:' ) }</div>
-							<PostAutocomplete
-								selectedPostTitle={ get( selectedPost, 'title.rendered' ) }
-								onSelectPost={ onSelectPost }
-							/>
-							{ !! selectedPost && (
-								<a href={ `?post=${ selectedPost.id }&action=edit` }>{ __( 'Edit' ) }</a>
-							) }
-						</div>
-					</Placeholder>
-				) }
-				{ showPreview && (
-					<RawHTML className="a8c-content-slot-block__preview">
-						{ get( selectedPost, 'content.rendered' ) }
-					</RawHTML>
-				) }
-			</div>
-		</Fragment>
-	);
-} );
-
-export default ContentSlotEdit;
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js~HEAD b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js~HEAD
deleted file mode 100644
index 4c4e50cacb37fd..00000000000000
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.js~HEAD
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { registerBlockType } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import edit from './edit';
-import './style.scss';
-
-registerBlockType( 'a8c/content-slot', {
-	title: __( 'Content Slot' ),
-	description: __( 'Placeholder for a post or a page.' ),
-	icon: 'layout',
-	category: 'layout',
-	supports: {
-		align: [ 'wide', 'full' ],
-		anchor: true,
-		html: false,
-		multiple: false,
-		reusable: false,
-	},
-	edit,
-	save: () => null,
-} );
diff --git a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php~HEAD b/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php~HEAD
deleted file mode 100644
index 85638e7518579f..00000000000000
--- a/apps/full-site-editing/full-site-editing-plugin/blocks/content-slot/index.php~HEAD
+++ /dev/null
@@ -1,11 +0,0 @@
-<?php
-
-function render_content_slot_block( $attributes, $content ) {
-	$align = isset( $attributes['align'] ) ? ' align' . $attributes['align'] : '';
-
-	$content = '<div class="a8c-content'. $align . '">'
-		. __( '[Renders some content]' )
-		. '</div>';
-
-	return $content;
-}