@wordpress/block-library 8.18.1-next.5a1d1283.0 → 8.19.0

package/src/code/edit.js

@@ -3,20 +3,32 @@
  */
 import { __ } from '@wordpress/i18n';
 import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
-export default function CodeEdit( { attributes, setAttributes, onRemove } ) {
+export default function CodeEdit( {
+	attributes,
+	setAttributes,
+	onRemove,
+	insertBlocksAfter,
+	mergeBlocks,
+} ) {
 	const blockProps = useBlockProps();
 	return (
 		<pre { ...blockProps }>
 			<RichText
 				tagName="code"
+				identifier="content"
 				value={ attributes.content }
 				onChange={ ( content ) => setAttributes( { content } ) }
 				onRemove={ onRemove }
+				onMerge={ mergeBlocks }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
 				preserveWhiteSpace
 				__unstablePastePlainText
+				__unstableOnSplitAtDoubleLineEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
 			/>
 		</pre>
 	);

package/src/code/index.js

@@ -29,6 +29,11 @@ export const settings = {
 			/* eslint-enable @wordpress/i18n-no-collapsible-whitespace */
 		},
 	},
+	merge( attributes, attributesToMerge ) {
+		return {
+			content: attributes.content + '\n\n' + attributesToMerge.content,
+		};
+	},
 	transforms,
 	edit,
 	save,

package/src/column/block.json

@@ -30,6 +30,7 @@
 		"color": {
 			"gradients": true,
 			"heading": true,
+			"button": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/columns/block.json

@@ -26,6 +26,8 @@
 		"color": {
 			"gradients": true,
 			"link": true,
+			"heading": true,
+			"button": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true

package/src/comment-template/index.php

@@ -28,7 +28,7 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 	$content = '';
 	foreach ( $comments as $comment ) {
 		$comment_id           = $comment->comment_ID;
-		$filter_block_context = static function( $context ) use ( $comment_id ) {
+		$filter_block_context = static function ( $context ) use ( $comment_id ) {
 			$context['commentId'] = $comment_id;
 			return $context;
 		};

package/src/comments-pagination-next/index.php

@@ -26,7 +26,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
 	$pagination_arrow = get_comments_pagination_arrow( $block, 'next' );
 
-	$filter_link_attributes = static function() {
+	$filter_link_attributes = static function () {
 		return get_block_wrapper_attributes();
 	};
 	add_filter( 'next_comments_link_attributes', $filter_link_attributes );

package/src/comments-pagination-previous/index.php

@@ -22,7 +22,7 @@ function render_block_core_comments_pagination_previous( $attributes, $content,
 		$label = $pagination_arrow . $label;
 	}
 
-	$filter_link_attributes = static function() {
+	$filter_link_attributes = static function () {
 		return get_block_wrapper_attributes();
 	};
 	add_filter( 'previous_comments_link_attributes', $filter_link_attributes );

package/src/cover/style.scss

@@ -171,8 +171,19 @@
 	&.has-custom-content-position.has-custom-content-position {
 		.wp-block-cover__inner-container {
 			margin: 0;
-			width: auto;
 		}
+		&.is-position-top-left,
+		&.is-position-top-right,
+		&.is-position-center-left,
+		&.is-position-center-right,
+		&.is-position-bottom-left,
+		&.is-position-bottom-right {
+			.wp-block-cover__inner-container {
+				margin: 0;
+				width: auto;
+			}
+		}
+
 	}
 
 	// Extra specificity for in edit mode where other styles would override it otherwise.

package/src/cover/test/edit.js

@@ -47,7 +47,7 @@ async function setup( attributes, useCoreBlocks, customSettings ) {
 
 async function createAndSelectBlock() {
 	await userEvent.click(
-		screen.getByRole( 'button', {
+		screen.getByRole( 'option', {
 			name: 'Color: Black',
 		} )
 	);
@@ -72,7 +72,7 @@ describe( 'Cover block', () => {
 
 		test( 'can set overlay color using color picker on block placeholder', async () => {
 			const { container } = await setup();
-			const colorPicker = screen.getByRole( 'button', {
+			const colorPicker = screen.getByRole( 'option', {
 				name: 'Color: Black',
 			} );
 			await userEvent.click( colorPicker );
@@ -96,7 +96,7 @@ describe( 'Cover block', () => {
 			await setup();
 
 			await userEvent.click(
-				screen.getByRole( 'button', {
+				screen.getByRole( 'option', {
 					name: 'Color: Black',
 				} )
 			);
@@ -389,7 +389,7 @@ describe( 'Cover block', () => {
 	describe( 'isDark settings', () => {
 		test( 'should toggle is-light class if background changed from light to dark', async () => {
 			await setup();
-			const colorPicker = screen.getByRole( 'button', {
+			const colorPicker = screen.getByRole( 'option', {
 				name: 'Color: White',
 			} );
 			await userEvent.click( colorPicker );
@@ -405,7 +405,7 @@ describe( 'Cover block', () => {
 				} )
 			);
 			await userEvent.click( screen.getByText( 'Overlay' ) );
-			const popupColorPicker = screen.getByRole( 'button', {
+			const popupColorPicker = screen.getByRole( 'option', {
 				name: 'Color: Black',
 			} );
 			await userEvent.click( popupColorPicker );
@@ -413,7 +413,7 @@ describe( 'Cover block', () => {
 		} );
 		test( 'should remove is-light class if overlay color is removed', async () => {
 			await setup();
-			const colorPicker = screen.getByRole( 'button', {
+			const colorPicker = screen.getByRole( 'option', {
 				name: 'Color: White',
 			} );
 			await userEvent.click( colorPicker );
@@ -428,7 +428,7 @@ describe( 'Cover block', () => {
 			await userEvent.click( screen.getByText( 'Overlay' ) );
 			// The default color is black, so clicking the black color option will remove the background color,
 			// which should remove the isDark setting and assign the is-light class.
-			const popupColorPicker = screen.getByRole( 'button', {
+			const popupColorPicker = screen.getByRole( 'option', {
 				name: 'Color: White',
 			} );
 			await userEvent.click( popupColorPicker );

package/src/cover/test/edit.native.js

@@ -169,9 +169,8 @@ describe( 'when an image is attached', () => {
 			/>
 		);
 		fireEvent.press( screen.getByLabelText( 'Edit image' ) );
-		const [ clearMediaButton ] = await screen.findAllByText(
-			'Clear Media'
-		);
+		const [ clearMediaButton ] =
+			await screen.findAllByText( 'Clear Media' );
 		fireEvent.press( clearMediaButton );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
@@ -191,9 +190,8 @@ describe( 'when an image is attached', () => {
 				setAttributes={ setAttributes }
 			/>
 		);
-		const fixedBackgroundButton = await screen.findByText(
-			'Fixed background'
-		);
+		const fixedBackgroundButton =
+			await screen.findByText( 'Fixed background' );
 		fireEvent.press( fixedBackgroundButton );
 
 		expect( setAttributes ).toHaveBeenCalledWith(
@@ -210,9 +208,8 @@ describe( 'when an image is attached', () => {
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await screen.findByText(
-			'Edit focal point'
-		);
+		const editFocalPointButton =
+			await screen.findByText( 'Edit focal point' );
 		fireEvent.press( editFocalPointButton );
 		fireEvent(
 			screen.getByTestId( 'Slider Y-Axis Position', { hidden: true } ),
@@ -239,9 +236,8 @@ describe( 'when an image is attached', () => {
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await screen.findByText(
-			'Edit focal point'
-		);
+		const editFocalPointButton =
+			await screen.findByText( 'Edit focal point' );
 		fireEvent.press( editFocalPointButton );
 		fireEvent.press(
 			screen.getByText( ( attributes.focalPoint.x * 100 ).toString(), {
@@ -268,9 +264,8 @@ describe( 'when an image is attached', () => {
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await screen.findByText(
-			'Edit focal point'
-		);
+		const editFocalPointButton =
+			await screen.findByText( 'Edit focal point' );
 		fireEvent.press( editFocalPointButton );
 		fireEvent.press(
 			screen.getByText( ( attributes.focalPoint.x * 100 ).toString(), {
@@ -360,9 +355,8 @@ describe( 'color settings', () => {
 		fireEvent.press( colorButton );
 
 		// Wait for the block to be created.
-		const [ coverBlockWithOverlay ] = await screen.findAllByLabelText(
-			/Cover Block\. Row 1/
-		);
+		const [ coverBlockWithOverlay ] =
+			await screen.findAllByLabelText( /Cover Block\. Row 1/ );
 		fireEvent.press( coverBlockWithOverlay );
 
 		// Open Block Settings.
@@ -399,9 +393,8 @@ describe( 'color settings', () => {
 		} );
 
 		// Wait for the block to be created.
-		const [ coverBlock ] = await screen.findAllByLabelText(
-			/Cover Block\. Row 1/
-		);
+		const [ coverBlock ] =
+			await screen.findAllByLabelText( /Cover Block\. Row 1/ );
 		fireEvent.press( coverBlock );
 
 		// Open Block Settings.
@@ -455,9 +448,8 @@ describe( 'color settings', () => {
 		fireEvent.press( colorButton );
 
 		// Wait for the block to be created.
-		const [ coverBlockWithOverlay ] = await screen.findAllByLabelText(
-			/Cover Block\. Row 1/
-		);
+		const [ coverBlockWithOverlay ] =
+			await screen.findAllByLabelText( /Cover Block\. Row 1/ );
 		fireEvent.press( coverBlockWithOverlay );
 
 		// Open Block Settings.
@@ -511,9 +503,8 @@ describe( 'color settings', () => {
 		} );
 
 		// Wait for the block to be created.
-		const [ coverBlock ] = await screen.findAllByLabelText(
-			/Cover Block\. Row 1/
-		);
+		const [ coverBlock ] =
+			await screen.findAllByLabelText( /Cover Block\. Row 1/ );
 		fireEvent.press( coverBlock );
 
 		// Open Block Settings.

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

@@ -432,9 +432,8 @@ describe( 'Embed block', () => {
 
 	describe( 'edit URL', () => {
 		it( 'keeps the previous URL if no URL is set', async () => {
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
@@ -456,9 +455,8 @@ describe( 'Embed block', () => {
 			const initialURL = 'https://twitter.com/notnownikki';
 			const expectedURL = 'https://www.youtube.com/watch?v=lXMskKTw3Bc';
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
@@ -501,9 +499,8 @@ describe( 'Embed block', () => {
 			const previousURL = 'https://twitter.com/notnownikki';
 			const invalidURL = 'http://';
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
@@ -541,9 +538,8 @@ describe( 'Embed block', () => {
 		it( 'sets empty state when setting an empty URL', async () => {
 			const previousURL = 'https://twitter.com/notnownikki';
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await editor.findByLabelText( 'Open Settings' ) );
@@ -570,9 +566,8 @@ describe( 'Embed block', () => {
 			fireEvent( blockSettingsModal, MODAL_DISMISS_EVENT );
 
 			// Get empty embed link.
-			const emptyLinkTextInput = await editor.findByPlaceholderText(
-				'Add link'
-			);
+			const emptyLinkTextInput =
+				await editor.findByPlaceholderText( 'Add link' );
 
 			expect( emptyLinkTextInput ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -680,9 +675,8 @@ describe( 'Embed block', () => {
 			'Full width',
 		].forEach( ( alignmentOption ) =>
 			it( `sets ${ alignmentOption } option`, async () => {
-				const editor = await initializeWithEmbedBlock(
-					RICH_TEXT_EMBED_HTML
-				);
+				const editor =
+					await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 				// Open alignment options.
 				fireEvent.press( await editor.findByLabelText( 'Align' ) );
@@ -714,9 +708,8 @@ describe( 'Embed block', () => {
 				return mockOtherResponses( req );
 			} );
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			await editor.findByText( 'Unable to embed media' );
 
@@ -749,9 +742,8 @@ describe( 'Embed block', () => {
 				return mockOtherResponses( req );
 			} );
 
-			const editor = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const editor =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Convert embed to link.
 			fireEvent.press( editor.getByText( 'More options' ) );
@@ -826,9 +818,8 @@ describe( 'Embed block', () => {
 
 	describe( 'preview coming soon', () => {
 		it( 'previews post for providers which embed preview is not available yet', async () => {
-			const { getByText, getByTestId } = await initializeWithEmbedBlock(
-				PHOTO_EMBED_HTML
-			);
+			const { getByText, getByTestId } =
+				await initializeWithEmbedBlock( PHOTO_EMBED_HTML );
 
 			// Try to preview the post.
 			fireEvent.press( getByText( 'PREVIEW POST' ) );
@@ -848,9 +839,8 @@ describe( 'Embed block', () => {
 		} );
 
 		it( 'dismisses no preview modal', async () => {
-			const { getByText, getByTestId } = await initializeWithEmbedBlock(
-				PHOTO_EMBED_HTML
-			);
+			const { getByText, getByTestId } =
+				await initializeWithEmbedBlock( PHOTO_EMBED_HTML );
 
 			// Try to preview the post.
 			fireEvent.press( getByText( 'PREVIEW POST' ) );
@@ -908,9 +898,8 @@ describe( 'Embed block', () => {
 			);
 
 			// Get the created embed block.
-			const [ embedBlock ] = await editor.findAllByLabelText(
-				/Embed Block\. Row 1/
-			);
+			const [ embedBlock ] =
+				await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 			expect( embedBlock ).toBeDefined();
 
@@ -996,9 +985,8 @@ describe( 'Embed block', () => {
 
 			fireEvent.press( await editor.findByText( 'Embed' ) );
 
-			const [ block ] = await editor.findAllByLabelText(
-				/Embed Block\. Row 1/
-			);
+			const [ block ] =
+				await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 			const blockName = within( block ).getByText( 'Embed' );
 
@@ -1037,9 +1025,8 @@ describe( 'Embed block', () => {
 
 				fireEvent.press( await editor.findByText( title ) );
 
-				const [ block ] = await editor.findAllByLabelText(
-					/Embed Block\. Row 1/
-				);
+				const [ block ] =
+					await editor.findAllByLabelText( /Embed Block\. Row 1/ );
 
 				const blockName = within( block ).getByText( title );
 
@@ -1096,9 +1083,8 @@ describe( 'Embed block', () => {
 
 	describe( 'block settings', () => {
 		it( 'toggles resize for smaller devices media settings', async () => {
-			const screen = await initializeWithEmbedBlock(
-				RICH_TEXT_EMBED_HTML
-			);
+			const screen =
+				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 			// Open Block Settings.
 			fireEvent.press( await screen.findByLabelText( 'Open Settings' ) );
@@ -1120,9 +1106,8 @@ describe( 'Embed block', () => {
 			// Wait for media settings panel.
 			let mediaSettingsPanel;
 			try {
-				mediaSettingsPanel = await screen.findByText(
-					'Media settings'
-				);
+				mediaSettingsPanel =
+					await screen.findByText( 'Media settings' );
 			} catch ( e ) {
 				// NOOP.
 			}

package/src/file/block.json

@@ -69,7 +69,8 @@
 				"background": true,
 				"link": true
 			}
-		}
+		},
+		"interactivity": true
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",

package/src/file/edit.native.js

@@ -552,7 +552,7 @@ export class FileEdit extends Component {
 					icon={ <BlockIcon icon={ icon } /> }
 					labels={ {
 						title: __( 'File' ),
-						instructions: __( 'CHOOSE A FILE' ),
+						instructions: __( 'Choose a file' ),
 					} }
 					onSelect={ this.onSelectFile }
 					onFocus={ this.props.onFocus }

package/src/file/index.php

@@ -5,24 +5,6 @@
  * @package WordPress
  */
 
-if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) ) {
-	/**
-	 * Replaces view script for the File block with version using Interactivity API.
-	 *
-	 * @param array $metadata Block metadata as read in via block.json.
-	 *
-	 * @return array Filtered block type metadata.
-	 */
-	function gutenberg_block_core_file_update_interactive_view_script( $metadata ) {
-		if ( 'core/file' === $metadata['name'] ) {
-			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
-			$metadata['supports']['interactivity'] = true;
-		}
-		return $metadata;
-	}
-	add_filter( 'block_type_metadata', 'gutenberg_block_core_file_update_interactive_view_script', 10, 1 );
-}
-
 /**
  * When the `core/file` block is rendering, check if we need to enqueue the `wp-block-file-view` script.
  *
@@ -72,19 +54,35 @@ function render_block_core_file( $attributes, $content, $block ) {
 	);
 
 	// If it uses the Interactivity API, add the directives.
-	if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) && $should_load_view_script ) {
+	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 );
+		$processor->set_attribute( 'data-wp-style--display', 'selectors.core.file.hasPdfPreview' );
 		return $processor->get_updated_html();
 	}
 
 	return $content;
 }
 
+/**
+ * Ensure that the view script has the `wp-interactivity` dependency.
+ *
+ * @since 6.4.0
+ */
+function block_core_file_ensure_interactivity_dependency() {
+	global $wp_scripts;
+	if (
+		isset( $wp_scripts->registered['wp-block-file-view'] ) &&
+		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-file-view']->deps, true )
+	) {
+		$wp_scripts->registered['wp-block-file-view']->deps[] = 'wp-interactivity';
+	}
+}
+
+add_action( 'wp_print_scripts', 'block_core_file_ensure_interactivity_dependency' );
+
 /**
  * Registers the `core/file` block on server.
  */

package/src/file/style.scss

@@ -29,6 +29,12 @@
 	margin-bottom: 1em;
 }
 
+@media (max-width: 768px) {
+	.wp-block-file__embed {
+		display: none;
+	}
+}
+
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
 :where(.wp-block-file__button) {
 	border-radius: 2em;
@@ -36,7 +42,6 @@
 	display: inline-block;
 
 	&:is(a) {
-
 		&:hover,
 		&:visited,
 		&:focus,