@wordpress/block-library 9.14.0 → 9.15.0

package/src/archives/edit.js

@@ -2,70 +2,128 @@
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	ToggleControl,
 	SelectControl,
 	Disabled,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function ArchivesEdit( { attributes, setAttributes } ) {
 	const { showLabel, showPostCounts, displayAsDropdown, type } = attributes;
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							displayAsDropdown: false,
+							showLabel: false,
+							showPostCounts: false,
+							type: 'monthly',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Display as dropdown' ) }
-						checked={ displayAsDropdown }
-						onChange={ () =>
-							setAttributes( {
-								displayAsDropdown: ! displayAsDropdown,
-							} )
+						isShownByDefault
+						hasValue={ () => displayAsDropdown }
+						onDeselect={ () =>
+							setAttributes( { displayAsDropdown: false } )
 						}
-					/>
-					{ displayAsDropdown && (
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Show label' ) }
-							checked={ showLabel }
+							label={ __( 'Display as dropdown' ) }
+							checked={ displayAsDropdown }
 							onChange={ () =>
 								setAttributes( {
-									showLabel: ! showLabel,
+									displayAsDropdown: ! displayAsDropdown,
 								} )
 							}
 						/>
+					</ToolsPanelItem>
+
+					{ displayAsDropdown && (
+						<ToolsPanelItem
+							label={ __( 'Show label' ) }
+							isShownByDefault
+							hasValue={ () => showLabel }
+							onDeselect={ () =>
+								setAttributes( { showLabel: false } )
+							}
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Show label' ) }
+								checked={ showLabel }
+								onChange={ () =>
+									setAttributes( {
+										showLabel: ! showLabel,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
 					) }
-					<ToggleControl
-						__nextHasNoMarginBottom
+
+					<ToolsPanelItem
 						label={ __( 'Show post counts' ) }
-						checked={ showPostCounts }
-						onChange={ () =>
-							setAttributes( {
-								showPostCounts: ! showPostCounts,
-							} )
+						isShownByDefault
+						hasValue={ () => showPostCounts }
+						onDeselect={ () =>
+							setAttributes( { showPostCounts: false } )
 						}
-					/>
-					<SelectControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show post counts' ) }
+							checked={ showPostCounts }
+							onChange={ () =>
+								setAttributes( {
+									showPostCounts: ! showPostCounts,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
 						label={ __( 'Group by' ) }
-						options={ [
-							{ label: __( 'Year' ), value: 'yearly' },
-							{ label: __( 'Month' ), value: 'monthly' },
-							{ label: __( 'Week' ), value: 'weekly' },
-							{ label: __( 'Day' ), value: 'daily' },
-						] }
-						value={ type }
-						onChange={ ( value ) =>
-							setAttributes( { type: value } )
+						isShownByDefault
+						hasValue={ () => !! type }
+						onDeselect={ () =>
+							setAttributes( { type: 'monthly' } )
 						}
-					/>
-				</PanelBody>
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Group by' ) }
+							options={ [
+								{ label: __( 'Year' ), value: 'yearly' },
+								{ label: __( 'Month' ), value: 'monthly' },
+								{ label: __( 'Week' ), value: 'weekly' },
+								{ label: __( 'Day' ), value: 'daily' },
+							] }
+							value={ type }
+							onChange={ ( value ) =>
+								setAttributes( { type: value } )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div { ...useBlockProps() }>
 				<Disabled>

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

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

package/src/block/index.php

@@ -87,6 +87,26 @@ function render_block_core_block( $attributes ) {
 		add_filter( 'render_block_context', $filter_block_context, 1 );
 	}
 
+	$ignored_hooked_blocks = get_post_meta( $attributes['ref'], '_wp_ignored_hooked_blocks', true );
+	if ( ! empty( $ignored_hooked_blocks ) ) {
+		$ignored_hooked_blocks  = json_decode( $ignored_hooked_blocks, true );
+		$attributes['metadata'] = array(
+			'ignoredHookedBlocks' => $ignored_hooked_blocks,
+		);
+	}
+
+	// Wrap in "Block" block so the Block Hooks algorithm can insert blocks
+	// that are hooked as first or last child of `core/block`.
+	$content = get_comment_delimited_block_content(
+		'core/block',
+		$attributes,
+		$content
+	);
+	// Apply Block Hooks.
+	$content = apply_block_hooks_to_content( $content, $reusable_block );
+	// Remove block wrapper.
+	$content = remove_serialized_parent_block( $content );
+
 	$content = do_blocks( $content );
 	unset( $seen_refs[ $attributes['ref'] ] );
 

package/src/button/block.json

@@ -85,6 +85,16 @@
 			}
 		},
 		"typography": {
+			"__experimentalSkipSerialization": [
+				"fontSize",
+				"lineHeight",
+				"fontFamily",
+				"fontWeight",
+				"fontStyle",
+				"textTransform",
+				"textDecoration",
+				"letterSpacing"
+			],
 			"fontSize": true,
 			"lineHeight": true,
 			"__experimentalFontFamily": true,
@@ -122,7 +132,6 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button .wp-block-button__link",
 		"interactivity": {
 			"clientNavigation": true
 		}
@@ -132,5 +141,11 @@
 		{ "name": "outline", "label": "Outline" }
 	],
 	"editorStyle": "wp-block-button-editor",
-	"style": "wp-block-button"
+	"style": "wp-block-button",
+	"selectors": {
+		"root": ".wp-block-button .wp-block-button__link",
+		"typography": {
+			"writingMode": ".wp-block-button"
+		}
+	}
 }

package/src/button/deprecated.js

@@ -14,6 +14,8 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 
@@ -132,6 +134,192 @@ const blockAttributes = {
 	},
 };
 
+const v12 = {
+	attributes: {
+		tagName: {
+			type: 'string',
+			enum: [ 'a', 'button' ],
+			default: 'a',
+		},
+		type: {
+			type: 'string',
+			default: 'button',
+		},
+		textAlign: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a,button',
+			attribute: 'title',
+			role: 'content',
+		},
+		text: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'a,button',
+			role: 'content',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'target',
+			role: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'rel',
+			role: 'content',
+		},
+		placeholder: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		alignWide: false,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalWritingMode: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		shadow: {
+			__experimentalSkipSerialization: true,
+		},
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-button__link',
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	save( { attributes, className } ) {
+		const {
+			tagName,
+			type,
+			textAlign,
+			fontSize,
+			linkTarget,
+			rel,
+			style,
+			text,
+			title,
+			url,
+			width,
+		} = attributes;
+
+		const TagName = tagName || 'a';
+		const isButtonTag = 'button' === TagName;
+		const buttonType = type || 'button';
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const shadowProps = getShadowClassesAndStyles( attributes );
+		const buttonClasses = clsx(
+			'wp-block-button__link',
+			colorProps.className,
+			borderProps.className,
+			{
+				[ `has-text-align-${ textAlign }` ]: textAlign,
+				// For backwards compatibility add style that isn't provided via
+				// block support.
+				'no-border-radius': style?.border?.radius === 0,
+			},
+			__experimentalGetElementClassName( 'button' )
+		);
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+			...shadowProps.style,
+		};
+
+		// The use of a `title` attribute here is soft-deprecated, but still applied
+		// if it had already been assigned, for the sake of backward-compatibility.
+		// A title will no longer be assigned for new or updated button block links.
+
+		const wrapperClasses = clsx( className, {
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName={ TagName }
+					type={ isButtonTag ? buttonType : null }
+					className={ buttonClasses }
+					href={ isButtonTag ? null : url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ isButtonTag ? null : linkTarget }
+					rel={ isButtonTag ? null : rel }
+				/>
+			</div>
+		);
+	},
+};
+
 const v11 = {
 	attributes: {
 		url: {
@@ -399,6 +587,7 @@ const v10 = {
 };
 
 const deprecated = [
+	v12,
 	v11,
 	v10,
 	{

package/src/button/edit.js

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 /**
  * WordPress dependencies
@@ -16,12 +17,13 @@ import removeAnchorTag from '../utils/remove-anchor-tag';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import {
-	Button,
-	ButtonGroup,
-	PanelBody,
 	TextControl,
 	ToolbarButton,
 	Popover,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import {
 	AlignmentControl,
@@ -37,6 +39,8 @@ import {
 	__experimentalGetElementClassName,
 	store as blockEditorStore,
 	useBlockEditingMode,
+	getTypographyClassesAndStyles as useTypographyProps,
+	useSettings,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -114,35 +118,43 @@ function useEnter( props ) {
 }
 
 function WidthPanel( { selectedWidth, setAttributes } ) {
-	function handleChange( newWidth ) {
-		// Check if we are toggling the width off
-		const width = selectedWidth === newWidth ? undefined : newWidth;
-
-		// Update attributes.
-		setAttributes( { width } );
-	}
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
-		<PanelBody title={ __( 'Settings' ) }>
-			<ButtonGroup aria-label={ __( 'Button width' ) }>
-				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
-					return (
-						<Button
-							key={ widthValue }
-							size="small"
-							variant={
-								widthValue === selectedWidth
-									? 'primary'
-									: undefined
-							}
-							onClick={ () => handleChange( widthValue ) }
-						>
-							{ widthValue }%
-						</Button>
-					);
-				} ) }
-			</ButtonGroup>
-		</PanelBody>
+		<ToolsPanel
+			label={ __( 'Settings' ) }
+			resetAll={ () => setAttributes( { width: undefined } ) }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
+			<ToolsPanelItem
+				label={ __( 'Width' ) }
+				isShownByDefault
+				hasValue={ () => !! selectedWidth }
+				onDeselect={ () => setAttributes( { width: undefined } ) }
+				__nextHasNoMarginBottom
+			>
+				<ToggleGroupControl
+					label={ __( 'Width' ) }
+					value={ selectedWidth }
+					onChange={ ( newWidth ) =>
+						setAttributes( { width: newWidth } )
+					}
+					isBlock
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+				>
+					{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
+						return (
+							<ToggleGroupControlOption
+								key={ widthValue }
+								value={ widthValue }
+								label={ `${ widthValue }%` }
+							/>
+						);
+					} ) }
+				</ToggleGroupControl>
+			</ToolsPanelItem>
+		</ToolsPanel>
 	);
 }
 
@@ -256,6 +268,19 @@ function ButtonEdit( props ) {
 		[ context, isSelected, metadata?.bindings?.url ]
 	);
 
+	const [ fluidTypographySettings, layout ] = useSettings(
+		'typography.fluid',
+		'layout'
+	);
+	const typographyProps = useTypographyProps( attributes, {
+		typography: {
+			fluid: fluidTypographySettings,
+		},
+		layout: {
+			wideSize: layout?.wideSize,
+		},
+	} );
+
 	return (
 		<>
 			<div
@@ -263,7 +288,6 @@ function ButtonEdit( props ) {
 				className={ clsx( blockProps.className, {
 					[ `has-custom-width wp-block-button__width-${ width }` ]:
 						width,
-					[ `has-custom-font-size` ]: blockProps.style.fontSize,
 				} ) }
 			>
 				<RichText
@@ -282,11 +306,14 @@ function ButtonEdit( props ) {
 						'wp-block-button__link',
 						colorProps.className,
 						borderProps.className,
+						typographyProps.className,
 						{
 							[ `has-text-align-${ textAlign }` ]: textAlign,
 							// For backwards compatibility add style that isn't
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
+							[ `has-custom-font-size` ]:
+								blockProps.style.fontSize,
 						},
 						__experimentalGetElementClassName( 'button' )
 					) }
@@ -295,6 +322,8 @@ function ButtonEdit( props ) {
 						...colorProps.style,
 						...spacingProps.style,
 						...shadowProps.style,
+						...typographyProps.style,
+						writingMode: undefined,
 					} }
 					onReplace={ onReplace }
 					onMerge={ mergeBlocks }

package/src/button/save.js

@@ -14,6 +14,7 @@ import {
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	__experimentalGetElementClassName,
+	getTypographyClassesAndStyles,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
@@ -38,15 +39,18 @@ export default function save( { attributes, className } ) {
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
+	const typographyProps = getTypographyClassesAndStyles( attributes );
 	const buttonClasses = clsx(
 		'wp-block-button__link',
 		colorProps.className,
 		borderProps.className,
+		typographyProps.className,
 		{
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			// For backwards compatibility add style that isn't provided via
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 		},
 		__experimentalGetElementClassName( 'button' )
 	);
@@ -55,6 +59,8 @@ export default function save( { attributes, className } ) {
 		...colorProps.style,
 		...spacingProps.style,
 		...shadowProps.style,
+		...typographyProps.style,
+		writingMode: undefined,
 	};
 
 	// The use of a `title` attribute here is soft-deprecated, but still applied
@@ -63,7 +69,6 @@ export default function save( { attributes, className } ) {
 
 	const wrapperClasses = clsx( className, {
 		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
-		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 	} );
 
 	return (