@wordpress/block-library 9.44.0 → 9.45.0

package/src/navigation-link/link-ui/dialog-wrapper.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Button, VisuallyHidden } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Shared BackButton component for consistent navigation across LinkUI sub-components.

package/src/navigation-link/link-ui/index.js

@@ -5,7 +5,6 @@ import { __unstableStripHTML as stripHTML, focus } from '@wordpress/dom';
 import {
 	Popover,
 	Button,
-	VisuallyHidden,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -20,6 +19,7 @@ import {
 import { useResourcePermissions } from '@wordpress/core-data';
 import { plus } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
+import { VisuallyHidden } from '@wordpress/ui';
 import { isURL } from '@wordpress/url';
 
 /**

package/src/paragraph/use-enter.js

@@ -9,24 +9,20 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import {
 	hasBlockSupport,
 	createBlock,
+	cloneBlock,
 	getDefaultBlockName,
 } from '@wordpress/blocks';
 
 export function useOnEnter( props ) {
 	const { batch } = useRegistry();
-	const {
-		moveBlocksToPosition,
-		replaceInnerBlocks,
-		duplicateBlocks,
-		insertBlock,
-	} = useDispatch( blockEditorStore );
+	const { moveBlocksToPosition, replaceBlocks, selectionChange } =
+		useDispatch( blockEditorStore );
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
 		getBlockOrder,
 		getBlockName,
 		getBlock,
-		getNextBlockClientId,
 		canInsertBlockType,
 	} = useSelect( blockEditorStore );
 	const propsRef = useRef( props );
@@ -104,24 +100,22 @@ export function useOnEnter( props ) {
 
 			// If it is in the middle, split the block in two.
 			const wrapperBlock = getBlock( wrapperClientId );
+			const head = cloneBlock( {
+				...wrapperBlock,
+				innerBlocks: wrapperBlock.innerBlocks.slice( 0, position ),
+			} );
+			const middle = createBlock( defaultBlockName );
+			const tail = cloneBlock( {
+				...wrapperBlock,
+				innerBlocks: wrapperBlock.innerBlocks.slice( position + 1 ),
+			} );
+
 			batch( () => {
-				duplicateBlocks( [ wrapperClientId ] );
-				const blockIndex = getBlockIndex( wrapperClientId );
-
-				replaceInnerBlocks(
-					wrapperClientId,
-					wrapperBlock.innerBlocks.slice( 0, position )
-				);
-				replaceInnerBlocks(
-					getNextBlockClientId( wrapperClientId ),
-					wrapperBlock.innerBlocks.slice( position + 1 )
-				);
-				insertBlock(
-					createBlock( defaultBlockName ),
-					blockIndex + 1,
-					grandparentClientId,
-					true
-				);
+				replaceBlocks( wrapperClientId, [ head, middle, tail ] );
+				// The selected paragraph is a descendant of the replaced
+				// wrapper, so `replaceBlocks` leaves the selection stale.
+				// Move it to the new default block explicitly.
+				selectionChange( middle.clientId );
 			} );
 		}
 

package/src/post-author/edit.js

@@ -20,7 +20,7 @@ import {
 	ComboboxControl,
 	SelectControl,
 	ToggleControl,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -341,11 +341,11 @@ function PostAuthorEdit( {
 						alignment="left"
 						spacing={ 4 }
 					>
-						<Text as="p">
+						<WCText as="p">
 							{ __(
 								'This block is no longer supported. Recreate its design with the Avatar, Author Name and Author Biography blocks.'
 							) }
-						</Text>
+						</WCText>
 						<Button
 							variant="primary"
 							onClick={ transformBlock }
@@ -356,7 +356,6 @@ function PostAuthorEdit( {
 					</VStack>
 				</InspectorControlsLastItem>
 			) }
-
 			<BlockControls group="block">
 				<AlignmentControl
 					value={ textAlign }
@@ -365,7 +364,6 @@ function PostAuthorEdit( {
 					} }
 				/>
 			</BlockControls>
-
 			<div { ...blockProps }>
 				{ showAvatar && (
 					<div className="wp-block-post-author__avatar">

package/src/post-comments-form/edit.js

@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import { VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies

package/src/post-featured-image/edit.js

@@ -278,15 +278,8 @@ export default function PostFeaturedImageEdit( {
 							}
 						>
 							<ToggleControl
-								label={
-									postType?.labels.singular_name
-										? sprintf(
-												// translators: %s: Name of the post type e.g: "post".
-												__( 'Link to %s' ),
-												postType.labels.singular_name
-										  )
-										: __( 'Link to post' )
-								}
+								__nextHasNoMarginBottom
+								label={ __( 'Make image a link' ) }
 								onChange={ () =>
 									setAttributes( { isLink: ! isLink } )
 								}

package/src/post-template/edit.js

@@ -116,7 +116,11 @@ export default function PostTemplateEdit( {
 	attributes: { layout },
 	__unstableLayoutClassNames,
 } ) {
-	const { type: layoutType, columnCount = 3 } = layout || {};
+	const {
+		type: layoutType,
+		columnCount = 3,
+		minimumColumnWidth,
+	} = layout || {};
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 	const { posts, blocks } = useSelect(
 		( select ) => {
@@ -281,6 +285,8 @@ export default function PostTemplateEdit( {
 		className: clsx( __unstableLayoutClassNames, {
 			[ `columns-${ columnCount }` ]:
 				layoutType === 'grid' && columnCount, // Ensure column count is flagged via classname for backwards compatibility.
+			'has-native-responsive-grid':
+				layoutType === 'grid' && columnCount && minimumColumnWidth, // Flag native responsive grid when minimum column width is provided.
 		} ),
 	} );
 

package/src/post-template/index.php

@@ -94,6 +94,9 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	if ( isset( $attributes['layout']['type'] ) && 'grid' === $attributes['layout']['type'] && ! empty( $attributes['layout']['columnCount'] ) ) {
 		$classnames .= ' ' . sanitize_title( 'columns-' . $attributes['layout']['columnCount'] );
 	}
+	if ( isset( $attributes['layout']['type'] ) && 'grid' === $attributes['layout']['type'] && ! empty( $attributes['layout']['columnCount'] ) && ! empty( $attributes['layout']['minimumColumnWidth'] ) ) {
+		$classnames .= ' has-native-responsive-grid';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classnames ) ) );
 

package/src/post-template/style.scss

@@ -32,9 +32,9 @@
 	}
 }
 
-@media ( max-width: $break-small ) {
+@media (max-width: $break-small) {
 	// Temporary specificity bump until "wp-container" layout specificity is revisited.
-	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
+	.wp-block-post-template-is-layout-grid[class*="columns-"]:not(.has-native-responsive-grid) {
 		grid-template-columns: 1fr;
 	}
 }

package/src/pullquote/block.json

@@ -43,10 +43,7 @@
 			}
 		},
 		"dimensions": {
-			"minHeight": true,
-			"__experimentalDefaultControls": {
-				"minHeight": false
-			}
+			"minHeight": true
 		},
 		"spacing": {
 			"margin": true,

package/src/query/edit/inspector-controls/author-control.js

@@ -75,7 +75,7 @@ function AuthorControl( { value, onChange } ) {
 			value={ sanitizedValue }
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
-			__experimentalShowHowTo={ false }
+			help=""
 			__next40pxDefaultSize
 		/>
 	);

package/src/query/edit/inspector-controls/format-controls.js

@@ -81,7 +81,7 @@ export default function FormatControls( { onChange, query: { format } } ) {
 					format: formatNamesToValues( newValues, formats ),
 				} );
 			} }
-			__experimentalShowHowTo={ false }
+			help=""
 			__experimentalExpandOnFocus
 			__next40pxDefaultSize
 		/>

package/src/query/edit/inspector-controls/parent-control.js

@@ -138,7 +138,7 @@ function ParentControl( { parents, postType, onChange } ) {
 			onInputChange={ debouncedSearch }
 			suggestions={ suggestions }
 			onChange={ onParentChange }
-			__experimentalShowHowTo={ false }
+			help=""
 		/>
 	);
 }

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -242,7 +242,7 @@ function TaxonomyItem( {
 				suggestions={ suggestions }
 				displayTransform={ decodeEntities }
 				onChange={ onTermsChange }
-				__experimentalShowHowTo={ false }
+				help=""
 				__next40pxDefaultSize
 			/>
 		</div>

package/src/site-logo/edit.js

@@ -51,7 +51,9 @@ import { unlock } from '../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const { mediaEditKey } = unlock( blockEditorPrivateApis );
+const { mediaEditKey, openMediaEditorModalKey } = unlock(
+	blockEditorPrivateApis
+);
 
 const SiteLogo = ( {
 	alt,
@@ -78,22 +80,26 @@ const SiteLogo = ( {
 	const blockEditingMode = useBlockEditingMode();
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 
-	const { imageEditing, maxWidth, title, editMediaEntity } = useSelect(
-		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
-			const siteEntities = select( coreStore ).getEntityRecord(
-				'root',
-				'__unstableBase'
-			);
-			return {
-				title: siteEntities?.name,
-				imageEditing: settings.imageEditing,
-				maxWidth: settings.maxWidth,
-				editMediaEntity: settings?.[ mediaEditKey ],
-			};
-		},
-		[]
-	);
+	const {
+		imageEditing,
+		maxWidth,
+		title,
+		editMediaEntity,
+		openMediaEditorModal,
+	} = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		const siteEntities = select( coreStore ).getEntityRecord(
+			'root',
+			'__unstableBase'
+		);
+		return {
+			title: siteEntities?.name,
+			imageEditing: settings.imageEditing,
+			maxWidth: settings.maxWidth,
+			editMediaEntity: settings?.[ mediaEditKey ],
+			openMediaEditorModal: settings?.[ openMediaEditorModalKey ],
+		};
+	}, [] );
 
 	useEffect( () => {
 		// Turn the `Use as site icon` toggle off if it is on but the logo and icon have
@@ -110,6 +116,12 @@ const SiteLogo = ( {
 		}
 	}, [ isSelected ] );
 
+	const handleMediaUpdate = ( { id: newId } ) => {
+		if ( typeof newId === 'number' && newId !== logoId ) {
+			setLogo( newId );
+		}
+	};
+
 	function onResizeStart() {
 		toggleSelection( false );
 	}
@@ -282,11 +294,11 @@ const SiteLogo = ( {
 		),
 		{
 			a: (
-				// eslint-disable-next-line jsx-a11y/anchor-has-content
+				// eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-no-target-blank
 				<a
 					href={ siteIconSettingsUrl }
 					target="_blank"
-					rel="noopener noreferrer"
+					rel="noopener"
 				/>
 			),
 		}
@@ -388,7 +400,15 @@ const SiteLogo = ( {
 				shouldShowCropAndDimensions && (
 					<BlockControls group="block">
 						<ToolbarButton
-							onClick={ () => setIsEditingImage( true ) }
+							onClick={
+								openMediaEditorModal && logoId
+									? () =>
+											openMediaEditorModal( {
+												id: logoId,
+												onUpdate: handleMediaUpdate,
+											} )
+									: () => setIsEditingImage( true )
+							}
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>

package/src/style.scss

@@ -76,10 +76,10 @@
 @use "./tag-cloud/style.scss" as *;
 @use "./tab/style.scss" as *;
 @use "./tab-panel/style.scss" as *;
+@use "./tab-panels/style.scss" as *;
 @use "./table/style.scss" as *;
 @use "./table-of-contents/style.scss" as *;
 @use "./tabs/style.scss" as *;
-@use "./tabs-menu-item/style.scss" as *;
 @use "./term-count/style.scss" as *;
 @use "./term-description/style.scss" as *;
 @use "./term-name/style.scss" as *;

package/src/tab/block.json

@@ -4,26 +4,23 @@
 	"apiVersion": 3,
 	"name": "core/tab",
 	"title": "Tab",
-	"description": "Content for a tab in a tabbed interface.",
-	"version": "1.0.0",
+	"description": "A single tab button in the tab list.",
 	"category": "design",
 	"textdomain": "default",
-	"attributes": {
-		"label": {
-			"type": "string",
-			"default": ""
-		}
-	},
-	"parent": [ "core/tab-panel" ],
+	"parent": [ "core/tab-list" ],
 	"usesContext": [
+		"core/tabs-list",
 		"core/tabs-activeTabIndex",
 		"core/tabs-editorActiveTabIndex",
-		"core/tabs-id"
+		"core/tab-index",
+		"core/tab-id",
+		"core/tab-label"
 	],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"reusable": false,
+		"visibility": false,
+		"lock": false,
 		"color": {
 			"background": true,
 			"text": true,
@@ -32,25 +29,28 @@
 				"text": true
 			}
 		},
-		"layout": true,
-		"spacing": {
-			"blockGap": true,
-			"padding": true,
-			"margin": false
-		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,
+			"textAlign": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"__experimentalFontFamily": true
+				"fontSize": true
 			}
 		},
-		"renaming": true
-	},
-	"providesContext": {
-		"core/tab-label": "label"
+		"spacing": {
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
 	},
 	"editorScript": "file:./index.js",
+	"editorStyle": "file:./editor.css",
 	"style": "file:./style-index.css"
 }

package/src/tab/controls.js

@@ -1,65 +1,19 @@
 /**
  * WordPress dependencies
  */
-import {
-	InspectorControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	CheckboxControl,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { BlockControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from './add-tab-toolbar-control';
-import RemoveTabToolbarControl from './remove-tab-toolbar-control';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-
-export default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
+export default function Controls( { tabsClientId } ) {
 	return (
-		<>
+		<BlockControls>
 			<AddTabToolbarControl tabsClientId={ tabsClientId } />
 			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () => {
-						updateBlockAttributes( tabsClientId, {
-							activeTabIndex: 0,
-						} );
-					} }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					<ToolsPanelItem
-						label={ __( 'Default tab' ) }
-						hasValue={ () => isDefaultTab && blockIndex !== 0 }
-						onDeselect={ () => {
-							updateBlockAttributes( tabsClientId, {
-								activeTabIndex: 0,
-							} );
-						} }
-						isShownByDefault
-					>
-						<CheckboxControl
-							label={ __( 'Default tab' ) }
-							checked={ isDefaultTab }
-							onChange={ ( value ) => {
-								updateBlockAttributes( tabsClientId, {
-									activeTabIndex: value ? blockIndex : 0,
-								} );
-							} }
-						/>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			</InspectorControls>
-		</>
+		</BlockControls>
 	);
 }