@wordpress/block-library 8.10.0 → 8.11.0

package/src/file/editor.scss

@@ -35,6 +35,10 @@
 
 	a {
 		min-width: 1em;
+
+		&:not(.wp-block-file__button) {
+			display: inline-block;
+		}
 	}
 
 	.wp-block-file__button-richtext-wrapper {

package/src/file/interactivity.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../utils/interactivity';
+import { browserSupportsPdfs as hasPdfPreview } from './utils';
+
+store( {
+	selectors: {
+		core: {
+			file: {
+				hasPdfPreview,
+			},
+		},
+	},
+} );

package/src/freeform/editor.scss

@@ -374,3 +374,48 @@ div[data-type="core/freeform"] {
 		display: block;
 	}
 }
+
+.block-editor-freeform-modal {
+	.components-modal__frame {
+		// On large screens, make the TinyMCE edit area grow to take all the
+		// available height so that the Cancel/Save buttons are always into the
+		// view. On smaller screens, the modal content is scrollable.
+		@include break-large() {
+			// On medium and large screens, the modal component sets a max-height.
+			// We want the modal to be as tall as possible also when the content is short.
+			height: 9999rem;
+
+			.components-modal__header + div {
+				height: 100%;
+			}
+
+			.mce-tinymce {
+				height: calc(100% - #{$button-size} - #{$grid-unit-20});
+			}
+
+			.mce-container-body {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+			}
+
+			.mce-edit-area {
+				flex-grow: 1;
+				display: flex;
+				flex-direction: column;
+
+				iframe {
+					flex-grow: 1;
+					// Override the height TinyMCE sets via JavaScript so that it
+					// can shrink to a smaller height. The actual height is
+					// determined by Flexbox.
+					height: 10px !important;
+				}
+			}
+		}
+	}
+
+	&__actions {
+		margin-top: $grid-unit-20;
+	}
+}

package/src/freeform/modal.js

@@ -7,6 +7,8 @@ import {
 	ToolbarButton,
 	Modal,
 	Button,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { useEffect, useState, RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -27,7 +29,6 @@ function ClassicEdit( props ) {
 		window.wp.oldEditor.initialize( props.id, {
 			tinymce: {
 				...settings,
-				height: 500,
 				setup( editor ) {
 					editor.on( 'init', () => {
 						const doc = editor.getDoc();
@@ -58,35 +59,38 @@ export default function ModalEdit( props ) {
 	} = props;
 	const [ isOpen, setOpen ] = useState( false );
 	const id = `editor-${ clientId }`;
-	const label = __( 'Classic Edit' );
+
+	const onClose = () => ( content ? setOpen( false ) : onReplace( [] ) );
 
 	return (
 		<>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton onClick={ () => setOpen( true ) }>
-						{ label }
+						{ __( 'Edit' ) }
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
 			{ content && <RawHTML>{ content }</RawHTML> }
 			{ ( isOpen || ! content ) && (
-				<Modal title={ label } __experimentalHideHeader={ true }>
-					<h2
-						style={ {
-							display: 'flex',
-							justifyContent: 'space-between',
-						} }
+				<Modal
+					title={ __( 'Classic Editor' ) }
+					onRequestClose={ onClose }
+					shouldCloseOnClickOutside={ false }
+					overlayClassName="block-editor-freeform-modal"
+				>
+					<ClassicEdit id={ id } defaultValue={ content } />
+					<Flex
+						className="block-editor-freeform-modal__actions"
+						justify="flex-end"
+						expanded={ false }
 					>
-						<div>{ label }</div>
-						<div>
-							<Button
-								onClick={ () =>
-									content ? setOpen( false ) : onReplace( [] )
-								}
-							>
+						<FlexItem>
+							<Button variant="tertiary" onClick={ onClose }>
 								{ __( 'Cancel' ) }
 							</Button>
+						</FlexItem>
+						<FlexItem>
 							<Button
 								variant="primary"
 								onClick={ () => {
@@ -101,9 +105,8 @@ export default function ModalEdit( props ) {
 							>
 								{ __( 'Save' ) }
 							</Button>
-						</div>
-					</h2>
-					<ClassicEdit id={ id } defaultValue={ content } />
+						</FlexItem>
+					</Flex>
 				</Modal>
 			) }
 		</>

package/src/gallery/v1/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -385,7 +380,7 @@ function GalleryEdit( props ) {
 	}
 
 	const imageSizeOptions = getImagesSizeOptions();
-	const shouldShowSizeOptions = hasImages && ! isEmpty( imageSizeOptions );
+	const shouldShowSizeOptions = hasImages && imageSizeOptions.length > 0;
 
 	return (
 		<>

package/src/gallery/v1/gallery-image.native.js

@@ -7,7 +7,6 @@ import {
 	ScrollView,
 	TouchableWithoutFeedback,
 } from 'react-native';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -334,7 +333,7 @@ class GalleryImage extends Component {
 	accessibilityLabelImageContainer() {
 		const { caption, 'aria-label': ariaLabel } = this.props;
 
-		return isEmpty( caption )
+		return ! caption
 			? ariaLabel
 			: ariaLabel +
 					'. ' +

package/src/group/test/__snapshots__/transforms.native.js.snap

@@ -20,7 +20,7 @@ exports[`Group block transforms to Columns block 1`] = `
 <!-- /wp:columns -->"
 `;
 
-exports[`Group block transforms unwraps content 1`] = `
+exports[`Group block transforms ungroups block 1`] = `
 "<!-- wp:paragraph -->
 <p>One.</p>
 <!-- /wp:paragraph -->

package/src/group/test/transforms.native.js

@@ -44,14 +44,13 @@ describe( `${ block } block transforms`, () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'unwraps content', async () => {
+	it( 'ungroups block', async () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const { getByText } = screen;
 		fireEvent.press( getBlock( screen, block ) );
 
 		await openBlockActionsMenu( screen );
-		fireEvent.press( getByText( 'Transform block…' ) );
-		fireEvent.press( getByText( 'Unwrap' ) );
+		fireEvent.press( getByText( 'Ungroup' ) );
 
 		// The first block created is the content of the Paragraph block.
 		const paragraph = getBlock( screen, 'Paragraph', 0 );
@@ -67,8 +66,7 @@ describe( `${ block } block transforms`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const transformOptions = await getBlockTransformOptions(
 			screen,
-			block,
-			{ canUnwrap: true }
+			block
 		);
 		expect( transformOptions ).toHaveLength( blockTransforms.length );
 	} );

package/src/group/transforms.js

@@ -48,13 +48,6 @@ const transforms = {
 			},
 		},
 	],
-	to: [
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( attributes, innerBlocks ) => innerBlocks,
-		},
-	],
 };
 
 export default transforms;

package/src/image/block.json

@@ -80,6 +80,9 @@
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "target"
+		},
+		"behaviors": {
+			"type": "object"
 		}
 	},
 	"supports": {

package/src/image/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -122,7 +121,7 @@ const deprecated = [
 				title,
 			} = attributes;
 
-			const newRel = isEmpty( rel ) ? undefined : rel;
+			const newRel = ! rel ? undefined : rel;
 
 			const classes = classnames( {
 				[ `align${ align }` ]: align,
@@ -202,7 +201,7 @@ const deprecated = [
 				title,
 			} = attributes;
 
-			const newRel = isEmpty( rel ) ? undefined : rel;
+			const newRel = ! rel ? undefined : rel;
 
 			const classes = classnames( {
 				[ `align${ align }` ]: align,

package/src/image/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +17,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -28,6 +28,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import Image from './image';
+import { unlock } from '../private-apis';
 
 /**
  * Module constants
@@ -40,6 +41,8 @@ import {
 	ALLOWED_MEDIA_TYPES,
 } from './constants';
 
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
+
 export const pickRelevantMediaFiles = ( image, size ) => {
 	const imageProps = Object.fromEntries(
 		Object.entries( image ?? {} ).filter( ( [ key ] ) =>
@@ -125,20 +128,15 @@ export function ImageEdit( {
 	}, [ caption ] );
 
 	const ref = useRef();
-	const { imageDefaultSize, mediaUpload, isContentLocked } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetContentLockingParent } =
-				select( blockEditorStore );
-			const settings = getSettings();
-			return {
-				imageDefaultSize: settings.imageDefaultSize,
-				mediaUpload: settings.mediaUpload,
-				isContentLocked:
-					!! __unstableGetContentLockingParent( clientId ),
-			};
-		},
-		[]
-	);
+	const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const settings = getSettings();
+		return {
+			imageDefaultSize: settings.imageDefaultSize,
+			mediaUpload: settings.mediaUpload,
+		};
+	}, [] );
+	const blockEditingMode = useBlockEditingMode();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	function onUploadError( message ) {
@@ -320,7 +318,9 @@ export function ImageEdit( {
 		'is-resized': !! width || !! height,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'has-custom-border':
-			!! borderProps.className || ! isEmpty( borderProps.style ),
+			!! borderProps.className ||
+			( borderProps.style &&
+				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
 	const blockProps = useBlockProps( {
@@ -365,10 +365,10 @@ export function ImageEdit( {
 					containerRef={ ref }
 					context={ context }
 					clientId={ clientId }
-					isContentLocked={ isContentLocked }
+					blockEditingMode={ blockEditingMode }
 				/>
 			) }
-			{ ! url && ! isContentLocked && (
+			{ ! url && blockEditingMode === 'default' && (
 				<BlockControls group="block">
 					<BlockAlignmentControl
 						value={ align }

package/src/image/image.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -79,7 +74,7 @@ export default function Image( {
 	containerRef,
 	context,
 	clientId,
-	isContentLocked,
+	blockEditingMode,
 } ) {
 	const {
 		url = '',
@@ -122,7 +117,7 @@ export default function Image( {
 					),
 			};
 		},
-		[ id, isSelected, clientId ]
+		[ id, isSelected ]
 	);
 	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
 		useSelect(
@@ -161,9 +156,10 @@ export default function Image( {
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
 	const clientWidth = useClientWidth( containerRef, [ align ] );
+	const hasNonContentControls = blockEditingMode === 'default';
 	const isResizable =
 		allowResize &&
-		! isContentLocked &&
+		hasNonContentControls &&
 		! ( isWideAligned && isLargeViewport );
 	const imageSizeOptions = imageSizes
 		.filter(
@@ -332,13 +328,13 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ ! isContentLocked && (
+				{ hasNonContentControls && (
 					<BlockAlignmentControl
 						value={ align }
 						onChange={ updateAlignment }
 					/>
 				) }
-				{ ! isContentLocked && (
+				{ hasNonContentControls && (
 					<ToolbarButton
 						onClick={ () => {
 							setShowCaption( ! showCaption );
@@ -480,7 +476,8 @@ export default function Image( {
 	const borderProps = useBorderProps( attributes );
 	const isRounded = attributes.className?.includes( 'is-style-rounded' );
 	const hasCustomBorder =
-		!! borderProps.className || ! isEmpty( borderProps.style );
+		!! borderProps.className ||
+		( borderProps.style && Object.keys( borderProps.style ).length > 0 );
 
 	let img = (
 		// Disable reason: Image itself is not meant to be interactive, but

package/src/image/index.php

@@ -14,6 +14,7 @@
  * @return string Returns the block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content ) {
+
 	$processor = new WP_HTML_Tag_Processor( $content );
 	$processor->next_tag( 'img' );
 
@@ -27,16 +28,88 @@ function render_block_core_image( $attributes, $content ) {
 		// which now wraps Image Blocks within innerBlocks.
 		// The data-id attribute is added in a core/gallery `render_block_data` hook.
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
+	}
+
+	$link_destination = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
+
+	// Get the lightbox setting from the block attributes.
+	if ( isset( $attributes['behaviors']['lightbox'] ) ) {
+		$lightbox = $attributes['behaviors']['lightbox'];
+		// If the lightbox setting is not set in the block attributes, get it from the theme.json file.
+	} else {
+		$theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data();
+		if ( isset( $theme_data['behaviors']['blocks']['core/image']['lightbox'] ) ) {
+			$lightbox = $theme_data['behaviors']['blocks']['core/image']['lightbox'];
+		} else {
+			$lightbox = false;
+		}
+	}
+
+	$experiments = get_option( 'gutenberg-experiments' );
+
+	if ( ! empty( $experiments['gutenberg-interactivity-api-core-blocks'] ) && 'none' === $link_destination && $lightbox ) {
+
+		$aria_label = 'Open image lightbox';
+		if ( $processor->get_attribute( 'alt' ) ) {
+			$aria_label .= ' : ' . $processor->get_attribute( 'alt' );
+		}
 		$content = $processor->get_updated_html();
+
+		// Wrap the image in the body content with a button.
+		$img = null;
+		preg_match( '/<img[^>]+>/', $content, $img );
+		$button       = '<div class="img-container">
+			 					<button aria-haspopup="dialog" aria-label="' . $aria_label . '" data-wp-on.click="actions.core.image.showLightbox"></button>'
+									. $img[0] .
+								'</div>';
+		$body_content = preg_replace( '/<img[^>]+>/', $button, $content );
+
+		// For the modal, set an ID on the image to be used for an aria-labelledby attribute.
+		$modal_content = new WP_HTML_Tag_Processor( $content );
+		$modal_content->next_tag( 'img' );
+		$image_lightbox_id = $modal_content->get_attribute( 'class' ) . '-lightbox';
+		$modal_content->set_attribute( 'id', $image_lightbox_id );
+		$modal_content = $modal_content->get_updated_html();
+
+		$background_color  = wp_get_global_styles( array( 'color', 'background' ) );
+		$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
+
+		return
+			<<<HTML
+				<div class="wp-lightbox-container"
+					data-wp-island
+					data-wp-context='{ "core": { "image": { "initialized": false, "lightboxEnabled": false } } }'>
+						$body_content
+						<div data-wp-body="" class="wp-lightbox-overlay"
+							data-wp-bind.role="selectors.core.image.roleAttribute"
+							aria-labelledby="$image_lightbox_id"
+							data-wp-class.initialized="context.core.image.initialized"
+							data-wp-class.active="context.core.image.lightboxEnabled"
+							data-wp-bind.aria-hidden="!context.core.image.lightboxEnabled"
+							data-wp-bind.aria-modal="context.core.image.lightboxEnabled"
+							data-wp-effect="effects.core.image.initLightbox"
+							data-wp-on.keydown="actions.core.image.handleKeydown"
+							data-wp-on.mousewheel="actions.core.image.hideLightbox"
+							data-wp-on.click="actions.core.image.hideLightbox"
+							>
+								<button aria-label="Close lightbox" class="close-button" data-wp-on.click="actions.core.image.hideLightbox">
+									$close_button_icon
+								</button>
+								$modal_content
+								<div class="scrim" style="background-color: $background_color"></div>
+						</div>
+				</div>
+HTML;
 	}
-	return $content;
-}
 
+	return $processor->get_updated_html();
+}
 
 /**
  * Registers the `core/image` block on server.
  */
 function register_block_core_image() {
+
 	register_block_type_from_metadata(
 		__DIR__ . '/image',
 		array(

package/src/image/interactivity.js

@@ -0,0 +1,113 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../utils/interactivity';
+
+const focusableSelectors = [
+	'a[href]',
+	'area[href]',
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'button:not([disabled]):not([aria-hidden])',
+	'iframe',
+	'object',
+	'embed',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
+
+store( {
+	actions: {
+		core: {
+			image: {
+				showLightbox: ( { context } ) => {
+					context.core.image.initialized = true;
+					context.core.image.lightboxEnabled = true;
+					context.core.image.lastFocusedElement =
+						window.document.activeElement;
+					context.core.image.scrollPosition = window.scrollY;
+					document.documentElement.classList.add(
+						'has-lightbox-open'
+					);
+				},
+				hideLightbox: async ( { context, event } ) => {
+					if ( context.core.image.lightboxEnabled ) {
+						// If scrolling, wait a moment before closing the lightbox.
+						if (
+							event.type === 'mousewheel' &&
+							Math.abs(
+								window.scrollY -
+									context.core.image.scrollPosition
+							) < 5
+						) {
+							return;
+						}
+						document.documentElement.classList.remove(
+							'has-lightbox-open'
+						);
+
+						context.core.image.lightboxEnabled = false;
+						context.core.image.lastFocusedElement.focus();
+					}
+				},
+				handleKeydown: ( { context, actions, event } ) => {
+					if ( context.core.image.lightboxEnabled ) {
+						if ( event.key === 'Tab' || event.keyCode === 9 ) {
+							// If shift + tab it change the direction
+							if (
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.core.image.firstFocusableElement
+							) {
+								event.preventDefault();
+								context.core.image.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.core.image.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.core.image.firstFocusableElement.focus();
+							}
+						}
+
+						if ( event.key === 'Escape' || event.keyCode === 27 ) {
+							actions.core.image.hideLightbox( {
+								context,
+								event,
+							} );
+						}
+					}
+				},
+			},
+		},
+	},
+	selectors: {
+		core: {
+			image: {
+				roleAttribute: ( { context } ) => {
+					return context.core.image.lightboxEnabled ? 'dialog' : '';
+				},
+			},
+		},
+	},
+	effects: {
+		core: {
+			image: {
+				initLightbox: async ( { context, ref } ) => {
+					if ( context.core.image.lightboxEnabled ) {
+						const focusableElements =
+							ref.querySelectorAll( focusableSelectors );
+						context.core.image.firstFocusableElement =
+							focusableElements[ 0 ];
+						context.core.image.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+
+						ref.querySelector( '.close-button' ).focus();
+					}
+				},
+			},
+		},
+	},
+} );

package/src/image/save.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,7 +30,7 @@ export default function save( { attributes } ) {
 		title,
 	} = attributes;
 
-	const newRel = isEmpty( rel ) ? undefined : rel;
+	const newRel = ! rel ? undefined : rel;
 	const borderProps = getBorderClassesAndStyles( attributes );
 
 	const classes = classnames( {
@@ -39,7 +38,9 @@ export default function save( { attributes } ) {
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,
 		'has-custom-border':
-			!! borderProps.className || ! isEmpty( borderProps.style ),
+			!! borderProps.className ||
+			( borderProps.style &&
+				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
 	const imageClasses = classnames( borderProps.className, {