prep build 03/08

bph · Mar 8, 2024 · fe186f7 · fe186f7
2 parents 56e012d + a0cb09b
commit fe186f7
Show file tree

Hide file tree

Showing 32 changed files with 182 additions and 92 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -12,7 +12,7 @@ The elements highlighted are:
 
 1. **Inserter:** A panel for inserting blocks into the content canvas
 2. **Content canvas:** The content editor, which holds content created with blocks
-3. **Settings Sidebar:** A sidebar panel for configuring a block’s settings when selected or the settings of the post
+3. **Settings Panel** A panel for configuring a block’s settings when selected or the settings of the post
 
 Through the Block Editor, you create content modularly using blocks. Many [blocks](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/) are available in WordPress by default, and you can also [create your own](https://developer.wordpress.org/block-editor/getting-started/create-block/).
 

diff --git a/docs/how-to-guides/enqueueing-assets-in-the-editor.md b/docs/how-to-guides/enqueueing-assets-in-the-editor.md
@@ -55,11 +55,11 @@ function example_enqueue_editor_content_assets() {
     if ( is_admin() ) {
         wp_enqueue_script(
             'example-editor-content-scripts',
-            plugins_url( 'constent-scripts.css', __FILE__ )
+            plugins_url( 'content-scripts.js', __FILE__ )
         );
         wp_enqueue_style(
             'example-editor-content-styles',
-            plugins_url( 'constent-styles.css', __FILE__ )
+            plugins_url( 'content-styles.css', __FILE__ )
         );
     }
 }

diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js
@@ -142,6 +142,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 
 		return () => {
 			controller.stop();
+			controller.set( { x: 0, y: 0 } );
 		};
 	}, [
 		previous,

diff --git a/packages/block-editor/src/private-apis.native.js b/packages/block-editor/src/private-apis.native.js
@@ -3,6 +3,7 @@
  */
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
+import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import { lock } from './lock-unlock';
 
 /**
@@ -12,4 +13,5 @@ export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
+	getRichTextValues,
 } );
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
@@ -329,16 +329,13 @@ const withBlockTree =
 				// If there are no replaced blocks, it means we're removing blocks so we need to update their parent.
 				const parentsOfRemovedBlocks = [];
 				for ( const clientId of action.clientIds ) {
+					const parentId = state.parents.get( clientId );
 					if (
-						state.parents.get( clientId ) !== undefined &&
-						( state.parents.get( clientId ) === '' ||
-							newState.byClientId.get(
-								state.parents.get( clientId )
-							) )
+						parentId !== undefined &&
+						( parentId === '' ||
+							newState.byClientId.get( parentId ) )
 					) {
-						parentsOfRemovedBlocks.push(
-							state.parents.get( clientId )
-						);
+						parentsOfRemovedBlocks.push( parentId );
 					}
 				}
 				updateParentInnerBlocksInTree(
@@ -351,16 +348,13 @@ const withBlockTree =
 			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
 				const parentsOfRemovedBlocks = [];
 				for ( const clientId of action.clientIds ) {
+					const parentId = state.parents.get( clientId );
 					if (
-						state.parents.get( clientId ) !== undefined &&
-						( state.parents.get( clientId ) === '' ||
-							newState.byClientId.get(
-								state.parents.get( clientId )
-							) )
+						parentId !== undefined &&
+						( parentId === '' ||
+							newState.byClientId.get( parentId ) )
 					) {
-						parentsOfRemovedBlocks.push(
-							state.parents.get( clientId )
-						);
+						parentsOfRemovedBlocks.push( parentId );
 					}
 				}
 				newState.tree = new Map( newState.tree );

diff --git a/packages/block-library/src/block/test/edit.native.js b/packages/block-library/src/block/test/edit.native.js
@@ -6,6 +6,8 @@ import {
 	initializeEditor,
 	fireEvent,
 	within,
+	setupApiFetch,
+	triggerBlockListLayout,
 } from 'test/helpers';
 
 /**
@@ -42,6 +44,7 @@ const getMockedReusableBlock = ( id ) => ( {
 	id,
 	title: { raw: `Reusable block - ${ id }` },
 	type: 'wp_block',
+	meta: { footnotes: '' },
 } );
 
 beforeAll( () => {
@@ -187,4 +190,68 @@ describe( 'Synced patterns', () => {
 		expect( reusableBlock ).toBeDefined();
 		expect( headingInnerBlock ).toBeDefined();
 	} );
+
+	it( 'renders block after content is updated due to a side effect', async () => {
+		// We have to use different ids because entities are cached in memory.
+		const id = 5;
+		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
+		const endpoint = `/wp/v2/blocks/${ id }`;
+		const fetchMedia = {
+			request: {
+				path: `/wp/v2/media/1?context=edit`,
+			},
+			response: {
+				source_url: 'https://cldup.com/cXyG__fTLN.jpg',
+				id: 1,
+				// We need to include the sizes to trigger the side effect.
+				media_details: {
+					sizes: {
+						large: {
+							source_url:
+								'https://cldup.com/cXyG__fTLN.jpg?w=500',
+						},
+					},
+				},
+			},
+		};
+
+		// Return mocked response for the block endpoint.
+		fetchRequest.mockImplementation( ( { path } ) => {
+			let response = {};
+			if ( path.startsWith( endpoint ) ) {
+				response = getMockedReusableBlock( id );
+			}
+			// Replace content with an Image block to trigger a side effect.
+			// The side effect will be produced when the `source` attribute is replaced
+			// with an URL that includes the width query parameter:
+			// https://cldup.com/cXyG__fTLN.jpg => https://cldup.com/cXyG__fTLN.jpg?w=500
+			response.content.raw = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
+<figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></figure>
+<!-- /wp:image -->`;
+			return Promise.resolve( response );
+		} );
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+
+		const reusableBlock = await screen.findByLabelText(
+			/Pattern Block\. Row 1/
+		);
+
+		// Mock media fetch requests
+		setupApiFetch( [ fetchMedia ] );
+
+		await triggerBlockListLayout(
+			within( reusableBlock ).getByTestId( 'block-list-wrapper' )
+		);
+
+		const imageBlock =
+			await within( reusableBlock ).getByLabelText(
+				'Image Block. Row 1'
+			);
+
+		expect( reusableBlock ).toBeDefined();
+		expect( imageBlock ).toBeDefined();
+	} );
 } );
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -131,7 +131,7 @@ function NavigationMenuSelector( {
 		<DropdownMenu
 			label={ selectorLabel }
 			icon={ moreVertical }
-			toggleProps={ { isSmall: true } }
+			toggleProps={ { size: 'small' } }
 		>
 			{ ( { onClose } ) => (
 				<>

diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
@@ -78,11 +78,17 @@ export default function QuoteEdit( {
 
 	useMigrateOnLoad( attributes, clientId );
 
-	const hasSelection = useSelect( ( select ) => {
-		const { isBlockSelected, hasSelectedInnerBlock } =
-			select( blockEditorStore );
-		return hasSelectedInnerBlock( clientId ) || isBlockSelected( clientId );
-	}, [] );
+	const hasSelection = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return (
+				hasSelectedInnerBlock( clientId, true ) ||
+				isBlockSelected( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const blockProps = useBlockProps( {
 		className: classNames( className, {

diff --git a/packages/block-library/src/social-link/icons/medium.js b/packages/block-library/src/social-link/icons/medium.js
@@ -5,6 +5,6 @@ import { Path, SVG } from '@wordpress/primitives';
 
 export const MediumIcon = () => (
 	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
-		<Path d="M20.962,7.257l-5.457,8.867l-3.923-6.375l3.126-5.08c0.112-0.182,0.319-0.286,0.527-0.286c0.05,0,0.1,0.008,0.149,0.02 c0.039,0.01,0.078,0.023,0.114,0.041l5.43,2.715l0.006,0.003c0.004,0.002,0.007,0.006,0.011,0.008 C20.971,7.191,20.98,7.227,20.962,7.257z M9.86,8.592v5.783l5.14,2.57L9.86,8.592z M15.772,17.331l4.231,2.115 C20.554,19.721,21,19.529,21,19.016V8.835L15.772,17.331z M8.968,7.178L3.665,4.527C3.569,4.479,3.478,4.456,3.395,4.456 C3.163,4.456,3,4.636,3,4.938v11.45c0,0.306,0.224,0.669,0.498,0.806l4.671,2.335c0.12,0.06,0.234,0.088,0.337,0.088 c0.29,0,0.494-0.225,0.494-0.602V7.231C9,7.208,8.988,7.188,8.968,7.178z" />
+		<Path d="M13.2,12c0,3-2.4,5.4-5.3,5.4S2.6,15,2.6,12s2.4-5.4,5.3-5.4S13.2,9,13.2,12 M19.1,12c0,2.8-1.2,5-2.7,5s-2.7-2.3-2.7-5s1.2-5,2.7-5C17.9,7,19.1,9.2,19.1,12 M21.4,12c0,2.5-0.4,4.5-0.9,4.5c-0.5,0-0.9-2-0.9-4.5s0.4-4.5,0.9-4.5C21,7.5,21.4,9.5,21.4,12" />
 	</SVG>
 );
diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
@@ -224,7 +224,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'medium'        => array(
 			'name' => 'Medium',
-			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M20.962,7.257l-5.457,8.867l-3.923-6.375l3.126-5.08c0.112-0.182,0.319-0.286,0.527-0.286c0.05,0,0.1,0.008,0.149,0.02 c0.039,0.01,0.078,0.023,0.114,0.041l5.43,2.715l0.006,0.003c0.004,0.002,0.007,0.006,0.011,0.008 C20.971,7.191,20.98,7.227,20.962,7.257z M9.86,8.592v5.783l5.14,2.57L9.86,8.592z M15.772,17.331l4.231,2.115 C20.554,19.721,21,19.529,21,19.016V8.835L15.772,17.331z M8.968,7.178L3.665,4.527C3.569,4.479,3.478,4.456,3.395,4.456 C3.163,4.456,3,4.636,3,4.938v11.45c0,0.306,0.224,0.669,0.498,0.806l4.671,2.335c0.12,0.06,0.234,0.088,0.337,0.088 c0.29,0,0.494-0.225,0.494-0.602V7.231C9,7.208,8.988,7.188,8.968,7.178z"></path></svg>',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.2,12c0,3-2.4,5.4-5.3,5.4S2.6,15,2.6,12s2.4-5.4,5.3-5.4S13.2,9,13.2,12 M19.1,12c0,2.8-1.2,5-2.7,5s-2.7-2.3-2.7-5s1.2-5,2.7-5C17.9,7,19.1,9.2,19.1,12 M21.4,12c0,2.5-0.4,4.5-0.9,4.5c-0.5,0-0.9-2-0.9-4.5s0.4-4.5,0.9-4.5C21,7.5,21.4,9.5,21.4,12"></path></svg>',
 		),
 		'patreon'       => array(
 			'name' => 'Patreon',

diff --git a/packages/block-library/src/social-link/socials-with-bg.scss b/packages/block-library/src/social-link/socials-with-bg.scss
@@ -104,7 +104,7 @@
 }
 
 .wp-social-link-medium {
-	background-color: #02ab6c;
+	background-color: #000;
 	color: #fff;
 }
 

diff --git a/packages/block-library/src/social-link/socials-without-bg.scss b/packages/block-library/src/social-link/socials-without-bg.scss
@@ -79,7 +79,7 @@
 }
 
 .wp-social-link-medium {
-	color: #02ab6c;
+	color: #000;
 }
 
 .wp-social-link-meetup {

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,14 +2,18 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `TextControl`: Add typings for `date`, `time` and `datetime-local` ([#59666](https://github.com/WordPress/gutenberg/pull/59666)).
+
 ## 27.1.0 (2024-03-06)
 
 ### Bug Fix
 
 -   `Tooltip`: Explicitly set system font to avoid CSS bleed ([#59307](https://github.com/WordPress/gutenberg/pull/59307)).
 -   `HStack`, `VStack`: Stop passing invalid props to underlying element ([#59416](https://github.com/WordPress/gutenberg/pull/59416)).
 -   `Button`: Fix focus outline in disabled primary variant ([#59391](https://github.com/WordPress/gutenberg/pull/59391)).
--   `Button`: Place `children` before the icon when `iconPosition` is `right`  ([#59489](https://github.com/WordPress/gutenberg/pull/59489)).
+-   `Button`: Place `children` before the icon when `iconPosition` is `right` ([#59489](https://github.com/WordPress/gutenberg/pull/59489)).
 -   `ToggleGroupControl`: Fix unwanted backdrop vertical animation ([#59642](https://github.com/WordPress/gutenberg/pull/59642)).
 
 ### Internal
@@ -64,6 +68,7 @@
 -   `AnglePickerControl`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58700](https://github.com/WordPress/gutenberg/pull/58700)).
 
 ### Enhancements
+
 -   `Button`: Update secondary variant to show the border even in a disabled state. ([#58606](https://github.com/WordPress/gutenberg/pull/58606)).
 -   `ConfirmDialog`: Add `__next40pxDefaultSize` to buttons ([#58421](https://github.com/WordPress/gutenberg/pull/58421)).
 -   `Snackbar`: Update the warning message ([#58591](https://github.com/WordPress/gutenberg/pull/58591)).
@@ -111,8 +116,8 @@
 -   `Tooltip`: no-op when nested inside other `Tooltip` components ([#57202](https://github.com/WordPress/gutenberg/pull/57202)).
 -   `Tooltip` and `Button`: tidy up unit tests ([#57975](https://github.com/WordPress/gutenberg/pull/57975)).
 -   `BorderControl`, `BorderBoxControl`: Replace style picker with ToggleGroupControl ([#57562](https://github.com/WordPress/gutenberg/pull/57562)).
--	`SlotFill`: fix typo in use-slot-fills return docs ([#57654](https://github.com/WordPress/gutenberg/pull/57654))
--	`Popover`: Adding `constrainTabbing` prop to `useDialog` hook ([#57962](https://github.com/WordPress/gutenberg/pull/57962))
+-   `SlotFill`: fix typo in use-slot-fills return docs ([#57654](https://github.com/WordPress/gutenberg/pull/57654))
+-   `Popover`: Adding `constrainTabbing` prop to `useDialog` hook ([#57962](https://github.com/WordPress/gutenberg/pull/57962))
 
 ### Bug Fix
 

diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx
@@ -593,6 +593,11 @@ describe( 'Button', () => {
 			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-small' );
 		} );
 
+		it( 'should have the is-small class when small class prop is passed', () => {
+			render( <Button size="small" /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-small' );
+		} );
+
 		it( 'should prioritize the `size` prop over `isSmall`', () => {
 			render( <Button size="compact" isSmall /> );
 			expect( screen.getByRole( 'button' ) ).not.toHaveClass(

diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
@@ -4,7 +4,7 @@ A `FormTokenField` is a field similar to the tags and categories fields in the i
 
 Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete). Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
 
-The `value` property is handled in a manner similar to controlled form components. See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
+The `value` property is handled in a manner similar to controlled form components. See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.
 
 ## Keyboard Accessibility
 

diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
@@ -40,7 +40,7 @@ const identity = ( value: string ) => value;
  * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
  *
  * The `value` property is handled in a manner similar to controlled form components.
- * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
+ * See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.
  */
 export function FormTokenField( props: FormTokenFieldProps ) {
 	const {

diff --git a/packages/components/src/text-control/types.ts b/packages/components/src/text-control/types.ts
@@ -24,7 +24,18 @@ export type TextControlProps = Pick<
 	 *
 	 * @default 'text'
 	 */
-	type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'search' | 'url';
+	type?:
+		| 'date'
+		| 'datetime-local'
+		| 'email'
+		| 'number'
+		| 'password'
+		| 'tel'
+		| 'text'
+		| 'time'
+		| 'search'
+		| 'url';
+
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *

diff --git a/packages/dataviews/src/pagination.js b/packages/dataviews/src/pagination.js
@@ -36,11 +36,11 @@ const Pagination = memo( function Pagination( {
 					{ createInterpolateElement(
 						sprintf(
 							// translators: %s: Total number of pages.
-							_x( 'Page <CurrenPageControl /> of %s', 'paging' ),
+							_x( 'Page <CurrentPageControl /> of %s', 'paging' ),
 							totalPages
 						),
 						{
-							CurrenPageControl: (
+							CurrentPageControl: (
 								<SelectControl
 									aria-label={ __( 'Current page' ) }
 									value={ view.page }

diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -46,9 +46,12 @@ function GridItem( {
 				'is-selected': hasBulkAction && isSelected,
 			} ) }
 			onClickCapture={ ( event ) => {
-				if ( hasBulkAction && ( event.ctrlKey || event.metaKey ) ) {
+				if ( event.ctrlKey || event.metaKey ) {
 					event.stopPropagation();
 					event.preventDefault();
+					if ( ! hasBulkAction ) {
+						return;
+					}
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {

diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -247,6 +247,9 @@ function TableRow( {
 				if ( event.ctrlKey || event.metaKey ) {
 					event.stopPropagation();
 					event.preventDefault();
+					if ( ! hasPossibleBulkAction ) {
+						return;
+					}
 					if ( ! isSelected ) {
 						onSelectionChange(
 							data.filter( ( _item ) => {

diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js
@@ -101,8 +101,6 @@ function useNavigateToPreviousEntityRecord() {
 			( location.params.postId &&
 				FOCUSABLE_ENTITIES.includes( location.params.postType ) );
 		const didComeFromEditorCanvas =
-			previousLocation?.params.postId &&
-			previousLocation?.params.postType &&
 			previousLocation?.params.canvas === 'edit';
 		const showBackButton = isFocusMode && didComeFromEditorCanvas;
 		return showBackButton ? () => history.back() : undefined;

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -441,13 +441,13 @@ function FontCollection( { slug } ) {
 							sprintf(
 								// translators: %s: Total number of pages.
 								_x(
-									'Page <CurrenPageControl /> of %s',
+									'Page <CurrentPageControl /> of %s',
 									'paging'
 								),
 								totalPages
 							),
 							{
-								CurrenPageControl: (
+								CurrentPageControl: (
 									<SelectControl
 										aria-label={ __( 'Current page' ) }
 										value={ page }