@wordpress/block-library 8.10.0 → 8.12.0

package/src/cover/edit/resizable-cover-popover.js

@@ -25,6 +25,8 @@ const RESIZABLE_BOX_ENABLE_OPTION = {
 	topLeft: false,
 };
 
+const { ResizableBoxPopover } = unlock( blockEditorPrivateApis );
+
 export default function ResizableCoverPopover( {
 	className,
 	height,
@@ -37,7 +39,6 @@ export default function ResizableCoverPopover( {
 	width,
 	...props
 } ) {
-	const { ResizableBoxPopover } = unlock( blockEditorPrivateApis );
 	const [ isResizing, setIsResizing ] = useState( false );
 	const dimensions = useMemo(
 		() => ( { height, minHeight, width } ),

package/src/details/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"__experimental": true,
+	"apiVersion": 3,
 	"name": "core/details",
 	"title": "Details",
 	"category": "text",

package/src/embed/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/embed",
 	"title": "Embed",
 	"category": "embed",

package/src/file/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/file",
 	"title": "File",
 	"category": "media",
@@ -67,7 +67,7 @@
 			}
 		}
 	},
-	"viewScript": "file:./view.min.js",
+	"viewScript": "file:./interactivity.min.js",
 	"editorStyle": "wp-block-file-editor",
 	"style": "wp-block-file"
 }

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/index.php

@@ -8,15 +8,27 @@
 /**
  * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-file-view` script.
  *
- * @param array  $attributes The block attributes.
- * @param string $content    The block content.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the block content.
  */
-function render_block_core_file( $attributes, $content ) {
-	$should_load_view_script = ! empty( $attributes['displayPreview'] ) && ! wp_script_is( 'wp-block-file-view' );
-	if ( $should_load_view_script ) {
-		wp_enqueue_script( 'wp-block-file-view' );
+function render_block_core_file( $attributes, $content, $block ) {
+	$should_load_view_script = ! empty( $attributes['displayPreview'] );
+	$view_js_file            = 'wp-block-file-view';
+	// If the script already exists, there is no point in removing it from viewScript.
+	if ( ! wp_script_is( $view_js_file ) ) {
+		$script_handles = $block->block_type->view_script_handles;
+
+		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+		if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		}
+		// If the script is needed, but it was previously removed, add it again.
+		if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+		}
 	}
 
 	// Update object's aria-label attribute if present in block HTML.
@@ -25,7 +37,7 @@ function render_block_core_file( $attributes, $content ) {
 	$pattern = '@<object.+(?<attribute>aria-label="(?<filename>[^"]+)?")@i';
 	$content = preg_replace_callback(
 		$pattern,
-		function ( $matches ) {
+		static function ( $matches ) {
 			$filename     = ! empty( $matches['filename'] ) ? $matches['filename'] : '';
 			$has_filename = ! empty( $filename ) && 'PDF embed' !== $filename;
 			$label        = $has_filename ?
@@ -41,6 +53,17 @@ function render_block_core_file( $attributes, $content ) {
 		$content
 	);
 
+	// If it uses the Interactivity API, add the directives.
+	if ( $should_load_view_script ) {
+		$processor = new WP_HTML_Tag_Processor( $content );
+		$processor->next_tag();
+		$processor->set_attribute( 'data-wp-interactive', '' );
+		$processor->next_tag( 'object' );
+		$processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'hidden', true );
+		return $processor->get_updated_html();
+	}
+
 	return $content;
 }
 

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/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/freeform",
 	"title": "Classic",
 	"category": "text",
@@ -9,7 +9,7 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {

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/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/gallery",
 	"title": "Gallery",
 	"category": "media",

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/gallery/v1/save.js

@@ -70,7 +70,7 @@ export default function saveV1( { attributes } ) {
 									<RichText.Content
 										tagName="figcaption"
 										className={ classnames(
-											'blocks-gallery-item',
+											'blocks-gallery-item__caption',
 											__experimentalGetElementClassName(
 												'caption'
 											)

package/src/group/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/group",
 	"title": "Group",
 	"category": "design",

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/heading/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/heading",
 	"title": "Heading",
 	"category": "text",

package/src/home-link/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/home-link",
 	"category": "design",
 	"parent": [ "core/navigation" ],

package/src/html/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/html",
 	"title": "Custom HTML",
 	"category": "widgets",

package/src/image/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
@@ -84,6 +84,9 @@
 	},
 	"supports": {
 		"anchor": true,
+		"behaviors": {
+			"lightbox": true
+		},
 		"color": {
 			"text": false,
 			"background": false

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,16 @@ 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'] );
-		$content = $processor->get_updated_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(