@wordpress/block-library 9.29.1-next.f34ab90e9.0 → 9.30.0

package/src/query/edit/query-placeholder.js

@@ -8,18 +8,21 @@ import {
 } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
 import {
-	useBlockProps,
 	store as blockEditorStore,
 	__experimentalBlockVariationPicker,
+	BlockControls,
+	useBlockProps,
 } from '@wordpress/block-editor';
 import { Button, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { useScopedBlockVariations } from '../utils';
 import { useBlockPatterns } from './pattern-selection';
+import QueryToolbar from './query-toolbar';
 
 export default function QueryPlaceholder( {
 	attributes,
@@ -28,7 +31,18 @@ export default function QueryPlaceholder( {
 	openPatternSelectionModal,
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
-	const blockProps = useBlockProps();
+	const [ containerWidth, setContainerWidth ] = useState( 0 );
+
+	// Use ResizeObserver to monitor container width.
+	const resizeObserverRef = useResizeObserver( ( [ entry ] ) => {
+		setContainerWidth( entry.contentRect.width );
+	} );
+
+	const SMALL_CONTAINER_BREAKPOINT = 160;
+
+	const isSmallContainer =
+		containerWidth > 0 && containerWidth < SMALL_CONTAINER_BREAKPOINT;
+
 	const { blockType, activeBlockVariation } = useSelect(
 		( select ) => {
 			const { getActiveBlockVariation, getBlockType } =
@@ -49,6 +63,10 @@ export default function QueryPlaceholder( {
 		activeBlockVariation?.icon ||
 		blockType?.icon?.src;
 	const label = activeBlockVariation?.title || blockType?.title;
+	const blockProps = useBlockProps( {
+		ref: resizeObserverRef,
+	} );
+
 	if ( isStartingBlank ) {
 		return (
 			<QueryVariationPicker
@@ -61,14 +79,24 @@ export default function QueryPlaceholder( {
 	}
 	return (
 		<div { ...blockProps }>
+			<BlockControls>
+				<QueryToolbar
+					clientId={ clientId }
+					attributes={ attributes }
+					hasInnerBlocks={ false }
+				/>
+			</BlockControls>
 			<Placeholder
-				icon={ icon }
-				label={ label }
-				instructions={ __(
-					'Choose a pattern for the query loop or start blank.'
-				) }
+				className="block-editor-media-placeholder"
+				icon={ ! isSmallContainer && icon }
+				label={ ! isSmallContainer && label }
+				instructions={
+					! isSmallContainer &&
+					__( 'Choose a pattern for the query loop or start blank.' )
+				}
+				withIllustration={ isSmallContainer }
 			>
-				{ !! hasPatterns && (
+				{ !! hasPatterns && ! isSmallContainer && (
 					<Button
 						__next40pxDefaultSize
 						variant="primary"
@@ -78,15 +106,17 @@ export default function QueryPlaceholder( {
 					</Button>
 				) }
 
-				<Button
-					__next40pxDefaultSize
-					variant="secondary"
-					onClick={ () => {
-						setIsStartingBlank( true );
-					} }
-				>
-					{ __( 'Start blank' ) }
-				</Button>
+				{ ! isSmallContainer && (
+					<Button
+						__next40pxDefaultSize
+						variant="secondary"
+						onClick={ () => {
+							setIsStartingBlank( true );
+						} }
+					>
+						{ __( 'Start blank' ) }
+					</Button>
+				) }
 			</Placeholder>
 		</div>
 	);

package/src/query/edit/query-toolbar.js

@@ -14,12 +14,20 @@ import { __ } from '@wordpress/i18n';
  */
 import PatternSelection, { useBlockPatterns } from './pattern-selection';
 
-export default function QueryToolbar( { clientId, attributes } ) {
+export default function QueryToolbar( {
+	clientId,
+	attributes,
+	hasInnerBlocks,
+} ) {
 	const hasPatterns = useBlockPatterns( clientId, attributes ).length;
 	if ( ! hasPatterns ) {
 		return null;
 	}
 
+	const buttonLabel = hasInnerBlocks
+		? __( 'Change design' )
+		: __( 'Choose pattern' );
+
 	return (
 		<ToolbarGroup className="wp-block-template-part__block-control-group">
 			<DropdownContentWrapper>
@@ -33,7 +41,7 @@ export default function QueryToolbar( { clientId, attributes } ) {
 							aria-expanded={ isOpen }
 							onClick={ onToggle }
 						>
-							{ __( 'Change design' ) }
+							{ buttonLabel }
 						</ToolbarButton>
 					) }
 					renderContent={ () => (

package/src/query/editor.scss

@@ -1,5 +1,4 @@
 .block-library-query-pattern__selection-modal {
-
 	.block-editor-block-patterns-list {
 		column-count: 2;
 		column-gap: $grid-unit-30;
@@ -53,3 +52,9 @@
 		margin-bottom: 0;
 	}
 }
+
+// Provide special styling for the placeholder.
+// @todo this particular minimal style of placeholder could be componentized further.
+.wp-block-query > .block-editor-media-placeholder.is-small {
+	min-height: 60px;
+}

package/src/template-part/edit/placeholder.js

@@ -17,6 +17,7 @@ import {
 	useTemplatePartArea,
 } from './utils/hooks';
 import TitleModal from './title-modal';
+import { getTemplatePartIcon } from './utils/get-template-part-icon';
 
 export default function TemplatePartPlaceholder( {
 	area,
@@ -54,7 +55,7 @@ export default function TemplatePartPlaceholder( {
 
 	return (
 		<Placeholder
-			icon={ areaObject.icon }
+			icon={ getTemplatePartIcon( areaObject.icon ) }
 			label={ areaObject.label }
 			instructions={
 				isBlockBasedTheme

package/src/video/edit.js

@@ -20,6 +20,7 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -55,6 +56,8 @@ function VideoEdit( {
 	const { id, controls, poster, src, tracks } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const blockEditingMode = useBlockEditingMode();
+	const hasNonContentControls = blockEditingMode === 'default';
 
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
@@ -251,7 +254,9 @@ function VideoEdit( {
 					isSelected={ isSingleSelected }
 					insertBlocksAfter={ insertBlocksAfter }
 					label={ __( 'Video caption text' ) }
-					showToolbarButton={ isSingleSelected }
+					showToolbarButton={
+						isSingleSelected && hasNonContentControls
+					}
 				/>
 			</figure>
 		</>