@wordpress/block-library 5.0.1 → 6.0.1

package/src/heading/heading-level-dropdown.js

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	Dropdown,
-	Toolbar,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarDropdownMenu } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -19,7 +13,6 @@ const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
 
 const POPOVER_PROPS = {
 	className: 'block-library-heading-level-dropdown',
-	isAlternate: true,
 };
 
 /** @typedef {import('@wordpress/element').WPComponent} WPComponent */
@@ -43,58 +36,33 @@ const POPOVER_PROPS = {
  */
 export default function HeadingLevelDropdown( { selectedLevel, onChange } ) {
 	return (
-		<Dropdown
+		<ToolbarDropdownMenu
 			popoverProps={ POPOVER_PROPS }
-			renderToggle={ ( { onToggle, isOpen } ) => {
-				const openOnArrowDown = ( event ) => {
-					if ( ! isOpen && event.keyCode === DOWN ) {
-						event.preventDefault();
-						onToggle();
-					}
-				};
+			icon={ <HeadingLevelIcon level={ selectedLevel } /> }
+			label={ __( 'Change heading level' ) }
+			controls={ HEADING_LEVELS.map( ( targetLevel ) => {
+				{
+					const isActive = targetLevel === selectedLevel;
 
-				return (
-					<ToolbarButton
-						aria-expanded={ isOpen }
-						aria-haspopup="true"
-						icon={ <HeadingLevelIcon level={ selectedLevel } /> }
-						label={ __( 'Change heading level' ) }
-						onClick={ onToggle }
-						onKeyDown={ openOnArrowDown }
-						showTooltip
-					/>
-				);
-			} }
-			renderContent={ () => (
-				<Toolbar
-					className="block-library-heading-level-toolbar"
-					label={ __( 'Change heading level' ) }
-				>
-					<ToolbarGroup
-						isCollapsed={ false }
-						controls={ HEADING_LEVELS.map( ( targetLevel ) => {
-							const isActive = targetLevel === selectedLevel;
-							return {
-								icon: (
-									<HeadingLevelIcon
-										level={ targetLevel }
-										isPressed={ isActive }
-									/>
-								),
-								title: sprintf(
-									// translators: %s: heading level e.g: "1", "2", "3"
-									__( 'Heading %d' ),
-									targetLevel
-								),
-								isActive,
-								onClick() {
-									onChange( targetLevel );
-								},
-							};
-						} ) }
-					/>
-				</Toolbar>
-			) }
+					return {
+						icon: (
+							<HeadingLevelIcon
+								level={ targetLevel }
+								isPressed={ isActive }
+							/>
+						),
+						label: sprintf(
+							// translators: %s: heading level e.g: "1", "2", "3"
+							__( 'Heading %d' ),
+							targetLevel
+						),
+						isActive,
+						onClick() {
+							onChange( targetLevel );
+						},
+					};
+				}
+			} ) }
 		/>
 	);
 }

package/src/heading/style.scss

@@ -4,6 +4,9 @@ h3,
 h4,
 h5,
 h6 {
+	// Break long strings of text without spaces so they don't overflow the block.
+	overflow-wrap: break-word;
+
 	&.has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;
 	}

package/src/home-link/edit.js

@@ -34,7 +34,7 @@ export default function HomeEdit( {
 
 	const { textColor, backgroundColor, style } = context;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: classnames( 'wp-block-navigation-item', {
 			'has-text-color': !! textColor || !! style?.color?.text,
 			[ `has-${ textColor }-color` ]: !! textColor,
 			'has-background': !! backgroundColor || !! style?.color?.background,
@@ -58,7 +58,7 @@ export default function HomeEdit( {
 		<>
 			<div { ...blockProps }>
 				<a
-					className="wp-block-home-link__content"
+					className="wp-block-home-link__content wp-block-navigation-item__content"
 					href={ homeUrl }
 					onClick={ preventDefault }
 				>

package/src/home-link/index.php

@@ -99,7 +99,7 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 		$font_sizes['css_classes']
 	);
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
-	$css_classes     = trim( implode( ' ', $classes ) );
+	$css_classes     = trim( implode( ' ', $classes ) ) . ' wp-block-navigation-item';
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
@@ -127,7 +127,7 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 
 	$wrapper_attributes = block_core_home_link_build_li_wrapper_attributes( $block->context );
 
-	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content"';
+	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content wp-block-navigation-item__content"';
 
 	// Start appending HTML attributes to anchor tag.
 	$html .= ' href="' . esc_url( home_url() ) . '"';

package/src/html/editor.scss

@@ -1,6 +1,4 @@
 .block-library-html__edit {
-	margin-bottom: $default-block-margin;
-
 	.block-library-html__preview-overlay {
 		position: absolute;
 		width: 100%;
@@ -9,22 +7,30 @@
 		left: 0;
 	}
 
+	// The editing view for the HTML block is equivalent to block UI.
+	// Therefore we increase specificity to avoid theme styles bleeding in.
 	.block-editor-plain-text {
-		font-family: $editor-html-font;
-		color: $gray-900;
-		padding: 0.8em 1em;
-		border: 1px solid $gray-300;
-		border-radius: 4px;
+		font-family: $editor-html-font !important;
+		color: $gray-900 !important;
+		background: $white !important;
+		padding: $grid-unit-15 !important;
+		border: $border-width solid $gray-900 !important;
+		box-shadow: none !important;
+		border-radius: $radius-block-ui !important;
 		max-height: 250px;
 
 		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
+		font-size: $mobile-text-min-font-size !important;
 		@include break-small {
-			font-size: $default-font-size;
+			font-size: $default-font-size !important;
 		}
 
 		&:focus {
-			box-shadow: none;
+			border-color: var(--wp-admin-theme-color) !important;
+			box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color) !important;
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent !important;
 		}
 	}
 }

package/src/image/block.json

@@ -3,6 +3,7 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
+	"usesContext": [ "allowResize", "imageCrop" ],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",

package/src/image/edit.js

@@ -96,6 +96,7 @@ export function ImageEdit( {
 	insertBlocksAfter,
 	noticeOperations,
 	onReplace,
+	context,
 	clientId,
 } ) {
 	const {
@@ -140,6 +141,7 @@ export function ImageEdit( {
 				title: undefined,
 				caption: undefined,
 			} );
+
 			return;
 		}
 
@@ -244,7 +246,7 @@ export function ImageEdit( {
 		} );
 	}
 
-	const isTemp = isTemporaryImage( id, url );
+	let isTemp = isTemporaryImage( id, url );
 
 	// Upload a temporary image on mount.
 	useEffect( () => {
@@ -262,6 +264,7 @@ export function ImageEdit( {
 				},
 				allowedTypes: ALLOWED_MEDIA_TYPES,
 				onError: ( message ) => {
+					isTemp = false;
 					noticeOperations.createErrorNotice( message );
 					setAttributes( {
 						src: undefined,
@@ -276,14 +279,12 @@ export function ImageEdit( {
 	// If an image is temporary, revoke the Blob url when it is uploaded (and is
 	// no longer temporary).
 	useEffect( () => {
-		if ( ! temporaryURL ) {
+		if ( isTemp ) {
+			setTemporaryURL( url );
 			return;
 		}
-
-		return () => {
-			revokeBlobURL( temporaryURL );
-		};
-	}, [ temporaryURL ] );
+		revokeBlobURL( temporaryURL );
+	}, [ isTemp, url ] );
 
 	const isExternal = isExternalImage( id, url );
 	const src = isExternal ? url : undefined;
@@ -321,6 +322,7 @@ export function ImageEdit( {
 					onSelectURL={ onSelectURL }
 					onUploadError={ onUploadError }
 					containerRef={ ref }
+					context={ context }
 					clientId={ clientId }
 				/>
 			) }

package/src/image/edit.native.js

@@ -42,7 +42,7 @@ import {
 	BlockStyles,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { getProtocol, hasQueryArg } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
@@ -64,6 +64,8 @@ import { getUpdatedLinkTargetSettings } from './utils';
 
 import {
 	LINK_DESTINATION_CUSTOM,
+	LINK_DESTINATION_ATTACHMENT,
+	LINK_DESTINATION_MEDIA,
 	MEDIA_ID_NO_FEATURED_IMAGE_SET,
 } from './constants';
 
@@ -119,7 +121,10 @@ export class ImageEdit extends Component {
 			},
 			linkRel: {
 				label: __( 'Link Rel' ),
-				placeholder: __( 'None' ),
+				placeholder: _x(
+					'None',
+					'Link rel attribute value placeholder'
+				),
 			},
 		};
 	}
@@ -172,12 +177,12 @@ export class ImageEdit extends Component {
 	}
 
 	componentDidUpdate( previousProps ) {
-		if ( ! previousProps.image && this.props.image ) {
-			const { image, attributes } = this.props;
+		const { image, attributes, setAttributes } = this.props;
+		if ( ! previousProps.image && image ) {
 			const url =
 				getUrlForSlug( image, attributes?.sizeSlug ) ||
 				image.source_url;
-			this.props.setAttributes( { url } );
+			setAttributes( { url } );
 		}
 	}
 
@@ -293,14 +298,13 @@ export class ImageEdit extends Component {
 	}
 
 	onSetSizeSlug( sizeSlug ) {
-		const { image } = this.props;
+		const { image, setAttributes } = this.props;
 
 		const url = getUrlForSlug( image, sizeSlug );
 		if ( ! url ) {
 			return null;
 		}
-
-		this.props.setAttributes( {
+		setAttributes( {
 			url,
 			width: undefined,
 			height: undefined,
@@ -309,11 +313,8 @@ export class ImageEdit extends Component {
 	}
 
 	onSelectMediaUploadOption( media ) {
-		const {
-			attributes: { id, url },
-			imageDefaultSize,
-		} = this.props;
-
+		const { imageDefaultSize } = this.props;
+		const { id, url, destination } = this.props.attributes;
 		const mediaAttributes = {
 			id: media.id,
 			url: media.url,
@@ -333,6 +334,17 @@ export class ImageEdit extends Component {
 			additionalAttributes = { url };
 		}
 
+		let href;
+		switch ( destination ) {
+			case LINK_DESTINATION_MEDIA:
+				href = media.url;
+				break;
+			case LINK_DESTINATION_ATTACHMENT:
+				href = media.link;
+				break;
+		}
+		mediaAttributes.href = href;
+
 		this.props.setAttributes( {
 			...mediaAttributes,
 			...additionalAttributes,
@@ -373,9 +385,17 @@ export class ImageEdit extends Component {
 
 	setMappedAttributes( { url: href, ...restAttributes } ) {
 		const { setAttributes } = this.props;
+
 		return href === undefined
-			? setAttributes( restAttributes )
-			: setAttributes( { ...restAttributes, href } );
+			? setAttributes( {
+					...restAttributes,
+					linkDestination: LINK_DESTINATION_CUSTOM,
+			  } )
+			: setAttributes( {
+					...restAttributes,
+					href,
+					linkDestination: LINK_DESTINATION_CUSTOM,
+			  } );
 	}
 
 	getLinkSettings() {
@@ -383,7 +403,6 @@ export class ImageEdit extends Component {
 		const {
 			attributes: { href: url, ...unMappedAttributes },
 		} = this.props;
-
 		const mappedAttributes = { ...unMappedAttributes, url };
 
 		return (
@@ -490,10 +509,14 @@ export class ImageEdit extends Component {
 			image,
 			clientId,
 			imageDefaultSize,
+			context,
 			featuredImageId,
 			wasBlockJustInserted,
 		} = this.props;
 		const { align, url, alt, id, sizeSlug, className } = attributes;
+		const hasImageContext = context
+			? Object.keys( context ).length > 0
+			: false;
 
 		const imageSizes = Array.isArray( this.props.imageSizes )
 			? this.props.imageSizes
@@ -605,6 +628,13 @@ export class ImageEdit extends Component {
 			wide: 'center',
 		};
 
+		const additionalImageProps = {
+			height: '100%',
+			resizeMode: context?.imageCrop ? 'cover' : 'contain',
+		};
+
+		const imageContainerStyles = [ hasImageContext && styles.fixedHeight ];
+
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
 			<Badge label={ __( 'Featured' ) } show={ isFeaturedImage }>
 				<TouchableWithoutFeedback
@@ -637,25 +667,35 @@ export class ImageEdit extends Component {
 								retryMessage,
 							} ) => {
 								return (
-									<Image
-										align={ align && alignToFlex[ align ] }
-										alt={ alt }
-										isSelected={
-											isSelected && ! isCaptionSelected
-										}
-										isUploadFailed={ isUploadFailed }
-										isUploadInProgress={
-											isUploadInProgress
-										}
-										onSelectMediaUploadOption={
-											this.onSelectMediaUploadOption
-										}
-										openMediaOptions={ openMediaOptions }
-										retryMessage={ retryMessage }
-										url={ url }
-										shapeStyle={ styles[ className ] }
-										width={ this.getWidth() }
-									/>
+									<View style={ imageContainerStyles }>
+										<Image
+											align={
+												align && alignToFlex[ align ]
+											}
+											alt={ alt }
+											isSelected={
+												isSelected &&
+												! isCaptionSelected
+											}
+											isUploadFailed={ isUploadFailed }
+											isUploadInProgress={
+												isUploadInProgress
+											}
+											onSelectMediaUploadOption={
+												this.onSelectMediaUploadOption
+											}
+											openMediaOptions={
+												openMediaOptions
+											}
+											retryMessage={ retryMessage }
+											url={ url }
+											shapeStyle={ styles[ className ] }
+											width={ this.getWidth() }
+											{ ...( hasImageContext
+												? additionalImageProps
+												: {} ) }
+										/>
+									</View>
 								);
 							} }
 						/>

package/src/image/image.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, filter, map, last, pick, includes } from 'lodash';
+import { get, filter, map, pick, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -21,17 +21,18 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockControls,
 	InspectorControls,
-	InspectorAdvancedControls,
 	RichText,
 	__experimentalImageSizeControl as ImageSizeControl,
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
 	BlockAlignmentControl,
+	__experimentalImageEditor as ImageEditor,
+	__experimentalImageEditingProvider as ImageEditingProvider,
 } from '@wordpress/block-editor';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
-import { getPath } from '@wordpress/url';
+import { getFilename } from '@wordpress/url';
 import { createBlock, switchToBlockType } from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -42,7 +43,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
 import useClientWidth from './use-client-width';
-import ImageEditor, { ImageEditingProvider } from './image-editing';
 import { isExternalImage } from './edit';
 
 /**
@@ -50,13 +50,6 @@ import { isExternalImage } from './edit';
  */
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 
-function getFilename( url ) {
-	const path = getPath( url );
-	if ( path ) {
-		return last( path.split( '/' ) );
-	}
-}
-
 export default function Image( {
 	temporaryURL,
 	attributes: {
@@ -83,11 +76,14 @@ export default function Image( {
 	onSelectURL,
 	onUploadError,
 	containerRef,
+	context,
 	clientId,
 } ) {
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
+	const { allowResize = true } = context;
 	const { getBlock } = useSelect( blockEditorStore );
+
 	const { image, multiImageSelection } = useSelect(
 		( select ) => {
 			const { getMedia } = select( coreStore );
@@ -149,7 +145,7 @@ export default function Image( {
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
 	const clientWidth = useClientWidth( containerRef, [ align ] );
-	const isResizable = ! isWideAligned && isLargeViewport;
+	const isResizable = allowResize && ! ( isWideAligned && isLargeViewport );
 	const imageSizeOptions = map(
 		filter( imageSizes, ( { slug } ) =>
 			get( image, [ 'media_details', 'sizes', slug, 'source_url' ] )
@@ -368,7 +364,7 @@ export default function Image( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorAdvancedControls>
+			<InspectorControls __experimentalGroup="advanced">
 				<TextControl
 					label={ __( 'Title attribute' ) }
 					value={ title || '' }
@@ -386,7 +382,7 @@ export default function Image( {
 						</>
 					}
 				/>
-			</InspectorAdvancedControls>
+			</InspectorControls>
 		</>
 	);
 

package/src/image/styles.native.scss

@@ -31,6 +31,11 @@
 	padding-bottom: $grid-unit;
 }
 
+.fixedHeight {
+	height: 150;
+	overflow: visible;
+}
+
 .featuredImagePanelTitle {
 	padding-bottom: 0;
 }

package/src/image/transforms.js

@@ -1,8 +1,16 @@
+/**
+ * External dependencies
+ */
+import { every } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { createBlobURL } from '@wordpress/blob';
 import { createBlock, getBlockAttributes } from '@wordpress/blocks';
+import { dispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
 
 export function stripFirstImage( attributes, { shortcode } ) {
 	const { body } = document.implementation.createHTMLDocument( '' );
@@ -123,21 +131,36 @@ const transforms = {
 			},
 		},
 		{
+			// Note: when dragging and dropping multiple files onto a gallery this overrides the
+			// gallery transform in order to add new images to the gallery instead of
+			// creating a new gallery.
 			type: 'files',
 			isMatch( files ) {
-				return (
-					files.length === 1 &&
-					files[ 0 ].type.indexOf( 'image/' ) === 0
+				if (
+					files.some(
+						( file ) => file.type.indexOf( 'image/' ) !== 0
+					)
+				) {
+					const { createErrorNotice } = dispatch( noticesStore );
+					createErrorNotice(
+						__(
+							'If uploading to a gallery all files need to be image formats'
+						),
+						{ id: 'gallery-transform-invalid-file' }
+					);
+				}
+				return every(
+					files,
+					( file ) => file.type.indexOf( 'image/' ) === 0
 				);
 			},
 			transform( files ) {
-				const file = files[ 0 ];
-				// We don't need to upload the media directly here
-				// It's already done as part of the `componentDidMount`
-				// int the image block
-				return createBlock( 'core/image', {
-					url: createBlobURL( file ),
+				const blocks = files.map( ( file ) => {
+					return createBlock( 'core/image', {
+						url: createBlobURL( file ),
+					} );
 				} );
+				return blocks;
 			},
 		},
 		{

package/src/image/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, each } from 'lodash';
+import { isEmpty, each, get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -56,3 +56,19 @@ export function getUpdatedLinkTargetSettings( value, { rel } ) {
 		rel: updatedRel,
 	};
 }
+
+/**
+ * Determines new Image block attributes size selection.
+ *
+ * @param {Object} image Media file object for gallery image.
+ * @param {string} size  Selected size slug to apply.
+ */
+export function getImageSizeAttributes( image, size ) {
+	const url = get( image, [ 'media_details', 'sizes', size, 'source_url' ] );
+
+	if ( url ) {
+		return { url, width: undefined, height: undefined, sizeSlug: size };
+	}
+
+	return {};
+}

package/src/index.js

@@ -33,6 +33,7 @@ import * as html from './html';
 import * as mediaText from './media-text';
 import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
+import * as navigationSubmenu from './navigation-submenu';
 import * as homeLink from './home-link';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
@@ -231,6 +232,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 					navigation,
 					navigationLink,
 					homeLink,
+					navigationSubmenu,
 
 					// Register Full Site Editing Blocks.
 					...( enableFSEBlocks