@wordpress/block-library 8.9.0 → 8.10.0

package/src/details/block.json

@@ -5,28 +5,29 @@
 	"name": "core/details",
 	"title": "Details",
 	"category": "text",
-	"description": "A block that displays a summary and shows or hides additional content.",
-	"keywords": [ "disclosure", "summary", "hide", "transcript" ],
+	"description": "Hide and show additional content.",
+	"keywords": [ "disclosure", "summary", "hide", "accordion" ],
 	"textdomain": "default",
 	"attributes": {
 		"showContent": {
 			"type": "boolean",
 			"default": false
+		},
+		"summary": {
+			"type": "string"
 		}
 	},
 	"supports": {
-		"align": true,
+		"align": [ "wide", "full" ],
 		"color": {
 			"gradients": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
-				"text": true,
-				"link": true
+				"text": true
 			}
 		},
 		"__experimentalBorder": {
-			"radius": true,
 			"color": true,
 			"width": true,
 			"style": true
@@ -50,5 +51,6 @@
 			}
 		}
 	},
+	"editorStyle": "wp-block-details-editor",
 	"style": "wp-block-details"
 }

package/src/details/edit.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
@@ -11,15 +12,21 @@ import { useSelect } from '@wordpress/data';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const TEMPLATE = [ [ 'core/details-summary' ], [ 'core/details-content' ] ];
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __( 'Type / to add a hidden block' ),
+		},
+	],
+];
 
 function DetailsEdit( { attributes, setAttributes, clientId } ) {
-	const { showContent } = attributes;
+	const { showContent, summary } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: TEMPLATE,
 		template: TEMPLATE,
-		templateLock: 'all',
+		__experimentalCaptureToolbars: true,
 	} );
 
 	// Check if either the block or the inner blocks are selected.
@@ -51,7 +58,22 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 			<details
 				{ ...innerBlocksProps }
 				open={ hasSelection || showContent }
-			></details>
+			>
+				<summary onClick={ ( event ) => event.preventDefault() }>
+					<RichText
+						aria-label={ __( 'Write summary' ) }
+						placeholder={ __( 'Write summary…' ) }
+						allowedFormats={ [] }
+						withoutInteractiveFormatting
+						value={ summary }
+						onChange={ ( newSummary ) =>
+							setAttributes( { summary: newSummary } )
+						}
+						multiline={ false }
+					/>
+				</summary>
+				{ innerBlocksProps.children }
+			</details>
 		</>
 	);
 }

package/src/details/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-details summary div {
+	display: inline;
+}

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

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

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

@@ -8,6 +8,7 @@ import {
 	getEditorHtml,
 	render,
 	waitFor,
+	setupApiFetch,
 } from 'test/helpers';
 import { Image } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -22,9 +23,10 @@ import {
 	sendMediaUpload,
 	subscribeMediaUpload,
 } from '@wordpress/react-native-bridge';
-import { select } from '@wordpress/data';
+import { select, dispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import apiFetch from '@wordpress/api-fetch';
 import '@wordpress/jest-console';
 
 /**
@@ -45,7 +47,15 @@ function mockGetMedia( media ) {
 	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
 }
 
-const apiFetchPromise = Promise.resolve( {} );
+const FETCH_MEDIA = {
+	request: {
+		path: `/wp/v2/media/1?context=edit`,
+	},
+	response: {
+		source_url: 'https://cldup.com/cXyG__fTLN.jpg',
+		id: 1,
+	},
+};
 
 const clipboardPromise = Promise.resolve( '' );
 Clipboard.getString.mockImplementation( () => clipboardPromise );
@@ -58,6 +68,18 @@ beforeAll( () => {
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 } );
 
+beforeEach( () => {
+	// Mock media fetch requests
+	setupApiFetch( [ FETCH_MEDIA ] );
+
+	// Invalidate `getMedia` resolutions to allow requesting to the API the same media id
+	dispatch( coreStore ).invalidateResolutionForStoreSelector( 'getMedia' );
+} );
+
+afterEach( () => {
+	apiFetch.mockReset();
+} );
+
 afterAll( () => {
 	getBlockTypes().forEach( ( { name } ) => {
 		unregisterBlockType( name );
@@ -78,8 +100,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -105,8 +127,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -132,8 +154,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -169,8 +191,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -211,8 +233,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is not fetched via `getMedia` due to the presence of query parameters in the URL.
+		expect( apiFetch ).not.toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -236,8 +258,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -267,8 +289,8 @@ describe( 'Image Block', () => {
 		</figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );

package/src/index.js

@@ -46,8 +46,6 @@ import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as commentsTitle from './comments-title';
 import * as cover from './cover';
 import * as details from './details';
-import * as detailsContent from './details-content';
-import * as detailsSummary from './details-summary';
 import * as embed from './embed';
 import * as file from './file';
 import * as gallery from './gallery';
@@ -230,8 +228,6 @@ const getAllBlocks = () => {
 	];
 	if ( window?.__experimentalEnableDetailsBlocks ) {
 		blocks.push( details );
-		blocks.push( detailsContent );
-		blocks.push( detailsSummary );
 	}
 	return blocks.filter( Boolean );
 };

package/src/index.native.js

@@ -88,6 +88,7 @@ export const coreBlocks = [
 	column,
 	cover,
 	embed,
+	group,
 	file,
 	html,
 	mediaText,

package/src/loginout/block.json

@@ -21,7 +21,17 @@
 		"anchor": true,
 		"className": true,
 		"typography": {
-			"fontSize": false
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

package/src/navigation/constants.js

@@ -0,0 +1,16 @@
+export const DEFAULT_BLOCK = {
+	name: 'core/navigation-link',
+};
+
+export const ALLOWED_BLOCKS = [
+	'core/navigation-link',
+	'core/search',
+	'core/social-links',
+	'core/page-list',
+	'core/spacer',
+	'core/home-link',
+	'core/site-title',
+	'core/site-logo',
+	'core/navigation-submenu',
+	'core/loginout',
+];