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

package/src/button/edit.js

@@ -78,8 +78,19 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 	} = props;
-	const { textAlign, linkTarget, placeholder, rel, style, text, url, width } =
-		attributes;
+	const {
+		tagName,
+		textAlign,
+		linkTarget,
+		placeholder,
+		rel,
+		style,
+		text,
+		url,
+		width,
+	} = attributes;
+
+	const TagName = tagName || 'a';
 
 	function onToggleOpenInNewTab( value ) {
 		const newLinkTarget = value ? '_blank' : undefined;
@@ -128,6 +139,7 @@ function ButtonEdit( props ) {
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const isURLSet = !! url;
 	const opensInNewTab = linkTarget === '_blank';
+	const isLinkTag = 'a' === TagName;
 
 	function startEditing( event ) {
 		event.preventDefault();
@@ -209,7 +221,7 @@ function ButtonEdit( props ) {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
-				{ ! isURLSet && (
+				{ ! isURLSet && isLinkTag && (
 					<ToolbarButton
 						name="link"
 						icon={ link }
@@ -218,7 +230,7 @@ function ButtonEdit( props ) {
 						onClick={ startEditing }
 					/>
 				) }
-				{ isURLSet && (
+				{ isURLSet && isLinkTag && (
 					<ToolbarButton
 						name="link"
 						icon={ linkOff }
@@ -229,7 +241,7 @@ function ButtonEdit( props ) {
 					/>
 				) }
 			</BlockControls>
-			{ isSelected && ( isEditingURL || isURLSet ) && (
+			{ isLinkTag && isSelected && ( isEditingURL || isURLSet ) && (
 				<Popover
 					placement="bottom"
 					onClose={ () => {
@@ -268,12 +280,16 @@ function ButtonEdit( props ) {
 				/>
 			</InspectorControls>
 			<InspectorControls group="advanced">
-				<TextControl
-					__nextHasNoMarginBottom
-					label={ __( 'Link rel' ) }
-					value={ rel || '' }
-					onChange={ ( newRel ) => setAttributes( { rel: newRel } ) }
-				/>
+				{ isLinkTag && (
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link rel' ) }
+						value={ rel || '' }
+						onChange={ ( newRel ) =>
+							setAttributes( { rel: newRel } )
+						}
+					/>
+				) }
 			</InspectorControls>
 		</>
 	);

package/src/button/save.js

@@ -17,6 +17,8 @@ import {
 
 export default function save( { attributes, className } ) {
 	const {
+		tagName,
+		type,
 		textAlign,
 		fontSize,
 		linkTarget,
@@ -32,6 +34,9 @@ export default function save( { attributes, className } ) {
 		return null;
 	}
 
+	const TagName = tagName || 'a';
+	const isButtonTag = 'button' === TagName;
+	const buttonType = type || 'button';
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
@@ -65,14 +70,15 @@ export default function save( { attributes, className } ) {
 	return (
 		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
 			<RichText.Content
-				tagName="a"
+				tagName={ TagName }
+				type={ isButtonTag ? buttonType : null }
 				className={ buttonClasses }
-				href={ url }
+				href={ isButtonTag ? null : url }
 				title={ title }
 				style={ buttonStyle }
 				value={ text }
-				target={ linkTarget }
-				rel={ rel }
+				target={ isButtonTag ? null : linkTarget }
+				rel={ isButtonTag ? null : rel }
 			/>
 		</div>
 	);

package/src/buttons/edit.js

@@ -12,6 +12,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -42,17 +43,26 @@ function ButtonsEdit( { attributes, className } ) {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );
-	const preferredStyle = useSelect( ( select ) => {
+	const { preferredStyle, hasButtonVariations } = useSelect( ( select ) => {
 		const preferredStyleVariations =
 			select( blockEditorStore ).getSettings()
 				.__experimentalPreferredStyleVariations;
-		return preferredStyleVariations?.value?.[ buttonBlockName ];
+		const buttonVariations = select( blocksStore ).getBlockVariations(
+			buttonBlockName,
+			'inserter'
+		);
+		return {
+			preferredStyle:
+				preferredStyleVariations?.value?.[ buttonBlockName ],
+			hasButtonVariations: buttonVariations.length > 0,
+		};
 	}, [] );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		defaultBlock: DEFAULT_BLOCK,
-		directInsert: true,
+		// This check should be handled by the `Inserter` internally to be consistent across all blocks that use it.
+		directInsert: ! hasButtonVariations,
 		template: [
 			[
 				buttonBlockName,

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

@@ -55,9 +55,10 @@ describe( 'Buttons block', () => {
 
 			// onLayout event has to be explicitly dispatched in BlockList component,
 			// otherwise the inner blocks are not rendered.
-			const innerBlockListWrapper = await within(
-				buttonsBlock
-			).findByTestId( 'block-list-wrapper' );
+			const innerBlockListWrapper =
+				await within( buttonsBlock ).findByTestId(
+					'block-list-wrapper'
+				);
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -66,19 +67,18 @@ describe( 'Buttons block', () => {
 				},
 			} );
 
-			const [ buttonInnerBlock ] = await within(
-				buttonsBlock
-			).findAllByLabelText( /Button Block\. Row 1/ );
+			const [ buttonInnerBlock ] =
+				await within( buttonsBlock ).findAllByLabelText(
+					/Button Block\. Row 1/
+				);
 			fireEvent.press( buttonInnerBlock );
 
-			const settingsButton = await editor.findByLabelText(
-				'Open Settings'
-			);
+			const settingsButton =
+				await editor.findByLabelText( 'Open Settings' );
 			fireEvent.press( settingsButton );
 
-			const radiusStepper = await editor.findByLabelText(
-				/Border Radius/
-			);
+			const radiusStepper =
+				await editor.findByLabelText( /Border Radius/ );
 
 			const incrementButton = await within( radiusStepper ).findByTestId(
 				'Increment',
@@ -98,9 +98,10 @@ describe( 'Buttons block', () => {
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await within(
-				buttonsBlock
-			).findByTestId( 'block-list-wrapper' );
+			const innerBlockListWrapper =
+				await within( buttonsBlock ).findByTestId(
+					'block-list-wrapper'
+				);
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -119,9 +120,10 @@ describe( 'Buttons block', () => {
 			fireEvent.press( appenderButton );
 
 			// Check for new button
-			const [ secondButtonBlock ] = await within(
-				buttonsBlock
-			).findAllByLabelText( /Button Block\. Row 2/ );
+			const [ secondButtonBlock ] =
+				await within( buttonsBlock ).findAllByLabelText(
+					/Button Block\. Row 2/
+				);
 			expect( secondButtonBlock ).toBeVisible();
 
 			// Add a Paragraph block using the empty placeholder at the bottom
@@ -148,9 +150,10 @@ describe( 'Buttons block', () => {
 			fireEvent.press( buttonsBlock );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await within(
-				buttonsBlock
-			).findByTestId( 'block-list-wrapper' );
+			const innerBlockListWrapper =
+				await within( buttonsBlock ).findByTestId(
+					'block-list-wrapper'
+				);
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -207,9 +210,10 @@ describe( 'Buttons block', () => {
 				const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 				// Trigger inner blocks layout
-				const innerBlockListWrapper = await within(
-					buttonsBlock
-				).findByTestId( 'block-list-wrapper' );
+				const innerBlockListWrapper =
+					await within( buttonsBlock ).findByTestId(
+						'block-list-wrapper'
+					);
 				fireEvent( innerBlockListWrapper, 'layout', {
 					nativeEvent: {
 						layout: {

package/src/calendar/index.php

@@ -44,12 +44,12 @@ function render_block_core_calendar( $attributes ) {
 
 	// Text color.
 	$preset_text_color          = array_key_exists( 'textColor', $attributes ) ? "var:preset|color|{$attributes['textColor']}" : null;
-	$custom_text_color          = _wp_array_get( $attributes, array( 'style', 'color', 'text' ), null );
+	$custom_text_color          = $attributes['style']['color']['text'] ?? null;
 	$color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
 
 	// Background Color.
 	$preset_background_color          = array_key_exists( 'backgroundColor', $attributes ) ? "var:preset|color|{$attributes['backgroundColor']}" : null;
-	$custom_background_color          = _wp_array_get( $attributes, array( 'style', 'color', 'background' ), null );
+	$custom_background_color          = $attributes['style']['color']['background'] ?? null;
 	$color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
 
 	// Generate color styles and classes.

package/src/code/block.json

@@ -10,7 +10,8 @@
 		"content": {
 			"type": "string",
 			"source": "html",
-			"selector": "code"
+			"selector": "code",
+			"__unstablePreserveWhiteSpace": true
 		}
 	},
 	"supports": {

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',
 		} )
 	);
@@ -64,15 +64,15 @@ describe( 'Cover block', () => {
 			await setup();
 
 			expect(
-				screen.getByRole( 'group', {
-					name: 'To edit this block, you need permission to upload media.',
-				} )
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByText(
+					'To edit this block, you need permission to upload media.'
+				)
 			).toBeInTheDocument();
 		} );
 
 		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.