Experimental: PoC for placeholder insert, we should drop this commit

packages/block-editor/src/components/block-list-appender/index.js

@@ -33,6 +33,7 @@ function BlockListAppender( {
 	renderAppender: CustomAppender,
 	className,
 	selectedBlockClientId,
+	replaceClientId,
 	tagName: TagName = 'div',
 } ) {
 	if ( isLocked || CustomAppender === false ) {
@@ -42,7 +43,13 @@ function BlockListAppender( {
 	let appender;
 	if ( CustomAppender ) {
 		// Prefer custom render prop if provided.
-		appender = <CustomAppender />;
+		//TODO: why did we not pass any props, temp pass through for PoC
+		appender = (
+			<CustomAppender
+				replaceClientId={ replaceClientId }
+				replaceRootId={ rootClientId }
+			/>
+		);
 	} else {
 		const isDocumentAppender = ! rootClientId;
 		const isParentSelected = selectedBlockClientId === rootClientId;

packages/block-editor/src/components/block-list/block.js

@@ -33,6 +33,8 @@ import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
+import BlockListAppender from '../block-list-appender';
+import PlaceholderBlockAppender from '../placeholder-block-appender';
 
 export const BlockListBlockContext = createContext();
 
@@ -154,7 +156,16 @@ function BlockListBlock( {
 
 	let block;
 
-	if ( ! isValid ) {
+	//TODO: roll this back, this is a quick PoC
+	if ( name === 'core/placeholder' ) {
+		block = (
+			<BlockListAppender
+				className={ 'block-editor-placeholder-appender' }
+				replaceClientId={ clientId }
+				renderAppender={ PlaceholderBlockAppender }
+			/>
+		);
+	} else if ( ! isValid ) {
 		block = (
 			<Block className="has-warning">
 				<BlockInvalidWarning clientId={ clientId } />

packages/block-editor/src/components/inserter/hooks/use-insertion-point.js

@@ -44,6 +44,7 @@ function useInsertionPoint( {
 	isAppender,
 	onSelect,
 	shouldFocusBlock = true,
+	replaceClientId,
 } ) {
 	const {
 		destinationRootClientId,
@@ -109,7 +110,15 @@ function useInsertionPoint( {
 		( blocks, meta, shouldForceFocusBlock = false ) => {
 			const selectedBlock = getSelectedBlock();
 
-			if (
+			if ( replaceClientId ) {
+				replaceBlocks(
+					replaceClientId,
+					blocks,
+					null,
+					shouldFocusBlock || shouldForceFocusBlock ? 0 : null,
+					meta
+				);
+			} else if (
 				! isAppender &&
 				selectedBlock &&
 				isUnmodifiedDefaultBlock( selectedBlock )
@@ -155,6 +164,7 @@ function useInsertionPoint( {
 			destinationIndex,
 			onSelect,
 			shouldFocusBlock,
+			replaceClientId,
 		]
 	);
 

packages/block-editor/src/components/inserter/index.js

@@ -136,6 +136,7 @@ class Inserter extends Component {
 			// This prop is experimental to give some time for the quick inserter to mature
 			// Feel free to make them stable after a few releases.
 			__experimentalIsQuick: isQuick,
+			replaceClientId,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -147,6 +148,7 @@ class Inserter extends Component {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
+					replaceClientId={ replaceClientId }
 				/>
 			);
 		}

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -30,14 +30,17 @@ export default function QuickInserter( {
 	rootClientId,
 	clientId,
 	isAppender,
+	replaceClientId,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
 		onSelect,
 		rootClientId,
 		clientId,
 		isAppender,
+		replaceClientId,
 	} );
+
 	const [ blockTypes ] = useBlockTypesState(
 		destinationRootClientId,
 		onInsertBlocks
@@ -107,6 +110,7 @@ export default function QuickInserter( {
 					maxBlockPatterns={ showPatterns ? SHOWN_BLOCK_PATTERNS : 0 }
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
+					replaceClientId={ replaceClientId }
 				/>
 			</div>
 

packages/block-editor/src/components/inserter/search-results.js

@@ -38,6 +38,7 @@ function InserterSearchResults( {
 	showBlockDirectory = false,
 	isDraggable = true,
 	shouldFocusBlock = true,
+	replaceClientId,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -47,6 +48,7 @@ function InserterSearchResults( {
 		clientId,
 		isAppender,
 		shouldFocusBlock,
+		replaceClientId,
 	} );
 	const [
 		blockTypes,

packages/block-editor/src/components/placeholder-block-appender/index.js

@@ -0,0 +1,95 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Button, Tooltip, VisuallyHidden } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { _x, sprintf } from '@wordpress/i18n';
+import { Icon, plus } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import Inserter from '../inserter';
+import { store as blockEditorStore } from '../../store';
+
+function PlaceholderBlockAppender(
+	{ replaceClientId, className, onFocus, tabIndex },
+	ref
+) {
+	const rootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+			return getBlockRootClientId( replaceClientId );
+		},
+		[ replaceClientId ]
+	);
+	return (
+		<Inserter
+			position="bottom center"
+			rootClientId={ rootClientId }
+			__experimentalIsQuick
+			replaceClientId={ replaceClientId }
+			renderToggle={ ( {
+				onToggle,
+				disabled,
+				isOpen,
+				blockTitle,
+				hasSingleBlockType,
+			} ) => {
+				let label;
+				if ( hasSingleBlockType ) {
+					label = sprintf(
+						// translators: %s: the name of the block when there is only one
+						_x( 'Add %s', 'directly add the only allowed block' ),
+						blockTitle
+					);
+				} else {
+					label = _x(
+						'Add block',
+						'Generic label for block inserter button'
+					);
+				}
+				const isToggleButton = ! hasSingleBlockType;
+
+				//TODO: allow a pass through
+				let inserterButton = (
+					<Button
+						ref={ ref }
+						onFocus={ onFocus }
+						tabIndex={ tabIndex }
+						className={ classnames(
+							className,
+							'block-editor-placeholder-block-appender'
+						) }
+						onClick={ onToggle }
+						aria-haspopup={ isToggleButton ? 'true' : undefined }
+						aria-expanded={ isToggleButton ? isOpen : undefined }
+						disabled={ disabled }
+						label={ label }
+					>
+						{ ! hasSingleBlockType && (
+							<VisuallyHidden as="span">{ label }</VisuallyHidden>
+						) }
+						<Icon icon={ plus } />
+					</Button>
+				);
+
+				if ( isToggleButton || hasSingleBlockType ) {
+					inserterButton = (
+						<Tooltip text={ label }>{ inserterButton }</Tooltip>
+					);
+				}
+				return inserterButton;
+			} }
+			isAppender
+		/>
+	);
+}
+
+export default forwardRef( PlaceholderBlockAppender );

packages/block-editor/src/components/placeholder-block-appender/style.scss

@@ -0,0 +1,16 @@
+//throwaway styling for basic PoC
+.wp-block.block-list-appender.block-editor-placeholder-appender {
+	height: 36px;
+	width: 36px;
+	border: $border-width solid $gray-900;
+	margin-left: 0;
+	margin-right: 8px;
+
+	.block-editor-inserter {
+		margin-top: 6px;
+		margin-left: auto;
+		margin-right: auto;
+		padding: 6px;
+	}
+}
+

packages/block-editor/src/style.scss

@@ -41,6 +41,7 @@
 @import "./components/media-replace-flow/style.scss";
 @import "./components/media-placeholder/style.scss";
 @import "./components/multi-selection-inspector/style.scss";
+@import "./components/placeholder-block-appender/style.scss";
 @import "./components/plain-text/style.scss";
 @import "./components/responsive-block-control/style.scss";
 @import "./components/rich-text/style.scss";

packages/block-library/src/index.js

@@ -43,6 +43,7 @@ import * as missing from './missing';
 import * as more from './more';
 import * as nextpage from './nextpage';
 import * as pageList from './page-list';
+import * as placeholder from './placeholder';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
 import * as reusableBlock from './block';
@@ -153,6 +154,7 @@ export const __experimentalGetCoreBlocks = () => [
 	more,
 	nextpage,
 	pageList,
+	placeholder,
 	preformatted,
 	pullquote,
 	rss,

packages/block-library/src/placeholder/block.json

@@ -0,0 +1,11 @@
+{
+	"apiVersion": 2,
+	"name": "core/placeholder",
+	"category": "design",
+	"attributes": {},
+	"supports": {
+		"html": false
+	},
+	"editorStyle": "wp-block-placeholder-editor",
+	"style": "wp-block-placeholder"
+}

packages/block-library/src/placeholder/edit.js

@@ -0,0 +1,5 @@
+const Placeholder = () => {
+	return '';
+};
+
+export default Placeholder;

packages/block-library/src/placeholder/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { create as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: _x( 'Block Placeholder', 'block placeholder' ),
+	description: __(
+		'A block placeholder to quickly add blocks. Click on it to replace it with a specific block.'
+	),
+	icon,
+	edit,
+};

packages/block-library/src/social-links/edit.js

@@ -31,7 +31,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
 
-const ALLOWED_BLOCKS = [ 'core/social-link' ];
+const ALLOWED_BLOCKS = [ 'core/social-link', 'core/placeholder' ];
 
 const sizeOptions = [
 	{ name: __( 'Small' ), value: 'has-small-icon-size' },
@@ -94,6 +94,7 @@ export function SocialLinksEdit( props ) {
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
+		__experimentalDefaultBlock: [ 'core/placeholder' ],
 		orientation: 'horizontal',
 		placeholder: SocialPlaceholder,
 		templateLock: false,