@wordpress/block-library 9.48.1 → 10.0.1-next.v.202606191442.0

package/src/file/edit.js

@@ -23,9 +23,9 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -90,8 +90,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	);
 
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const { toggleSelection } = useDispatch( blockEditorStore );
 
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
@@ -99,18 +98,6 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		onError: onUploadError,
 	} );
 
-	// Note: Handle setting a default value for `downloadButtonText` via HTML API
-	// when it supports replacing text content for HTML tags.
-	useEffect( () => {
-		if ( RichText.isEmpty( downloadButtonText ) ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( {
-				downloadButtonText: _x( 'Download', 'button label' ),
-			} );
-		}
-		// This effect should only run on mount.
-	}, [] );
-
 	function onSelectFile( newMedia ) {
 		if ( ! newMedia || ! newMedia.url ) {
 			// Reset attributes.

package/src/file/index.js

@@ -14,6 +14,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 import { unlock } from '../lock-unlock';
 
 const { fieldsKey, formKey } = unlock( blocksPrivateApis );
@@ -34,6 +35,7 @@ export const settings = {
 	deprecated,
 	edit,
 	save,
+	variations,
 };
 
 if ( window.__experimentalContentOnlyInspectorFields ) {

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/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/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,39 @@ 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.'
+								) }
+								__next40pxDefaultSize
+							/>
+						) }
+					</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();
@@ -182,13 +228,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 +245,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,