@wordpress/block-library 9.46.0 → 9.48.0

package/src/cover/test/edit.js

@@ -54,6 +54,29 @@ async function createAndSelectBlock() {
 	await selectBlock( 'Block: Cover' );
 }
 
+async function openStylesTabIfAvailable() {
+	const stylesTab = screen.queryByRole( 'tab', {
+		name: 'Styles',
+	} );
+
+	if ( stylesTab ) {
+		await userEvent.click( stylesTab );
+	}
+}
+
+async function selectViewportState( name ) {
+	await userEvent.click(
+		screen.getByRole( 'button', {
+			name: 'State: Default',
+		} )
+	);
+	await userEvent.click(
+		screen.getByRole( 'menuitem', {
+			name,
+		} )
+	);
+}
+
 describe( 'Cover block', () => {
 	describe( 'Editor canvas', () => {
 		test( 'shows placeholder if background image and color not set', async () => {
@@ -189,6 +212,21 @@ describe( 'Cover block', () => {
 					} )
 				).not.toBeInTheDocument();
 			} );
+			test( 'does not display settings tab when media settings are empty', async () => {
+				await setup();
+				await createAndSelectBlock();
+
+				expect(
+					screen.queryByRole( 'tab', {
+						name: 'Settings',
+					} )
+				).not.toBeInTheDocument();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Advanced',
+					} )
+				).toBeInTheDocument();
+			} );
 			test( 'displays media settings panel if url is set', async () => {
 				await setup( {
 					url: 'http://localhost/my-image.jpg',
@@ -275,11 +313,7 @@ describe( 'Cover block', () => {
 
 				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
 
-				await userEvent.click(
-					screen.getByRole( 'tab', {
-						name: 'Styles',
-					} )
-				);
+				await openStylesTabIfAvailable();
 				// Need act here as the isDark method is async.
 				// eslint-disable-next-line testing-library/no-unnecessary-act
 				await act( async () => {
@@ -308,11 +342,7 @@ describe( 'Cover block', () => {
 
 				expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-100' );
 
-				await userEvent.click(
-					screen.getByRole( 'tab', {
-						name: 'Styles',
-					} )
-				);
+				await openStylesTabIfAvailable();
 
 				// Need act here as the isDark method is async.
 				// eslint-disable-next-line testing-library/no-unnecessary-act
@@ -332,9 +362,7 @@ describe( 'Cover block', () => {
 				test( 'does not render overlay control', async () => {
 					await setup( undefined, true, disabledColorSettings );
 					await selectBlock( 'Block: Cover' );
-					await userEvent.click(
-						screen.getByRole( 'tab', { name: 'Styles' } )
-					);
+					await openStylesTabIfAvailable();
 
 					const overlayControl = screen.queryByRole( 'button', {
 						name: 'Overlay',
@@ -345,9 +373,7 @@ describe( 'Cover block', () => {
 				test( 'does not render opacity control', async () => {
 					await setup( undefined, true, disabledColorSettings );
 					await selectBlock( 'Block: Cover' );
-					await userEvent.click(
-						screen.getByRole( 'tab', { name: 'Styles' } )
-					);
+					await openStylesTabIfAvailable();
 
 					const opacityControl = screen.queryByRole( 'slider', {
 						name: 'Overlay opacity',
@@ -356,17 +382,38 @@ describe( 'Cover block', () => {
 					expect( opacityControl ).not.toBeInTheDocument();
 				} );
 			} );
+
+			test( 'does not render overlay controls when a viewport state is selected', async () => {
+				await setup();
+				await createAndSelectBlock();
+				await openStylesTabIfAvailable();
+
+				expect(
+					screen.getByRole( 'button', {
+						name: 'Overlay',
+					} )
+				).toBeInTheDocument();
+
+				await selectViewportState( 'Tablet' );
+
+				expect(
+					screen.queryByRole( 'button', {
+						name: 'Overlay',
+					} )
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByRole( 'slider', {
+						name: 'Overlay opacity',
+					} )
+				).not.toBeInTheDocument();
+			} );
 		} );
 
 		describe( 'Dimensions panel', () => {
 			test( 'sets minHeight attribute when number control value changed', async () => {
 				await setup();
 				await createAndSelectBlock();
-				await userEvent.click(
-					screen.getByRole( 'tab', {
-						name: 'Styles',
-					} )
-				);
+				await openStylesTabIfAvailable();
 				await userEvent.clear(
 					screen.getByLabelText( 'Minimum height' )
 				);
@@ -395,11 +442,7 @@ describe( 'Cover block', () => {
 			expect( coverBlock ).toHaveClass( 'is-light' );
 
 			await selectBlock( 'Block: Cover' );
-			await userEvent.click(
-				screen.getByRole( 'tab', {
-					name: 'Styles',
-				} )
-			);
+			await openStylesTabIfAvailable();
 			await userEvent.click( screen.getByText( 'Overlay' ) );
 			const popupColorPicker = screen.getByRole( 'option', {
 				name: 'Black',
@@ -416,11 +459,7 @@ describe( 'Cover block', () => {
 			const coverBlock = screen.getByLabelText( 'Block: Cover' );
 			expect( coverBlock ).toHaveClass( 'is-light' );
 			await selectBlock( 'Block: Cover' );
-			await userEvent.click(
-				screen.getByRole( 'tab', {
-					name: 'Styles',
-				} )
-			);
+			await openStylesTabIfAvailable();
 			await userEvent.click( screen.getByText( 'Overlay' ) );
 			// The default color is black, so clicking the black color button will remove the background color,
 			// which should remove the isDark setting and assign the is-light class.

package/src/embed/embed-no-preview.native.js

@@ -14,7 +14,11 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { requestPreview } from '@wordpress/react-native-bridge';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { BottomSheet, Icon, TextControl } from '@wordpress/components';
+import {
+	BottomSheet,
+	Icon as WCIcon,
+	TextControl,
+} from '@wordpress/components';
 import { help } from '@wordpress/icons';
 import { BlockIcon } from '@wordpress/block-editor';
 
@@ -150,7 +154,7 @@ const EmbedNoPreview = ( {
 						onPress={ onPressHelp }
 						style={ helpIconStyle }
 					>
-						<Icon
+						<WCIcon
 							icon={ help }
 							fill={ helpIconStyle.fill }
 							size={ helpIconStyle.width }
@@ -167,7 +171,7 @@ const EmbedNoPreview = ( {
 			>
 				<View style={ styles[ 'embed-no-preview__container' ] }>
 					<View style={ sheetIconStyle }>
-						<Icon
+						<WCIcon
 							icon={ help }
 							fill={ sheetIconStyle.fill }
 							size={ sheetIconStyle.width }

package/src/embed/embed-placeholder.native.js

@@ -8,7 +8,7 @@ import { View, Text, TouchableOpacity } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { Icon, Picker } from '@wordpress/components';
+import { Icon as WCIcon, Picker } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 import { useRef } from '@wordpress/element';
 
@@ -110,7 +110,7 @@ const EmbedPlaceholder = ( {
 			<View style={ containerStyle }>
 				{ cannotEmbed ? (
 					<>
-						<Icon
+						<WCIcon
 							icon={ noticeOutline }
 							fill={ embedIconErrorStyle.fill }
 							style={ embedIconErrorStyle }

package/src/file/edit.native.js

@@ -31,7 +31,7 @@ import {
 	ToggleControl,
 	TextControl,
 	SelectControl,
-	Icon,
+	Icon as WCIcon,
 } from '@wordpress/components';
 import {
 	file as icon,
@@ -476,7 +476,7 @@ export class FileEdit extends Component {
 									/>
 									{ isUploadFailed && (
 										<View style={ styles.errorContainer }>
-											<Icon
+											<WCIcon
 												icon={ cautionFilled }
 												style={ errorIconStyle }
 											/>

package/src/freeform/migration-notice.js

@@ -44,7 +44,7 @@ export default function MigrationNotice( { content, onReplace } ) {
 	return (
 		<Warning actions={ actions }>
 			{ __(
-				'The Classic block is being phased out. Convert this content to blocks for the best editing experience, or move it to a Custom HTML block to preserve the markup as-is.'
+				'The Classic block is being phased out. Convert this content to blocks for the best editing experience, or move it to a Custom HTML block to preserve the original markup.'
 			) }
 		</Warning>
 	);

package/src/gallery/editor.scss

@@ -21,20 +21,6 @@
 		flex-basis: 100%;
 	}
 
-	.wp-block-image {
-		.components-notice.is-error {
-			display: block;
-		}
-		.components-notice__content {
-			margin: 4px 0;
-		}
-		.components-notice__dismiss {
-			position: absolute;
-			top: 0;
-			right: 5px;
-		}
-	}
-
 	// @todo this deserves a refactor, by being moved to the toolbar.
 	.block-editor-media-placeholder.is-appender {
 		.components-placeholder__label {

package/src/home-link/block.json

@@ -11,6 +11,13 @@
 		"label": {
 			"type": "string",
 			"role": "content"
+		},
+		"opensInNewTab": {
+			"type": "boolean",
+			"default": false
+		},
+		"description": {
+			"type": "string"
 		}
 	},
 	"usesContext": [

package/src/home-link/edit.js

@@ -6,21 +6,74 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import {
+	Button,
+	CheckboxControl,
+	TextControl,
+	TextareaControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { external } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const preventDefault = ( event ) => event.preventDefault();
 
 export default function HomeEdit( { attributes, setAttributes, context } ) {
-	const homeUrl = useSelect( ( select ) => {
+	const {
+		homeUrl,
+		onNavigateToEntityRecord,
+		frontPageId,
+		frontPageTemplateId,
+	} = useSelect( ( select ) => {
+		const { getEntityRecord, getDefaultTemplateId, canUser } =
+			select( coreStore );
+
 		// Site index.
-		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
-			?.home;
+		const baseUrl = getEntityRecord( 'root', '__unstableBase' )?.home;
+
+		// Front-page data (only available if the user can read site settings).
+		const canReadSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} );
+		const site = canReadSettings ? getEntityRecord( 'root', 'site' ) : null;
+		const resolvedFrontPageId =
+			site?.show_on_front === 'page' ? site?.page_on_front : null;
+
+		// When no specific front page is set, fall back to the front-page template.
+		const resolvedFrontPageTemplateId = ! resolvedFrontPageId
+			? getDefaultTemplateId( { slug: 'front-page' } )
+			: null;
+
+		return {
+			homeUrl: baseUrl,
+			onNavigateToEntityRecord:
+				select( blockEditorStore ).getSettings()
+					.onNavigateToEntityRecord,
+			frontPageId: resolvedFrontPageId,
+			frontPageTemplateId: resolvedFrontPageTemplateId,
+		};
 	}, [] );
 
 	const { textColor, backgroundColor, style } = context;
+	const { label, opensInNewTab, description } = attributes;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const blockProps = useBlockProps( {
 		className: clsx( 'wp-block-navigation-item', {
 			'has-text-color': !! textColor || !! style?.color?.text,
@@ -35,24 +88,134 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 	} );
 
 	return (
-		<div { ...blockProps }>
-			<a
-				className="wp-block-home-link__content wp-block-navigation-item__content"
-				href={ homeUrl }
-				onClick={ preventDefault }
-			>
-				<RichText
-					identifier="label"
-					className="wp-block-home-link__label"
-					value={ attributes.label ?? __( 'Home' ) }
-					onChange={ ( labelValue ) => {
-						setAttributes( { label: labelValue } );
+		<>
+			<InspectorControls group="content">
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							label: '',
+							opensInNewTab: false,
+							description: '',
+						} );
 					} }
-					aria-label={ __( 'Home link text' ) }
-					placeholder={ __( 'Add home link' ) }
-					withoutInteractiveFormatting
-				/>
-			</a>
-		</div>
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () => !! label }
+						label={ __( 'Text' ) }
+						onDeselect={ () => setAttributes( { label: '' } ) }
+						isShownByDefault
+					>
+						<TextControl
+							__next40pxDefaultSize
+							label={ __( 'Text' ) }
+							value={ label ? stripHTML( label ) : '' }
+							onChange={ ( labelValue ) => {
+								setAttributes( { label: labelValue } );
+							} }
+							autoComplete="off"
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => !! opensInNewTab }
+						label={ __( 'Open in new tab' ) }
+						onDeselect={ () =>
+							setAttributes( { opensInNewTab: false } )
+						}
+						isShownByDefault
+					>
+						<CheckboxControl
+							label={ __( 'Open in new tab' ) }
+							checked={ opensInNewTab }
+							onChange={ ( value ) =>
+								setAttributes( { opensInNewTab: value } )
+							}
+						/>
+					</ToolsPanelItem>
+					{ onNavigateToEntityRecord &&
+						( frontPageId || frontPageTemplateId ) && (
+							<Button
+								variant="secondary"
+								onClick={ () => {
+									if ( frontPageId ) {
+										onNavigateToEntityRecord( {
+											postId: frontPageId,
+											postType: 'page',
+										} );
+									} else {
+										onNavigateToEntityRecord( {
+											postId: frontPageTemplateId,
+											postType: 'wp_template',
+										} );
+									}
+								} }
+								__next40pxDefaultSize
+								className="navigation-link-to__action-button"
+							>
+								{ __( 'Edit' ) }
+							</Button>
+						) }
+					{ homeUrl && (
+						<Button
+							variant="secondary"
+							href={ homeUrl }
+							target="_blank"
+							icon={ external }
+							iconPosition="right"
+							__next40pxDefaultSize
+							className="navigation-link-to__action-button"
+						>
+							{ __( 'View' ) }
+						</Button>
+					) }
+					<ToolsPanelItem
+						hasValue={ () => !! description }
+						label={ __( 'Description' ) }
+						onDeselect={ () =>
+							setAttributes( { description: '' } )
+						}
+						isShownByDefault
+					>
+						<TextareaControl
+							label={ __( 'Description' ) }
+							value={ description || '' }
+							onChange={ ( descriptionValue ) => {
+								setAttributes( {
+									description: descriptionValue,
+								} );
+							} }
+							help={ __(
+								'The description will be displayed in the menu if the current theme supports it.'
+							) }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</InspectorControls>
+			<div { ...blockProps }>
+				<a
+					className="wp-block-home-link__content wp-block-navigation-item__content"
+					href={ homeUrl }
+					onClick={ preventDefault }
+				>
+					<RichText
+						identifier="label"
+						className="wp-block-home-link__label"
+						value={ label ?? __( 'Home' ) }
+						onChange={ ( labelValue ) => {
+							setAttributes( { label: labelValue } );
+						} }
+						aria-label={ __( 'Home link text' ) }
+						placeholder={ __( 'Add label…' ) }
+						withoutInteractiveFormatting
+					/>
+					{ description && (
+						<span className="wp-block-navigation-item__description">
+							{ description }
+						</span>
+					) }
+				</a>
+			</div>
+		</>
 	);
 }

package/src/home-link/index.php

@@ -129,12 +129,24 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 		$aria_current = ' aria-current="page"';
 	}
 
+	$target = '';
+	if ( isset( $attributes['opensInNewTab'] ) && true === $attributes['opensInNewTab'] ) {
+		$target = ' target="_blank"';
+	}
+
+	$description = '';
+	if ( ! empty( $attributes['description'] ) ) {
+		$description = '<span class="wp-block-navigation-item__description">' . wp_kses_post( $attributes['description'] ) . '</span>';
+	}
+
 	return sprintf(
-		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" rel="home"%3$s>%4$s</a></li>',
+		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" rel="home" %3$s%4$s>%5$s%6$s</a></li>',
 		block_core_home_link_build_li_wrapper_attributes( $block->context ),
 		esc_url( home_url() ),
+		$target,
 		$aria_current,
-		wp_kses_post( $attributes['label'] )
+		wp_kses_post( $attributes['label'] ),
+		$description
 	);
 }
 

package/src/html/edit.js

@@ -49,12 +49,13 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 						{ __( 'Edit HTML' ) }
 					</Button>
 				</Placeholder>
-				<HTMLEditModal
-					isOpen={ isModalOpen }
-					onRequestClose={ () => setIsModalOpen( false ) }
-					content={ attributes.content }
-					setAttributes={ setAttributes }
-				/>
+				{ isModalOpen && (
+					<HTMLEditModal
+						onRequestClose={ () => setIsModalOpen( false ) }
+						content={ attributes.content }
+						setAttributes={ setAttributes }
+					/>
+				) }
 			</div>
 		);
 	}
@@ -84,12 +85,13 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				</VStack>
 			</InspectorControls>
 			<Preview content={ attributes.content } isSelected={ isSelected } />
-			<HTMLEditModal
-				isOpen={ isModalOpen }
-				onRequestClose={ () => setIsModalOpen( false ) }
-				content={ attributes.content }
-				setAttributes={ setAttributes }
-			/>
+			{ isModalOpen && (
+				<HTMLEditModal
+					onRequestClose={ () => setIsModalOpen( false ) }
+					content={ attributes.content }
+					setAttributes={ setAttributes }
+				/>
+			) }
 		</div>
 	);
 }

package/src/html/modal.js

@@ -27,7 +27,6 @@ import { parseContent, serializeContent } from './utils';
 const { Tabs } = unlock( componentsPrivateApis );
 
 export default function HTMLEditModal( {
-	isOpen,
 	onRequestClose,
 	content,
 	setAttributes,
@@ -54,10 +53,6 @@ export default function HTMLEditModal( {
 	const hasRestrictedContent =
 		! canUserUseUnfilteredHTML && ( css.trim() || js.trim() );
 
-	if ( ! isOpen ) {
-		return null;
-	}
-
 	const handleUpdate = () => {
 		// For users without unfiltered_html capability, strip CSS and JS content
 		// to prevent kses from leaving broken content

package/src/image/block.json

@@ -105,6 +105,10 @@
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "target"
+		},
+		"isDecorative": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {