@wordpress/block-library 6.0.25 → 6.0.26

package/src/gallery/style.scss

@@ -30,6 +30,7 @@
 		margin-top: auto;
 		margin-bottom: auto;
 		flex-direction: column;
+		max-width: 100%;
 
 		> div,
 		> a {
@@ -41,7 +42,9 @@
 		img {
 			display: block;
 			height: auto;
-			max-width: 100%;
+			// Ensure max-width is not overridden on the img when the parent gallery has
+			// wide or full alignment.
+			max-width: 100% !important;
 			width: auto;
 		}
 

package/src/gallery/transforms.js

@@ -291,7 +291,10 @@ const transforms = {
 									url,
 									alt,
 									caption,
-									imageSizeSlug,
+									sizeSlug: imageSizeSlug,
+									linkDestination,
+									href,
+									linkTarget,
 								},
 							} ) =>
 								createBlock( 'core/image', {
@@ -301,6 +304,9 @@ const transforms = {
 									caption,
 									sizeSlug: imageSizeSlug,
 									align,
+									linkDestination,
+									href,
+									linkTarget,
 								} )
 						);
 					}

package/src/gallery/utils.js

@@ -5,6 +5,8 @@ import {
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
+	LINK_DESTINATION_MEDIA_WP_CORE,
+	LINK_DESTINATION_ATTACHMENT_WP_CORE,
 } from './constants';
 import {
 	LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT,
@@ -21,15 +23,17 @@ import {
  * @return {Object}            New attributes to assign to image block.
  */
 export function getHrefAndDestination( image, destination ) {
-	// Need to determine the URL that the selected destination maps to.
-	// Gutenberg and WordPress use different constants so the new link
-	// destination also needs to be tweaked.
+	// Gutenberg and WordPress use different constants so if image_default_link_type
+	// option is set we need to map from the WP Core values.
+
 	switch ( destination ) {
+		case LINK_DESTINATION_MEDIA_WP_CORE:
 		case LINK_DESTINATION_MEDIA:
 			return {
 				href: image?.source_url || image?.url, // eslint-disable-line camelcase
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
 			};
+		case LINK_DESTINATION_ATTACHMENT_WP_CORE:
 		case LINK_DESTINATION_ATTACHMENT:
 			return {
 				href: image?.link,

package/src/heading/edit.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import {
 	AlignmentControl,
@@ -41,6 +41,14 @@ function HeadingEdit( {
 		style,
 	} );
 
+	const { canGenerateAnchors } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+
+		return {
+			canGenerateAnchors: !! settings.__experimentalGenerateAnchors,
+		};
+	}, [] );
+
 	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
 		blockEditorStore
 	);
@@ -48,6 +56,10 @@ function HeadingEdit( {
 	// Initially set anchor for headings that have content but no anchor set.
 	// This is used when transforming a block to heading, or for legacy anchors.
 	useEffect( () => {
+		if ( ! canGenerateAnchors ) {
+			return;
+		}
+
 		if ( ! anchor && content ) {
 			// This side-effect should not create an undo level.
 			__unstableMarkNextChangeAsNotPersistent();
@@ -59,14 +71,15 @@ function HeadingEdit( {
 
 		// Remove anchor map when block unmounts.
 		return () => setAnchor( clientId, null );
-	}, [ content, anchor ] );
+	}, [ anchor, content, clientId, canGenerateAnchors ] );
 
 	const onContentChange = ( value ) => {
 		const newAttrs = { content: value };
 		if (
-			! anchor ||
-			! value ||
-			generateAnchor( clientId, content ) === anchor
+			canGenerateAnchors &&
+			( ! anchor ||
+				! value ||
+				generateAnchor( clientId, content ) === anchor )
 		) {
 			newAttrs.anchor = generateAnchor( clientId, value );
 		}

package/src/image/style.scss

@@ -2,8 +2,6 @@
 	margin: 0 0 1em 0;
 
 	img {
-		height: auto;
-		max-width: 100%;
 		vertical-align: bottom;
 	}
 

package/src/page-list/edit.js

@@ -12,7 +12,12 @@ import {
 	useBlockProps,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import { ToolbarButton, Placeholder, Spinner } from '@wordpress/components';
+import {
+	ToolbarButton,
+	Placeholder,
+	Spinner,
+	Notice,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -29,7 +34,7 @@ import { ItemSubmenuIcon } from '../navigation-link/icons';
 const MAX_PAGE_COUNT = 100;
 
 export default function PageListEdit( { context, clientId } ) {
-	const { pagesByParentId, totalPages } = usePagesByParentId();
+	const { pagesByParentId, totalPages, hasResolvedPages } = usePageData();
 
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const allowConvertToLinks =
@@ -70,16 +75,29 @@ export default function PageListEdit( { context, clientId } ) {
 					clientId={ clientId }
 				/>
 			) }
-			{ totalPages === undefined && (
+			{ ! hasResolvedPages && (
 				<div { ...blockProps }>
 					<Placeholder>
 						<Spinner />
 					</Placeholder>
 				</div>
 			) }
+
+			{ hasResolvedPages && totalPages === null && (
+				<div { ...blockProps }>
+					<div { ...blockProps }>
+						<Notice status={ 'warning' } isDismissible={ false }>
+							{ __( 'Page List: Cannot retrieve Pages.' ) }
+						</Notice>
+					</div>
+				</div>
+			) }
+
 			{ totalPages === 0 && (
 				<div { ...blockProps }>
-					<span>{ __( 'Page List: No pages to show.' ) }</span>
+					<Notice status={ 'info' } isDismissible={ false }>
+						{ __( 'Page List: Cannot retrieve Pages.' ) }
+					</Notice>
 				</div>
 			) }
 			{ totalPages > 0 && (
@@ -94,9 +112,16 @@ export default function PageListEdit( { context, clientId } ) {
 	);
 }
 
-function usePagesByParentId() {
-	const { pages } = useSelect( ( select ) => {
-		const { getEntityRecords } = select( coreStore );
+function useFrontPageId() {
+	return useSelect( ( select ) => {
+		const site = select( coreStore ).getEntityRecord( 'root', 'site' );
+		return site?.show_on_front === 'page' && site?.page_on_front;
+	}, [] );
+}
+
+function usePageData() {
+	const { pages, hasResolvedPages } = useSelect( ( select ) => {
+		const { getEntityRecords, hasFinishedResolution } = select( coreStore );
 
 		return {
 			pages: getEntityRecords( 'postType', 'page', {
@@ -105,6 +130,16 @@ function usePagesByParentId() {
 				_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
 				per_page: -1,
 			} ),
+			hasResolvedPages: hasFinishedResolution( 'getEntityRecords', [
+				'postType',
+				'page',
+				{
+					orderby: 'menu_order',
+					order: 'asc',
+					_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
+					per_page: -1,
+				},
+			] ),
 		};
 	}, [] );
 
@@ -125,9 +160,10 @@ function usePagesByParentId() {
 
 		return {
 			pagesByParentId,
-			totalPages: pages?.length,
+			hasResolvedPages,
+			totalPages: pages?.length ?? null,
 		};
-	}, [ pages ] );
+	}, [ pages, hasResolvedPages ] );
 }
 
 const PageItems = memo( function PageItems( {
@@ -137,6 +173,7 @@ const PageItems = memo( function PageItems( {
 	depth = 0,
 } ) {
 	const pages = pagesByParentId.get( parentId );
+	const frontPageId = useFrontPageId();
 
 	if ( ! pages?.length ) {
 		return [];
@@ -155,6 +192,7 @@ const PageItems = memo( function PageItems( {
 					'open-on-hover-click':
 						! context.openSubmenusOnClick &&
 						context.showSubmenuIcon,
+					'menu-item-home': page.id === frontPageId,
 				} ) }
 			>
 				{ hasChildren && context.openSubmenusOnClick ? (

package/src/page-list/editor.scss

@@ -64,3 +64,7 @@
 		}
 	}
 }
+
+.wp-block-page-list .components-notice {
+	margin-left: 0;
+}

package/src/page-list/index.php

@@ -173,6 +173,11 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			}
 		}
 
+		$front_page_id = (int) get_option( 'page_on_front' );
+		if ( (int) $page['page_id'] === $front_page_id ) {
+			$css_class .= ' menu-item-home';
+		}
+
 		$title      = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );
 		$aria_label = sprintf(
 			/* translators: Accessibility text. %s: Parent page title. */

package/src/post-featured-image/dimension-controls.js

@@ -1,22 +1,15 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
 import {
-	PanelBody,
 	__experimentalUnitControl as UnitControl,
-	Flex,
-	FlexItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useSetting } from '@wordpress/block-editor';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
 
 const SCALE_OPTIONS = (
 	<>
@@ -38,6 +31,8 @@ const SCALE_OPTIONS = (
 	</>
 );
 
+const DEFAULT_SCALE = 'cover';
+
 const scaleHelp = {
 	cover: __(
 		'Image is scaled and cropped to fill the entire space without being distorted.'
@@ -51,6 +46,7 @@ const scaleHelp = {
 };
 
 const DimensionControls = ( {
+	clientId,
 	attributes: { width, height, scale },
 	setAttributes,
 } ) => {
@@ -72,53 +68,82 @@ const DimensionControls = ( {
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
-		<PanelBody title={ __( 'Dimensions' ) }>
-			<Flex
-				justify="space-between"
-				className={ classNames(
-					'block-library-post-featured-image-dimension-controls',
-					{ 'scale-control-is-visible': !! height }
-				) }
+		<InspectorControls __experimentalGroup="dimensions">
+			<ToolsPanelItem
+				className="single-column"
+				hasValue={ () => !! height }
+				label={ __( 'Height' ) }
+				onDeselect={ () => setAttributes( { height: undefined } ) }
+				resetAllFilter={ () => ( {
+					height: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
+			>
+				<UnitControl
+					label={ __( 'Height' ) }
+					labelPosition="top"
+					value={ height || '' }
+					min={ 0 }
+					onChange={ ( nextHeight ) =>
+						onDimensionChange( 'height', nextHeight )
+					}
+					units={ units }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
+				className="single-column"
+				hasValue={ () => !! width }
+				label={ __( 'Width' ) }
+				onDeselect={ () => setAttributes( { width: undefined } ) }
+				resetAllFilter={ () => ( {
+					width: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
 			>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Height' ) }
-						labelPosition="top"
-						value={ height || '' }
-						onChange={ ( nextHeight ) => {
-							onDimensionChange( 'height', nextHeight );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Width' ) }
-						labelPosition="top"
-						value={ width || '' }
-						onChange={ ( nextWidth ) => {
-							onDimensionChange( 'width', nextWidth );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-			</Flex>
+				<UnitControl
+					label={ __( 'Width' ) }
+					labelPosition="top"
+					value={ width || '' }
+					min={ 0 }
+					onChange={ ( nextWidth ) =>
+						onDimensionChange( 'width', nextWidth )
+					}
+					units={ units }
+				/>
+			</ToolsPanelItem>
 			{ !! height && (
-				<ToggleGroupControl
+				<ToolsPanelItem
+					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }
-					value={ scale }
-					help={ scaleHelp[ scale ] }
-					onChange={ ( value ) => {
+					onDeselect={ () =>
 						setAttributes( {
-							scale: value,
-						} );
-					} }
-					isBlock
+							scale: DEFAULT_SCALE,
+						} )
+					}
+					resetAllFilter={ () => ( {
+						scale: DEFAULT_SCALE,
+					} ) }
+					isShownByDefault={ true }
+					panelId={ clientId }
 				>
-					{ SCALE_OPTIONS }
-				</ToggleGroupControl>
+					<ToggleGroupControl
+						label={ scaleLabel }
+						value={ scale }
+						help={ scaleHelp[ scale ] }
+						onChange={ ( value ) =>
+							setAttributes( {
+								scale: value,
+							} )
+						}
+						isBlock
+					>
+						{ SCALE_OPTIONS }
+					</ToggleGroupControl>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</InspectorControls>
 	);
 };
 

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

@@ -46,6 +46,7 @@ const placeholderChip = (
 );
 
 function PostFeaturedImageDisplay( {
+	clientId,
 	attributes,
 	setAttributes,
 	context: { postId, postType, queryId },
@@ -136,11 +137,12 @@ function PostFeaturedImageDisplay( {
 
 	return (
 		<>
+			<DimensionControls
+				clientId={ clientId }
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+			/>
 			<InspectorControls>
-				<DimensionControls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-				/>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ sprintf(

package/src/post-featured-image/editor.scss

@@ -128,11 +128,3 @@ div[data-type="core/post-featured-image"] {
 		display: block;
 	}
 }
-
-.block-library-post-featured-image-dimension-controls {
-	margin-bottom: $grid-unit-10;
-
-	&.scale-control-is-visible {
-		margin-bottom: $grid-unit-20;
-	}
-}

package/src/post-template/style.scss

@@ -11,6 +11,11 @@
 	list-style: none;
 	padding: 0;
 
+	// Unset background colors that can be inherited from Global Styles with extra specificity.
+	&.wp-block-post-template {
+		background: none;
+	}
+
 	&.is-flex-container {
 		flex-direction: row;
 		display: flex;

package/src/search/index.php

@@ -43,16 +43,18 @@ function render_block_core_search( $attributes ) {
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 
+	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
+
 	$label_markup = sprintf(
 		'<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
-		$input_id,
-		empty( $attributes['label'] ) ? __( 'Search' ) : esc_html( $attributes['label'] )
+		esc_attr( $input_id ),
+		$label_inner_html
 	);
 	if ( $show_label && ! empty( $attributes['label'] ) ) {
 		$label_markup = sprintf(
 			'<label for="%1$s" class="wp-block-search__label">%2$s</label>',
 			$input_id,
-			esc_html( $attributes['label'] )
+			$label_inner_html
 		);
 	}
 
@@ -77,7 +79,7 @@ function render_block_core_search( $attributes ) {
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
-				$button_internal_markup = esc_html( $attributes['buttonText'] );
+				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
 			$button_classes        .= ' has-icon';

package/src/site-logo/edit.js

@@ -358,7 +358,7 @@ export default function LogoEdit( {
 	setAttributes,
 	isSelected,
 } ) {
-	const { className: styleClass, width, shouldSyncIcon } = attributes;
+	const { width, shouldSyncIcon } = attributes;
 	const [ logoUrl, setLogoUrl ] = useState();
 	const ref = useRef();
 
@@ -406,39 +406,8 @@ export default function LogoEdit( {
 		};
 	}, [] );
 
-	const { getGlobalBlockCount } = useSelect( blockEditorStore );
 	const { editEntityRecord } = useDispatch( coreStore );
 
-	useEffect( () => {
-		// Cleanup function to discard unsaved changes to the icon and logo when
-		// the block is removed.
-		return () => {
-			// Do nothing if the block is being rendered in the styles preview or the
-			// block inserter.
-			if (
-				styleClass?.includes(
-					'block-editor-block-types-list__site-logo-example'
-				) ||
-				styleClass?.includes(
-					'block-editor-block-styles__block-preview-container'
-				)
-			) {
-				return;
-			}
-
-			const logoBlockCount = getGlobalBlockCount( 'core/site-logo' );
-
-			// Only discard unsaved changes if we are removing the last Site Logo block
-			// on the page.
-			if ( logoBlockCount === 0 ) {
-				editEntityRecord( 'root', 'site', undefined, {
-					site_logo: undefined,
-					site_icon: undefined,
-				} );
-			}
-		};
-	}, [] );
-
 	const setLogo = ( newValue, shouldForceSync = false ) => {
 		// `shouldForceSync` is used to force syncing when the attribute
 		// may not have updated yet.

package/src/site-logo/index.php

@@ -14,7 +14,7 @@
  */
 function render_block_core_site_logo( $attributes ) {
 	$adjust_width_height_filter = function ( $image ) use ( $attributes ) {
-		if ( empty( $attributes['width'] ) || empty( $image ) ) {
+		if ( empty( $attributes['width'] ) || empty( $image ) || ! $image[1] || ! $image[2] ) {
 			return $image;
 		}
 		$height = (float) $attributes['width'] / ( (float) $image[1] / (float) $image[2] );

package/src/site-title/index.php

@@ -35,7 +35,6 @@ function render_block_core_site_title( $attributes ) {
 		);
 		if ( '_blank' === $attributes['linkTarget'] ) {
 			$link_attrs[] = 'target="_blank"';
-			$link_attrs[] = 'aria-label="' . esc_attr__( '(opens in a new tab)' ) . '"';
 		}
 		$site_title = sprintf( '<a %1$s>%2$s</a>', implode( ' ', $link_attrs ), $site_title );
 	}

package/src/social-links/deprecated.js

@@ -49,65 +49,6 @@ const migrateWithLayout = ( attributes ) => {
 
 // Social Links block deprecations.
 const deprecated = [
-	// Implement `flex` layout.
-	{
-		attributes: {
-			iconColor: {
-				type: 'string',
-			},
-			customIconColor: {
-				type: 'string',
-			},
-			iconColorValue: {
-				type: 'string',
-			},
-			iconBackgroundColor: {
-				type: 'string',
-			},
-			customIconBackgroundColor: {
-				type: 'string',
-			},
-			iconBackgroundColorValue: {
-				type: 'string',
-			},
-			openInNewTab: {
-				type: 'boolean',
-				default: false,
-			},
-			size: {
-				type: 'string',
-			},
-		},
-		supports: {
-			align: [ 'left', 'center', 'right' ],
-			anchor: true,
-			__experimentalExposeControlsToChildren: true,
-		},
-		isEligible: ( { layout } ) => ! layout,
-		migrate: migrateWithLayout,
-		save( props ) {
-			const {
-				attributes: {
-					iconBackgroundColorValue,
-					iconColorValue,
-					itemsJustification,
-					size,
-				},
-			} = props;
-
-			const className = classNames( size, {
-				'has-icon-color': iconColorValue,
-				'has-icon-background-color': iconBackgroundColorValue,
-				[ `items-justified-${ itemsJustification }` ]: itemsJustification,
-			} );
-
-			return (
-				<ul { ...useBlockProps.save( { className } ) }>
-					<InnerBlocks.Content />
-				</ul>
-			);
-		},
-	},
 	// V1. Remove CSS variable use for colors.
 	{
 		attributes: {

package/src/social-links/edit.js

@@ -192,7 +192,7 @@ export function SocialLinksEdit( props ) {
 									iconBackgroundColorValue: colorValue,
 								} );
 							},
-							label: __( 'Icon background color' ),
+							label: __( 'Icon background' ),
 						},
 					] }
 				/>

package/src/spacer/block.json

@@ -7,11 +7,11 @@
 	"textdomain": "default",
 	"attributes": {
 		"height": {
-			"type": "number",
-			"default": 100
+			"type": "string",
+			"default": "100px"
 		},
 		"width": {
-			"type": "number"
+			"type": "string"
 		}
 	},
 	"usesContext": [ "orientation" ],