@wordpress/block-library 9.48.1 → 10.0.0

package/src/file/transforms.js

@@ -5,8 +5,12 @@ import { createBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 import { select } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { _x } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 
+// Transforms bypass the default variation, so set the localized default here.
+const downloadButtonText = _x( 'Download', 'button label' );
+
 const transforms = {
 	from: [
 		{
@@ -47,6 +51,7 @@ const transforms = {
 							createBlock( 'core/file', {
 								blob: blobURL,
 								fileName: file.name,
+								downloadButtonText,
 							} )
 						);
 					}
@@ -57,41 +62,17 @@ const transforms = {
 		},
 		{
 			type: 'block',
-			blocks: [ 'core/audio' ],
-			transform: ( attributes ) => {
-				return createBlock( 'core/file', {
-					href: attributes.src,
-					fileName: attributes.caption,
-					textLinkHref: attributes.src,
-					id: attributes.id,
-					anchor: attributes.anchor,
-				} );
-			},
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/video' ],
-			transform: ( attributes ) => {
-				return createBlock( 'core/file', {
-					href: attributes.src,
-					fileName: attributes.caption,
-					textLinkHref: attributes.src,
-					id: attributes.id,
-					anchor: attributes.anchor,
-				} );
-			},
-		},
-		{
-			type: 'block',
-			blocks: [ 'core/image' ],
+			blocks: [ 'core/audio', 'core/video', 'core/image' ],
 			transform: ( attributes ) => {
+				// Audio/Video use `src`, Image uses `url`.
+				const href = attributes.src ?? attributes.url;
 				return createBlock( 'core/file', {
-					href: attributes.url,
-					fileName:
-						attributes.caption || getFilename( attributes.url ),
-					textLinkHref: attributes.url,
+					href,
+					fileName: attributes.caption || getFilename( href ),
+					textLinkHref: href,
 					id: attributes.id,
 					anchor: attributes.anchor,
+					downloadButtonText,
 				} );
 			},
 		},

package/src/file/variations.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+const variations = [
+	{
+		name: 'default',
+		isDefault: true,
+		// Translatable defaults can't live in `block.json`, so set it here.
+		attributes: {
+			downloadButtonText: _x( 'Download', 'button label' ),
+		},
+	},
+];
+
+export default variations;

package/src/form/edit.js

@@ -150,7 +150,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 							isShownByDefault
 						>
 							<TextControl
-								__next40pxDefaultSize
 								autoComplete="off"
 								label={ __( 'Email for form submissions' ) }
 								value={ email || '' }
@@ -189,7 +188,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						) }
 					/>
 					<TextControl
-						__next40pxDefaultSize
 						autoComplete="off"
 						label={ __( 'Form action' ) }
 						value={ action }

package/src/form-input/edit.js

@@ -102,7 +102,6 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 			) }
 			<InspectorControls group="advanced">
 				<TextControl
-					__next40pxDefaultSize
 					autoComplete="off"
 					label={ __( 'Name' ) }
 					value={ name }
@@ -117,7 +116,6 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 				/>
 				{ 'hidden' === type && (
 					<TextControl
-						__next40pxDefaultSize
 						autoComplete="off"
 						label={ __( 'Value' ) }
 						value={ value }

package/src/freeform/edit.js

@@ -21,7 +21,6 @@ import { classic } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import ConvertToBlocksButton from './convert-to-blocks-button';
 import MigrationNotice from './migration-notice';
 import ModalEdit from './modal';
 
@@ -41,22 +40,8 @@ export default function FreeformEdit( {
 	);
 	const { removeBlock } = useDispatch( blockEditorStore );
 
-	// Gated by an experiment so authors can opt into a stronger nudge to
-	// migrate Classic block content ahead of its planned deprecation.
-	const isDeprecationMode = window.__experimentalClassicBlockDeprecation;
-
 	return (
 		<>
-			{ canRemove && ! isDeprecationMode && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ConvertToBlocksButton
-							content={ content }
-							onReplace={ onReplace }
-						/>
-					</ToolbarGroup>
-				</BlockControls>
-			) }
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -68,7 +53,7 @@ export default function FreeformEdit( {
 				</ToolbarGroup>
 			</BlockControls>
 			<div { ...useBlockProps() }>
-				{ isDeprecationMode && canRemove && content && (
+				{ canRemove && content && (
 					<MigrationNotice
 						content={ content }
 						onReplace={ onReplace }
@@ -80,15 +65,11 @@ export default function FreeformEdit( {
 					<Placeholder
 						icon={ <BlockIcon icon={ classic } /> }
 						label={ __( 'Classic' ) }
-						instructions={
-							isDeprecationMode
-								? __(
-										'The Classic block is being phased out. It’s recommended to use other blocks for the best editing experience.'
-								  )
-								: __( 'Use the classic editor to add content.' )
-						}
+						instructions={ __(
+							'The Classic block is being phased out. It’s recommended to use other blocks for the best editing experience.'
+						) }
 					>
-						{ isDeprecationMode && canRemove && (
+						{ canRemove && (
 							<Button
 								__next40pxDefaultSize
 								variant="primary"
@@ -99,11 +80,7 @@ export default function FreeformEdit( {
 						) }
 						<Button
 							__next40pxDefaultSize
-							variant={
-								isDeprecationMode && canRemove
-									? 'secondary'
-									: 'primary'
-							}
+							variant={ canRemove ? 'secondary' : 'primary' }
 							onClick={ () => setOpen( true ) }
 						>
 							{ __( 'Edit contents' ) }

package/src/freeform/migration-notice.js

@@ -7,13 +7,11 @@ import { createBlock, rawHandler } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
 /**
- * Block-level deprecation warning rendered when the
- * `gutenberg-classic-block-deprecation` experiment is enabled.
- *
+ * Block-level deprecation warning for the Classic block.
  * Uses the same `Warning` primitive as `core/missing` so the experience is
  * visually consistent with how the editor already surfaces deprecated blocks,
  * and offers two migration actions - a primary "Convert to blocks", and a
- * secondary "Convert to Custom HTML".
+ * secondary "Convert to HTML".
  *
  * @param {Object}   props
  * @param {string}   props.content   Raw HTML content of the Classic block.

package/src/gallery/edit.js

@@ -754,17 +754,17 @@ export default function GalleryEdit( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
-					<ToolsPanelItem
-						label={ __( 'Navigation button type' ) }
-						isShownByDefault
-						hasValue={ () => navigationButtonType !== 'icon' }
-						onDeselect={ () =>
-							setAttributes( {
-								navigationButtonType: 'icon',
-							} )
-						}
-					>
-						{ hasLightboxImages && (
+					{ lightboxSetting?.allowEditing && hasLightboxImages && (
+						<ToolsPanelItem
+							label={ __( 'Navigation button type' ) }
+							isShownByDefault
+							hasValue={ () => navigationButtonType !== 'icon' }
+							onDeselect={ () =>
+								setAttributes( {
+									navigationButtonType: 'icon',
+								} )
+							}
+						>
 							<ToggleGroupControl
 								label={ __( 'Navigation button type' ) }
 								value={ navigationButtonType }
@@ -789,8 +789,8 @@ export default function GalleryEdit( props ) {
 									)
 								) }
 							</ToggleGroupControl>
-						) }
-					</ToolsPanelItem>
+						</ToolsPanelItem>
+					) }
 				</ToolsPanel>
 			</InspectorControls>
 			<BlockControls group="block">

package/src/home-link/edit.js

@@ -108,7 +108,6 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 						isShownByDefault
 					>
 						<TextControl
-							__next40pxDefaultSize
 							label={ __( 'Text' ) }
 							value={ label ? stripHTML( label ) : '' }
 							onChange={ ( labelValue ) => {

package/src/html/modal.js

@@ -148,6 +148,7 @@ export default function HTMLEditModal( {
 										placeholder={ __( 'Write HTML…' ) }
 										aria-label={ __( 'HTML' ) }
 										className="block-library-html__modal-editor"
+										async
 									/>
 								</Tabs.TabPanel>
 								{ canUserUseUnfilteredHTML && (
@@ -162,6 +163,7 @@ export default function HTMLEditModal( {
 											placeholder={ __( 'Write CSS…' ) }
 											aria-label={ __( 'CSS' ) }
 											className="block-library-html__modal-editor"
+											async
 										/>
 									</Tabs.TabPanel>
 								) }
@@ -179,6 +181,7 @@ export default function HTMLEditModal( {
 											) }
 											aria-label={ __( 'JavaScript' ) }
 											className="block-library-html__modal-editor"
+											async
 										/>
 									</Tabs.TabPanel>
 								) }

package/src/icon/README.md

@@ -16,6 +16,9 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
 | `icon` | `string` | — | [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
+| `flipHorizontal` | `boolean` | `false` | — |
+| `flipVertical` | `boolean` | `false` | — |
+| `rotation` | `number` | `0` | — |
 
 ## Supports
 

package/src/icon/block.json

@@ -11,6 +11,18 @@
 		"icon": {
 			"type": "string",
 			"role": "content"
+		},
+		"flipHorizontal": {
+			"type": "boolean",
+			"default": false
+		},
+		"flipVertical": {
+			"type": "boolean",
+			"default": false
+		},
+		"rotation": {
+			"type": "number",
+			"default": 0
 		}
 	},
 	"supports": {

package/src/icon/edit.js

@@ -11,10 +11,14 @@ import {
 	DropdownMenu,
 	TextControl,
 	ToolbarButton,
-	ToolbarGroup,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import {
+	flipHorizontal as flipHorizontalIcon,
+	flipVertical as flipVerticalIcon,
+	rotateRight,
+} from '@wordpress/icons';
 import {
 	BlockControls,
 	InspectorControls,
@@ -58,7 +62,8 @@ const IconPlaceholder = ( { className, style } ) => (
 );
 
 export function Edit( { attributes, setAttributes } ) {
-	const { icon, ariaLabel } = attributes;
+	const { icon, ariaLabel, flipHorizontal, flipVertical, rotation } =
+		attributes;
 
 	const [ isInserterOpen, setInserterOpen ] = useState( false );
 
@@ -87,9 +92,49 @@ export function Edit( { attributes, setAttributes } ) {
 
 	const iconToDisplay = selectedIcon?.content || '';
 
+	const flipClasses = {
+		'is-flip-horizontal': flipHorizontal,
+		'is-flip-vertical': flipVertical,
+	};
+
+	const rotationStyle = rotation ? { rotate: `${ rotation }deg` } : {};
+
 	const blockControls = (
 		<>
-			<BlockControls group={ isContentOnlyMode ? 'inline' : 'other' }>
+			{ icon && (
+				<BlockControls group="block">
+					<ToolbarButton
+						icon={ flipHorizontalIcon }
+						label={ __( 'Flip horizontal' ) }
+						isPressed={ flipHorizontal }
+						onClick={ () =>
+							setAttributes( {
+								flipHorizontal: ! flipHorizontal,
+							} )
+						}
+					/>
+					<ToolbarButton
+						icon={ flipVerticalIcon }
+						label={ __( 'Flip vertical' ) }
+						isPressed={ flipVertical }
+						onClick={ () =>
+							setAttributes( {
+								flipVertical: ! flipVertical,
+							} )
+						}
+					/>
+					<ToolbarButton
+						icon={ rotateRight }
+						label={ __( 'Rotate' ) }
+						onClick={ () =>
+							setAttributes( {
+								rotation: ( ( rotation || 0 ) + 90 ) % 360,
+							} )
+						}
+					/>
+				</BlockControls>
+			) }
+			<BlockControls group="other">
 				<ToolbarButton
 					onClick={ () => {
 						setInserterOpen( true );
@@ -97,38 +142,38 @@ export function Edit( { attributes, setAttributes } ) {
 				>
 					{ icon ? __( 'Replace' ) : __( 'Choose icon' ) }
 				</ToolbarButton>
+				{ isContentOnlyMode && icon && (
+					// Add some extra controls for content attributes when content only mode is active.
+					// With content only mode active, the inspector is hidden, so users need another way
+					// to edit these attributes.
+					<DropdownMenu
+						icon=""
+						toggleProps={ {
+							as: ToolbarButton,
+						} }
+						popoverProps={ {
+							className: 'is-alternate',
+						} }
+						text={ __( 'Label' ) }
+					>
+						{ () => (
+							<TextControl
+								className="wp-block-icon__toolbar-content"
+								label={ __( 'Label' ) }
+								value={ ariaLabel || '' }
+								onChange={ ( value ) =>
+									setAttributes( {
+										ariaLabel: value,
+									} )
+								}
+								help={ __(
+									'Briefly describe the icon to help screen reader users. Leave blank for decorative icons.'
+								) }
+							/>
+						) }
+					</DropdownMenu>
+				) }
 			</BlockControls>
-			{ isContentOnlyMode && icon && (
-				// Add some extra controls for content attributes when content only mode is active.
-				// With content only mode active, the inspector is hidden, so users need another way
-				// to edit these attributes.
-				<BlockControls group="other">
-					<ToolbarGroup className="components-toolbar-group">
-						<DropdownMenu
-							icon=""
-							popoverProps={ {
-								className: 'is-alternate',
-							} }
-							text={ __( 'Label' ) }
-						>
-							{ () => (
-								<TextControl
-									className="wp-block-icon__toolbar-content"
-									label={ __( 'Label' ) }
-									value={ ariaLabel || '' }
-									onChange={ ( value ) =>
-										setAttributes( { ariaLabel: value } )
-									}
-									help={ __(
-										'Briefly describe the icon to help screen reader users. Leave blank for decorative icons.'
-									) }
-									__next40pxDefaultSize
-								/>
-							) }
-						</DropdownMenu>
-					</ToolbarGroup>
-				</BlockControls>
-			) }
 		</>
 	);
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -161,7 +206,6 @@ export function Edit( { attributes, setAttributes } ) {
 							onChange={ ( value ) =>
 								setAttributes( { ariaLabel: value } )
 							}
-							__next40pxDefaultSize
 						/>
 					</ToolsPanelItem>
 				</ToolsPanel>
@@ -182,13 +226,15 @@ export function Edit( { attributes, setAttributes } ) {
 								colorProps.className,
 								borderProps.className,
 								spacingProps.className,
-								dimensionsProps.className
+								dimensionsProps.className,
+								flipClasses
 							),
 							style: {
 								...colorProps.style,
 								...borderProps.style,
 								...spacingProps.style,
 								...dimensionsProps.style,
+								...rotationStyle,
 							},
 						} }
 					/>
@@ -197,12 +243,14 @@ export function Edit( { attributes, setAttributes } ) {
 						className={ clsx(
 							borderProps.className,
 							spacingProps.className,
-							dimensionsProps.className
+							dimensionsProps.className,
+							flipClasses
 						) }
 						style={ {
 							...borderProps.style,
 							...spacingProps.style,
 							...dimensionsProps.style,
+							...rotationStyle,
 							height: 'auto',
 						} }
 					/>

package/src/icon/index.js

@@ -5,6 +5,7 @@ import initBlock from '../utils/init-block';
 import edit from './edit';
 import metadata from './block.json';
 import icon from './icon';
+import variations from './variations';
 
 const { name } = metadata;
 export { metadata, name };
@@ -12,7 +13,7 @@ export const settings = {
 	icon,
 	example: {
 		attributes: {
-			icon: 'core/audio',
+			icon: 'core/info',
 			style: {
 				dimensions: {
 					width: '48px',
@@ -20,6 +21,7 @@ export const settings = {
 			},
 		},
 	},
+	variations,
 	edit,
 };
 

package/src/icon/index.php

@@ -96,6 +96,29 @@ function render_block_core_icon( $attributes ) {
 		$processor->add_class( $styles['classnames'] );
 	}
 
+	// Apply flip classes to the SVG.
+	$flip_horizontal = $attributes['flipHorizontal'] ?? false;
+	$flip_vertical   = $attributes['flipVertical'] ?? false;
+
+	if ( $flip_horizontal ) {
+		$processor->add_class( 'is-flip-horizontal' );
+	}
+	if ( $flip_vertical ) {
+		$processor->add_class( 'is-flip-vertical' );
+	}
+
+	$rotation = isset( $attributes['rotation'] ) ? (int) $attributes['rotation'] : 0;
+
+	if ( $rotation ) {
+		$current_style = $processor->get_attribute( 'style' ) ?? '';
+		$rotation_css  = 'rotate: ' . $rotation . 'deg;';
+		if ( $current_style ) {
+			$processor->set_attribute( 'style', $current_style . ' ' . $rotation_css );
+		} else {
+			$processor->set_attribute( 'style', $rotation_css );
+		}
+	}
+
 	$aria_label = ! empty( $attributes['ariaLabel'] ) ? $attributes['ariaLabel'] : '';
 
 	if ( ! $aria_label ) {

package/src/icon/style.scss

@@ -14,6 +14,18 @@
 	svg {
 		box-sizing: border-box;
 		fill: currentColor;
+
+		&.is-flip-horizontal {
+			transform: scaleX(-1);
+		}
+
+		&.is-flip-vertical {
+			transform: scaleY(-1);
+		}
+
+		&.is-flip-horizontal.is-flip-vertical {
+			transform: scaleX(-1) scaleY(-1);
+		}
 	}
 }
 

package/src/icon/variations.js

@@ -0,0 +1,9 @@
+const variations = [
+	{
+		name: 'default',
+		isDefault: true,
+		attributes: { icon: 'core/info' },
+	},
+];
+
+export default variations;

package/src/image/README.md

@@ -79,6 +79,7 @@ _Defined via the [`styles`](https://developer.wordpress.org/block-editor/referen
 
 _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
 
+- **dimensions**: `.wp-block-image img`
 - **border**: `.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder`
 - **shadow**: `.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder`
 - **filter**:

package/src/image/block.json

@@ -141,6 +141,7 @@
 		}
 	},
 	"selectors": {
+		"dimensions": ".wp-block-image img",
 		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
 		"shadow": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
 		"filter": {

package/src/image/edit.js

@@ -422,6 +422,11 @@ export function ImageEdit( {
 		},
 		[ context, isSingleSelected, metadata?.bindings?.url ]
 	);
+	// `height: 'auto'` is not a pinned dimension (it lets the height follow the
+	// aspect ratio, e.g. for an image pasted with both width and height). Treat
+	// it as absent so the placeholder box keeps its aspect ratio and pinned
+	// width instead of collapsing to a 100%×100% fill.
+	const pinnedHeight = height === 'auto' ? undefined : height;
 	const placeholder = ( content ) => {
 		return (
 			<Placeholder
@@ -444,11 +449,11 @@ export function ImageEdit( {
 				}
 				style={ {
 					aspectRatio:
-						! ( width && height ) && aspectRatio
+						! ( width && pinnedHeight ) && aspectRatio
 							? aspectRatio
 							: undefined,
-					width: height && aspectRatio ? '100%' : width,
-					height: width && aspectRatio ? '100%' : height,
+					width: pinnedHeight && aspectRatio ? '100%' : width,
+					height: width && aspectRatio ? '100%' : pinnedHeight,
 					objectFit: scale,
 					...borderProps.style,
 					...shadowProps.style,