Post Content: Add button for picking patterns to appender

docs/reference-guides/data/data-core-customize-widgets.md

@@ -78,6 +78,7 @@ _Parameters_
 -   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
 -   _value.rootClientId_ `string`: The root client ID to insert at.
 -   _value.insertionIndex_ `number`: The index to insert at.
+-   _value.initialTab_ `string`: The id of the tab to display first when the block editor inserter is opened. A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
 
 _Returns_
 

docs/reference-guides/data/data-core-edit-widgets.md

@@ -215,6 +215,7 @@ _Parameters_
 -   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
 -   _value.rootClientId_ `string`: The root client ID to insert at.
 -   _value.insertionIndex_ `number`: The index to insert at.
+-   _value.initialTab_ `string`: The id of the tab to display first when the block editor inserter is opened. A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
 
 _Returns_
 

docs/reference-guides/data/data-core-editor.md

@@ -1382,6 +1382,7 @@ _Parameters_
 -   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
 -   _value.rootClientId_ `string`: The root client ID to insert at.
 -   _value.insertionIndex_ `number`: The index to insert at.
+-   _value.initialTab_ `string`: The id of the tab to display first when the block editor inserter is opened. A category corresponds to one of the tab ids defined in packages/block-editor/src/components/inserter/tabs.js.
 
 _Returns_
 

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

@@ -616,6 +616,10 @@ function BlockListBlockProvider( props ) {
 					),
 				isEditingDisabled:
 					getBlockEditingMode( clientId ) === 'disabled',
+				hasEditableOutline:
+					getBlockEditingMode( clientId ) !== 'disabled' &&
+					getBlockEditingMode( getBlockRootClientId( clientId ) ) ===
+						'disabled',
 				className: hasLightBlockWrapper
 					? attributes.className
 					: undefined,
@@ -660,6 +664,7 @@ function BlockListBlockProvider( props ) {
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
+		hasEditableOutline,
 		className,
 		defaultClassName,
 	} = selectedProps;
@@ -695,6 +700,7 @@ function BlockListBlockProvider( props ) {
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
+		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
 		defaultClassName,
 		mayDisplayControls,

packages/block-editor/src/components/block-list/content.scss

@@ -300,35 +300,30 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-// Indicate which blocks are editable within a locked context.
-// 1. User must be hovering an editor with renderingMode = 'template-lock'; or...
-.is-template-locked:hover,
-// ...a container block.
-.block-editor-block-list__block:hover {
-	// 2. Look for locked blocks; or...
-	.block-editor-block-list__block.is-editing-disabled,
-	// ...container blocks that have locked children.
-	&:has(> .block-editor-block-list__block.is-editing-disabled) {
-		// 3. Highlight any unlocked children of that locked block.
-		& > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) {
-			&::after {
-				content: "";
-				border-style: dotted;
-				position: absolute;
-				pointer-events: none;
-				top: $border-width;
-				left: $border-width;
-				right: $border-width;
-				bottom: $border-width;
-				border: 1px dotted var(--wp-admin-theme-color);
-				border-radius: $radius-block-ui - $border-width;
-			}
+@keyframes block-editor-has-editable-outline__fade-out-animation {
+	from {
+		border-color: rgba(var(--wp-admin-theme-color--rgb), 1);
+	}
+	to {
+		border-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+	}
+}
 
-			&.is-hovered::after {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
-				border: none;
-			}
-		}
+.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline {
+	&::after {
+		content: "";
+		position: absolute;
+		pointer-events: none;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border: 1px dotted rgba(var(--wp-admin-theme-color--rgb), 1);
+		border-radius: $radius-block-ui;
+		animation: block-editor-has-editable-outline__fade-out-animation 0.3s ease-out;
+		animation-delay: 3s;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
 	}
 }
 

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -95,6 +95,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isBlockMovingMode,
 		canInsertMovingBlock,
 		isEditingDisabled,
+		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
 		defaultClassName,
 	} = useContext( PrivateBlockContext );
@@ -152,6 +153,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-block-moving-mode': isBlockMovingMode,
 				'can-insert-moving-block': canInsertMovingBlock,
 				'is-editing-disabled': isEditingDisabled,
+				'has-editable-outline': hasEditableOutline,
 				'is-content-locked-temporarily-editing-as-blocks':
 					isTemporarilyEditingAsBlocks,
 			},

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

@@ -21,6 +21,7 @@ function InserterLibrary(
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
 		__experimentalFilterValue,
+		initialInserterTab,
 		onSelect = noop,
 		shouldFocusBlock = false,
 	},
@@ -46,6 +47,7 @@ function InserterLibrary(
 			isAppender={ isAppender }
 			showInserterHelpPanel={ showInserterHelpPanel }
 			showMostUsedBlocks={ showMostUsedBlocks }
+			initialInserterTab={ initialInserterTab }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }

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

@@ -45,6 +45,7 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
+		initialInserterTab,
 	},
 	ref
 ) {
@@ -56,8 +57,9 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState( null );
-
+	const [ selectedTab, setSelectedTab ] = useState(
+		initialInserterTab || null
+	);
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
 			rootClientId,
@@ -259,6 +261,7 @@ function InserterMenu(
 						showMedia={ showMedia }
 						onSelect={ handleSetSelectedTab }
 						tabsContents={ inserterTabsContents }
+						initialTabId={ initialInserterTab }
 					/>
 				) }
 				{ ! delayedFilterValue && ! showAsTabs && (

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

@@ -33,16 +33,21 @@ function InserterTabs( {
 	showMedia = false,
 	onSelect,
 	tabsContents,
+	initialTabId,
 } ) {
 	const tabs = [
 		blocksTab,
 		showPatterns && patternsTab,
 		showMedia && mediaTab,
 	].filter( Boolean );
 
+	initialTabId = !! tabs.find( ( { name } ) => initialTabId === name )
+		? initialTabId
+		: 'blocks';
+
 	return (
 		<div className="block-editor-inserter__tabs">
-			<Tabs onSelect={ onSelect }>
+			<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>
 				<Tabs.TabList>
 					{ tabs.map( ( tab ) => (
 						<Tabs.Tab key={ tab.name } tabId={ tab.name }>

packages/block-editor/src/components/use-flash-editable-blocks/index.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export default function useFlashEditableBlocks( rootClientId = '' ) {
+	const { getEnabledClientIdsTree } = unlock( useSelect( blockEditorStore ) );
+
+	return useRefEffect( ( element ) => {
+		const flashEditableBlocks = () => {
+			getEnabledClientIdsTree( rootClientId ).forEach(
+				( { clientId } ) => {
+					const blockElement = element.querySelector(
+						`[data-block="${ clientId }"]`
+					);
+					if ( ! blockElement ) {
+						return;
+					}
+					blockElement.classList.remove( 'has-editable-outline' );
+					// Force reflow to trigger the animation.
+					// eslint-disable-next-line no-unused-expressions
+					blockElement.offsetWidth;
+					blockElement.classList.add( 'has-editable-outline' );
+				}
+			);
+		};
+
+		const handleClick = ( event ) => {
+			const shouldFlash =
+				event.target === element ||
+				event.target.classList.contains( 'is-root-container' );
+			if ( ! shouldFlash ) {
+				return;
+			}
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			event.preventDefault();
+			flashEditableBlocks();
+		};
+
+		element.addEventListener( 'click', handleClick );
+		return () => {
+			element.removeEventListener( 'click', handleClick );
+		};
+	} );
+}

packages/block-editor/src/private-apis.js

@@ -24,6 +24,7 @@ import {
 import { usesContextKey } from './components/rich-text/format-edit';
 import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
+import useFlashEditableBlocks from './components/use-flash-editable-blocks';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -52,4 +53,5 @@ lock( privateApis, {
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 	usesContextKey,
+	useFlashEditableBlocks,
 } );

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

@@ -35,7 +35,9 @@ import { parse, cloneBlock } from '@wordpress/blocks';
  */
 import { unlock } from '../lock-unlock';
 
-const { useLayoutClasses } = unlock( blockEditorPrivateApis );
+const { useLayoutClasses, useFlashEditableBlocks } = unlock(
+	blockEditorPrivateApis
+);
 const { PARTIAL_SYNCING_SUPPORTED_BLOCKS } = unlock( patternsPrivateApis );
 
 function isPartiallySynced( block ) {
@@ -273,6 +275,7 @@ export default function ReusableBlockEdit( {
 	const layoutClasses = useLayoutClasses( { layout }, name );
 
 	const blockProps = useBlockProps( {
+		ref: useFlashEditableBlocks( patternClientId ),
 		className: classnames(
 			'block-library-block__reusable-block-container',
 			layout && layoutClasses,

packages/block-library/src/editor.scss

@@ -54,6 +54,7 @@
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
 @import "./post-comments-form/editor.scss";
+@import "./post-content/editor.scss";
 
 @import "./editor-elements.scss";