@wordpress/block-library 9.13.1-next.cd6172eb0.0 → 9.15.0

package/src/cover/edit/index.js

@@ -114,11 +114,18 @@ function CoverEdit( {
 
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
-	const media = useSelect(
-		( select ) =>
-			featuredImage &&
-			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
-		[ featuredImage ]
+	const { media } = useSelect(
+		( select ) => {
+			return {
+				media:
+					featuredImage && useFeaturedImage
+						? select( coreStore ).getMedia( featuredImage, {
+								context: 'view',
+						  } )
+						: undefined,
+			};
+		},
+		[ featuredImage, useFeaturedImage ]
 	);
 	const mediaUrl =
 		media?.media_details?.sizes?.[ sizeSlug ]?.source_url ??

package/src/cover/edit.native.js

@@ -58,7 +58,7 @@ import {
 	useCallback,
 	useMemo,
 } from '@wordpress/element';
-import { cover as icon, replace, image, warning } from '@wordpress/icons';
+import { cover as icon, replace, image, cautionFilled } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
 // eslint-disable-next-line no-restricted-imports
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -665,7 +665,10 @@ const Cover = ( {
 					style={ styles.uploadFailedContainer }
 				>
 					<View style={ styles.uploadFailed }>
-						<Icon icon={ warning } { ...styles.uploadFailedIcon } />
+						<Icon
+							icon={ cautionFilled }
+							{ ...styles.uploadFailedIcon }
+						/>
 					</View>
 				</View>
 			) }

package/src/cover/test/edit.js

@@ -200,9 +200,7 @@ describe( 'Cover block', () => {
 
 				await selectBlock( 'Block: Cover' );
 				expect(
-					screen.getByRole( 'heading', {
-						name: 'Settings',
-					} )
+					await screen.findByRole( 'heading', { name: 'Settings' } )
 				).toBeInTheDocument();
 			} );
 		} );
@@ -216,7 +214,7 @@ describe( 'Cover block', () => {
 			);
 			await selectBlock( 'Block: Cover' );
 			await userEvent.click(
-				screen.getByLabelText( 'Fixed background' )
+				await screen.findByLabelText( 'Fixed background' )
 			);
 			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
 				'has-parallax'
@@ -232,7 +230,7 @@ describe( 'Cover block', () => {
 			);
 			await selectBlock( 'Block: Cover' );
 			await userEvent.click(
-				screen.getByLabelText( 'Repeated background' )
+				await screen.findByLabelText( 'Repeated background' )
 			);
 			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
 				'is-repeated'
@@ -245,7 +243,7 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
-			await userEvent.clear( screen.getByLabelText( 'Left' ) );
+			await userEvent.clear( await screen.findByLabelText( 'Left' ) );
 			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
 
 			expect(
@@ -262,7 +260,7 @@ describe( 'Cover block', () => {
 
 			await selectBlock( 'Block: Cover' );
 			await userEvent.type(
-				screen.getByLabelText( 'Alternative text' ),
+				await screen.findByLabelText( 'Alternative text' ),
 				'Me'
 			);
 			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();

package/src/details/edit.js

@@ -9,9 +9,18 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 const TEMPLATE = [
 	[
 		'core/paragraph',
@@ -28,6 +37,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 		template: TEMPLATE,
 		__experimentalCaptureToolbars: true,
 	} );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	// Check if either the block or the inner blocks are selected.
 	const hasSelection = useSelect(
@@ -46,18 +56,37 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							showContent: false,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						isShownByDefault
 						label={ __( 'Open by default' ) }
-						checked={ showContent }
-						onChange={ () =>
+						hasValue={ () => showContent }
+						onDeselect={ () => {
 							setAttributes( {
-								showContent: ! showContent,
-							} )
-						}
-					/>
-				</PanelBody>
+								showContent: false,
+							} );
+						} }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open by default' ) }
+							checked={ showContent }
+							onChange={ () =>
+								setAttributes( {
+									showContent: ! showContent,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<details
 				{ ...innerBlocksProps }

package/src/editor.scss

@@ -49,7 +49,6 @@
 @import "./template-part/editor.scss";
 @import "./text-columns/editor.scss";
 @import "./video/editor.scss";
-@import "./post-template/editor.scss";
 @import "./query/editor.scss";
 @import "./query-pagination/editor.scss";
 @import "./query-pagination-numbers/editor.scss";

package/src/file/test/__snapshots__/edit.native.js.snap

@@ -132,7 +132,7 @@ exports[`File block renders file error state without crashing 1`] = `
         <Svg
           height={24}
           style={{}}
-          viewBox="-2 -2 24 24"
+          viewBox="0 0 24 24"
           width={24}
           xmlns="http://www.w3.org/2000/svg"
         >

package/src/form/block.json

@@ -64,6 +64,5 @@
 			}
 		},
 		"__experimentalSelector": "form"
-	},
-	"viewScript": "file:./view.min.js"
+	}
 }

package/src/form/index.php

@@ -14,6 +14,7 @@
  * @return string The content of the block being rendered.
  */
 function render_block_core_form( $attributes, $content ) {
+	wp_enqueue_script_module( '@wordpress/block-library/form/view' );
 
 	$processed_content = new WP_HTML_Tag_Processor( $content );
 	$processed_content->next_tag( 'form' );
@@ -42,26 +43,6 @@ function render_block_core_form( $attributes, $content ) {
 	);
 }
 
-/**
- * Additional data to add to the view.js script for this block.
- */
-function block_core_form_view_script() {
-	if ( ! gutenberg_is_experiment_enabled( 'gutenberg-form-blocks' ) ) {
-		return;
-	}
-
-	wp_localize_script(
-		'wp-block-form-view',
-		'wpBlockFormSettings',
-		array(
-			'nonce'   => wp_create_nonce( 'wp-block-form' ),
-			'ajaxUrl' => admin_url( 'admin-ajax.php' ),
-			'action'  => 'wp_block_form_email_submit',
-		)
-	);
-}
-add_action( 'wp_enqueue_scripts', 'block_core_form_view_script' );
-
 /**
  * Adds extra fields to the form.
  *

package/src/form/view.js

@@ -1,8 +1,21 @@
+let formSettings;
+try {
+	formSettings = JSON.parse(
+		document.getElementById(
+			'wp-script-module-data-@wordpress/block-library/form/view'
+		)?.textContent
+	);
+} catch {}
+
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable no-undef */
 document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {
-	// Bail If the form is not using the mailto: action.
-	if ( ! form.action || ! form.action.startsWith( 'mailto:' ) ) {
+	// Bail If the form settings not provided or the form is not using the mailto: action.
+	if (
+		! formSettings ||
+		! form.action ||
+		! form.action.startsWith( 'mailto:' )
+	) {
 		return;
 	}
 
@@ -18,13 +31,13 @@ document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {
 		// Get the form data and merge it with the form action and nonce.
 		const formData = Object.fromEntries( new FormData( form ).entries() );
 		formData.formAction = form.action;
-		formData._ajax_nonce = wpBlockFormSettings.nonce;
-		formData.action = wpBlockFormSettings.action;
+		formData._ajax_nonce = formSettings.nonce;
+		formData.action = formSettings.action;
 		formData._wp_http_referer = window.location.href;
 		formData.formAction = form.action;
 
 		try {
-			const response = await fetch( wpBlockFormSettings.ajaxUrl, {
+			const response = await fetch( formSettings.ajaxUrl, {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/x-www-form-urlencoded',

package/src/image/image.js

@@ -1126,7 +1126,7 @@ export default function Image( {
 				id &&
 				clientId === selectedClientIds[ 0 ] && (
 					<MenuItem onClick={ setPostFeatureImage }>
-						{ __( 'Set featured image' ) }
+						{ __( 'Set as featured image' ) }
 					</MenuItem>
 				)
 			}

package/src/image/index.php

@@ -290,6 +290,7 @@ function block_core_image_print_lightbox_overlay() {
 			data-wp-on-async--click="actions.hideLightbox"
 			data-wp-on-async-window--resize="callbacks.setOverlayStyles"
 			data-wp-on-async-window--scroll="actions.handleScroll"
+			data-wp-bind--style="state.overlayStyles"
 			tabindex="-1"
 			>
 				<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">
@@ -306,7 +307,6 @@ function block_core_image_print_lightbox_overlay() {
 					</figure>
 				</div>
 				<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
-				<style data-wp-text="state.overlayStyles"></style>
 		</div>
 HTML;
 }

package/src/image/transforms.js

@@ -59,6 +59,7 @@ const schema = ( { phrasingContentSchema } ) => ( {
 			...imageSchema,
 			a: {
 				attributes: [ 'href', 'rel', 'target' ],
+				classes: [ '*' ],
 				children: imageSchema,
 			},
 			figcaption: {

package/src/image/view.js

@@ -341,7 +341,6 @@ const { state, actions, callbacks } = store(
 				// adding 1 pixel to the container width and height solves the problem,
 				// though this can be removed if the issue is fixed in the future.
 				state.overlayStyles = `
-				:root {
 					--wp--lightbox-initial-top-position: ${ screenPosY }px;
 					--wp--lightbox-initial-left-position: ${ screenPosX }px;
 					--wp--lightbox-container-width: ${ containerWidth + 1 }px;
@@ -352,8 +351,7 @@ const { state, actions, callbacks } = store(
 					--wp--lightbox-scrollbar-width: ${
 						window.innerWidth - document.documentElement.clientWidth
 					}px;
-				}
-			`;
+				`;
 			},
 			setButtonStyles() {
 				const { imageId } = getContext();

package/src/index.js

@@ -99,6 +99,7 @@ import * as queryPaginationNext from './query-pagination-next';
 import * as queryPaginationNumbers from './query-pagination-numbers';
 import * as queryPaginationPrevious from './query-pagination-previous';
 import * as queryTitle from './query-title';
+import * as queryTotal from './query-total';
 import * as quote from './quote';
 import * as reusableBlock from './block';
 import * as readMore from './read-more';
@@ -211,6 +212,7 @@ const getAllBlocks = () => {
 		queryPaginationNumbers,
 		queryPaginationPrevious,
 		queryNoResults,
+		queryTotal,
 		readMore,
 		comments,
 		commentAuthorName,

package/src/latest-posts/block.json

@@ -111,6 +111,18 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/latest-posts/style.scss

@@ -57,7 +57,8 @@
 	font-size: 0.8125em;
 }
 
-.wp-block-latest-posts__post-excerpt {
+.wp-block-latest-posts__post-excerpt,
+.wp-block-latest-posts__post-full-content {
 	margin-top: 0.5em;
 	margin-bottom: 1em;
 }

package/src/loginout/edit.js

@@ -1,38 +1,74 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function LoginOutEdit( { attributes, setAttributes } ) {
 	const { displayLoginAsForm, redirectToCurrent } = attributes;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							displayLoginAsForm: false,
+							redirectToCurrent: true,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Display login as form' ) }
-						checked={ displayLoginAsForm }
-						onChange={ () =>
-							setAttributes( {
-								displayLoginAsForm: ! displayLoginAsForm,
-							} )
+						isShownByDefault
+						hasValue={ () => displayLoginAsForm }
+						onDeselect={ () =>
+							setAttributes( { displayLoginAsForm: false } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display login as form' ) }
+							checked={ displayLoginAsForm }
+							onChange={ () =>
+								setAttributes( {
+									displayLoginAsForm: ! displayLoginAsForm,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Redirect to current URL' ) }
-						checked={ redirectToCurrent }
-						onChange={ () =>
-							setAttributes( {
-								redirectToCurrent: ! redirectToCurrent,
-							} )
+						isShownByDefault
+						hasValue={ () => ! redirectToCurrent }
+						onDeselect={ () =>
+							setAttributes( { redirectToCurrent: true } )
 						}
-					/>
-				</PanelBody>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Redirect to current URL' ) }
+							checked={ redirectToCurrent }
+							onChange={ () =>
+								setAttributes( {
+									redirectToCurrent: ! redirectToCurrent,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div
 				{ ...useBlockProps( {

package/src/media-text/edit.js

@@ -76,6 +76,7 @@ function attributesFromMedia( {
 				mediaLink: undefined,
 				href: undefined,
 				focalPoint: undefined,
+				useFeaturedImage: false,
 			} );
 			return;
 		}
@@ -128,10 +129,37 @@ function attributesFromMedia( {
 			mediaLink: media.link || undefined,
 			href: newHref,
 			focalPoint: undefined,
+			useFeaturedImage: false,
 		} );
 	};
 }
 
+function MediaTextResolutionTool( { image, value, onChange } ) {
+	const { imageSizes } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			imageSizes: getSettings().imageSizes,
+		};
+	}, [] );
+
+	if ( ! imageSizes?.length ) {
+		return null;
+	}
+
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => getImageSourceUrlBySizeSlug( image, slug ) )
+		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
+
+	return (
+		<ResolutionTool
+			value={ value }
+			defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
+			options={ imageSizeOptions }
+			onChange={ onChange }
+		/>
+	);
+}
+
 function MediaTextEdit( {
 	attributes,
 	isSelected,
@@ -152,12 +180,12 @@ function MediaTextEdit( {
 		mediaType,
 		mediaUrl,
 		mediaWidth,
+		mediaSizeSlug,
 		rel,
 		verticalAlignment,
 		allowedBlocks,
 		useFeaturedImage,
 	} = attributes;
-	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
 	const [ featuredImage ] = useEntityProp(
 		'postType',
@@ -166,11 +194,32 @@ function MediaTextEdit( {
 		postId
 	);
 
-	const featuredImageMedia = useSelect(
-		( select ) =>
-			featuredImage &&
-			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
-		[ featuredImage ]
+	const { featuredImageMedia } = useSelect(
+		( select ) => {
+			return {
+				featuredImageMedia:
+					featuredImage && useFeaturedImage
+						? select( coreStore ).getMedia( featuredImage, {
+								context: 'view',
+						  } )
+						: undefined,
+			};
+		},
+		[ featuredImage, useFeaturedImage ]
+	);
+
+	const { image } = useSelect(
+		( select ) => {
+			return {
+				image:
+					mediaId && isSelected
+						? select( coreStore ).getMedia( mediaId, {
+								context: 'view',
+						  } )
+						: null,
+			};
+		},
+		[ isSelected, mediaId ]
 	);
 
 	const featuredImageURL = useFeaturedImage
@@ -197,22 +246,6 @@ function MediaTextEdit( {
 		} );
 	};
 
-	const { imageSizes, image } = useSelect(
-		( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return {
-				image:
-					mediaId && isSelected
-						? select( coreStore ).getMedia( mediaId, {
-								context: 'view',
-						  } )
-						: null,
-				imageSizes: getSettings()?.imageSizes,
-			};
-		},
-		[ isSelected, mediaId ]
-	);
-
 	const refMedia = useRef();
 	const imperativeFocalPointPreview = ( value ) => {
 		const { style } = refMedia.current;
@@ -260,10 +293,6 @@ function MediaTextEdit( {
 	const onVerticalAlignmentChange = ( alignment ) => {
 		setAttributes( { verticalAlignment: alignment } );
 	};
-
-	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) => getImageSourceUrlBySizeSlug( image, slug ) )
-		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 	const updateImage = ( newMediaSizeSlug ) => {
 		const newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug );
 
@@ -409,9 +438,9 @@ function MediaTextEdit( {
 				</ToolsPanelItem>
 			) }
 			{ mediaType === 'image' && ! useFeaturedImage && (
-				<ResolutionTool
+				<MediaTextResolutionTool
+					image={ image }
 					value={ mediaSizeSlug }
-					options={ imageSizeOptions }
 					onChange={ updateImage }
 				/>
 			) }

package/src/more/edit.js

@@ -2,10 +2,18 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	ToggleControl,
+} from '@wordpress/components';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { ENTER } from '@wordpress/keycodes';
 import { getDefaultBlockName, createBlock } from '@wordpress/blocks';
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const DEFAULT_TEXT = __( 'Read more' );
 
@@ -37,20 +45,39 @@ export default function MoreEdit( {
 		width: `${ ( customText ? customText : DEFAULT_TEXT ).length + 1.2 }em`,
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __(
-							'Hide the excerpt on the full content page'
-						) }
-						checked={ !! noTeaser }
-						onChange={ toggleHideExcerpt }
-						help={ getHideExcerptHelp }
-					/>
-				</PanelBody>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							noTeaser: false,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Hide excerpt' ) }
+						isShownByDefault
+						hasValue={ () => noTeaser }
+						onDeselect={ () =>
+							setAttributes( { noTeaser: false } )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __(
+								'Hide the excerpt on the full content page'
+							) }
+							checked={ !! noTeaser }
+							onChange={ toggleHideExcerpt }
+							help={ getHideExcerptHelp }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div { ...useBlockProps() }>
 				<input