@wordpress/block-library 8.9.0 → 8.11.0

package/src/details/index.js

@@ -18,13 +18,18 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		attributes: {
+			summary: 'La Mancha',
+			showContent: true,
+		},
 		innerBlocks: [
 			{
-				name: 'core/details-summary',
-				attributes: { summary: __( 'Details' ) },
-			},
-			{
-				name: 'core/details-content',
+				name: 'core/paragraph',
+				attributes: {
+					content: __(
+						'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
+					),
+				},
 			},
 		],
 	},

package/src/details/save.js

@@ -1,14 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { showContent } = attributes;
+	const summary = attributes.summary ? attributes.summary : 'Details';
 	const blockProps = useBlockProps.save();
 
 	return (
 		<details { ...blockProps } open={ showContent }>
+			<summary>
+				<RichText.Content value={ summary } />
+			</summary>
 			<InnerBlocks.Content />
 		</details>
 	);

package/src/details/style.scss

@@ -1,3 +1,19 @@
 .wp-block-details {
+	box-sizing: border-box;
 	overflow: hidden;
 }
+
+.wp-block-details summary {
+	cursor: pointer;
+}
+
+// Use block gap for block; falls back to browser default if not supported.
+.wp-block-details > *:not(summary) {
+	margin-block-start: var(--wp--style--block-gap);
+	margin-block-end: 0;
+}
+
+// Remove excess margin from the last block.
+.wp-block-details > *:last-child {
+	margin-bottom: 0;
+}

package/src/editor.scss

@@ -13,7 +13,7 @@
 @import "./comments-pagination-numbers/editor.scss";
 @import "./comments-title/editor.scss";
 @import "./cover/editor.scss";
-@import "./details-summary/editor.scss";
+@import "./details/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
 @import "./freeform/editor.scss";

package/src/embed/variations.js

@@ -218,13 +218,13 @@ const variations = [
 		attributes: { providerNameSlug: 'mixcloud', responsive: true },
 	},
 	{
-		name: 'pocketcasts',
+		name: 'pocket-casts',
 		title: 'Pocket Casts',
 		icon: embedPocketCastsIcon,
 		keywords: [ __( 'podcast' ), __( 'audio' ) ],
 		description: __( 'Embed a podcast player from Pocket Casts.' ),
 		patterns: [ /^https:\/\/pca.st\/\w+/i ],
-		attributes: { providerNameSlug: 'pocketcasts', responsive: true },
+		attributes: { providerNameSlug: 'pocket-casts', responsive: true },
 	},
 	{
 		name: 'reddit',

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/file/view.js

@@ -3,4 +3,7 @@
  */
 import { hidePdfEmbedsOnUnsupportedBrowsers } from './utils';
 
-hidePdfEmbedsOnUnsupportedBrowsers();
+document.addEventListener(
+	'DOMContentLoaded',
+	hidePdfEmbedsOnUnsupportedBrowsers
+);

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/edit.js

@@ -127,7 +127,6 @@ function GalleryEdit( props ) {
 		replaceInnerBlocks,
 		updateBlockAttributes,
 		selectBlock,
-		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
@@ -186,9 +185,6 @@ function GalleryEdit( props ) {
 				align: undefined,
 			} );
 		} );
-		if ( newImages?.length > 0 ) {
-			clearSelectedBlock();
-		}
 	}, [ newImages ] );
 
 	const imageSizeOptions = useImageSizes(
@@ -343,10 +339,6 @@ function GalleryEdit( props ) {
 			} );
 		} );
 
-		if ( newBlocks?.length > 0 ) {
-			selectBlock( newBlocks[ 0 ].clientId );
-		}
-
 		replaceInnerBlocks(
 			clientId,
 			existingImageBlocks
@@ -357,6 +349,11 @@ function GalleryEdit( props ) {
 						newOrderMap[ b.attributes.id ]
 				)
 		);
+
+		// Select the first block to scroll into view when new blocks are added.
+		if ( newBlocks?.length > 0 ) {
+			selectBlock( newBlocks[ 0 ].clientId );
+		}
 	}
 
 	function onUploadError( message ) {

package/src/gallery/editor.scss

@@ -4,12 +4,6 @@ figure.wp-block-gallery {
 	// See https://github.com/WordPress/gutenberg/pull/10358
 
 	display: block;
-	&.has-nested-images {
-		.components-drop-zone {
-			display: none;
-			pointer-events: none;
-		}
-	}
 
 	> .blocks-gallery-caption {
 		flex: 0 0 100%;

package/src/gallery/test/index.native.js

@@ -14,7 +14,9 @@ import {
 	setupMediaUpload,
 	triggerBlockListLayout,
 	within,
+	setupPicker,
 } from 'test/helpers';
+import { ActionSheetIOS } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -36,6 +38,12 @@ import {
 	generateGalleryBlock,
 } from './helpers';
 
+const MEDIA_OPTIONS = [
+	'Choose from device',
+	'Take a Photo',
+	'WordPress Media Library',
+];
+
 const media = [
 	{
 		localId: 1,
@@ -96,9 +104,44 @@ describe( 'Gallery block', () => {
 		expect( getByText( 'WordPress Media Library' ) ).toBeVisible();
 	} );
 
+	it( 'displays correct media options picker', async () => {
+		// Initialize with an empty gallery
+		const screen = await initializeEditor( {
+			initialHtml: generateGalleryBlock( 0 ),
+		} );
+		const { getByText } = screen;
+
+		// Tap on Gallery block
+		const block = await getBlock( screen, 'Gallery' );
+		fireEvent.press( block );
+		fireEvent.press( within( block ).getByText( 'ADD MEDIA' ) );
+
+		// Observe that media options picker is displayed
+		/* eslint-disable jest/no-conditional-expect */
+		if ( Platform.isIOS ) {
+			// On iOS the picker is rendered natively, so we have
+			// to check the arguments passed to `ActionSheetIOS`.
+			expect(
+				ActionSheetIOS.showActionSheetWithOptions
+			).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					title: 'Choose images',
+					options: [ 'Cancel', ...MEDIA_OPTIONS ],
+				} ),
+				expect.any( Function )
+			);
+		} else {
+			expect( getByText( 'Choose images' ) ).toBeVisible();
+			MEDIA_OPTIONS.forEach( ( option ) =>
+				expect( getByText( option ) ).toBeVisible()
+			);
+		}
+		/* eslint-enable jest/no-conditional-expect */
+	} );
+
 	// This case is disabled until the issue (https://github.com/WordPress/gutenberg/issues/38444)
 	// is addressed.
-	it.skip( 'displays media options picker when selecting the block', async () => {
+	it.skip( 'block remains selected after dimissing the media options picker', async () => {
 		// Initialize with an empty gallery
 		const { getByLabelText, getByText, getByTestId } =
 			await initializeEditor( {
@@ -213,11 +256,13 @@ describe( 'Gallery block', () => {
 			setupMediaPicker();
 
 		// Initialize with an empty gallery
-		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
+		const screen = await initializeWithGalleryBlock();
+		const { galleryBlock, getByText } = screen;
+		const { selectOption } = setupPicker( screen, MEDIA_OPTIONS );
 
 		// Upload images from device
 		fireEvent.press( getByText( 'ADD MEDIA' ) );
-		fireEvent.press( getByText( 'Choose from device' ) );
+		selectOption( 'Choose from device' );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
 
 		// Return media items picked

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