@wordpress/block-library 8.13.0 → 8.15.0

package/src/buttons/edit.js

@@ -36,7 +36,7 @@ const DEFAULT_BLOCK = {
 };
 
 function ButtonsEdit( { attributes, className } ) {
-	const { fontSize, style } = attributes;
+	const { fontSize, layout, style } = attributes;
 	const blockProps = useBlockProps( {
 		className: classnames( className, {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
@@ -51,16 +51,16 @@ function ButtonsEdit( { attributes, className } ) {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
-		__experimentalDefaultBlock: DEFAULT_BLOCK,
-		__experimentalDirectInsert: true,
+		defaultBlock: DEFAULT_BLOCK,
+		directInsert: true,
 		template: [
 			[
 				buttonBlockName,
 				{ className: preferredStyle && `is-style-${ preferredStyle }` },
 			],
 		],
-
 		templateInsertUpdatesSelection: true,
+		orientation: layout?.orientation ?? 'horizontal',
 	} );
 
 	return <div { ...innerBlocksProps } />;

package/src/categories/block.json

@@ -33,7 +33,11 @@
 		"html": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/code/block.json

@@ -31,7 +31,11 @@
 		},
 		"spacing": {
 			"margin": [ "top", "bottom" ],
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"__experimentalBorder": {
 			"radius": true,

package/src/column/block.json

@@ -28,6 +28,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/column/edit.native.js

@@ -42,7 +42,6 @@ function ColumnEdit( {
 	hasChildren,
 	isSelected,
 	getStylesFromColorScheme,
-	isParentSelected,
 	contentStyle,
 	columns,
 	selectedColumnIndex,
@@ -140,12 +139,10 @@ function ColumnEdit( {
 		return (
 			<View
 				style={ [
-					! isParentSelected &&
-						getStylesFromColorScheme(
-							styles.columnPlaceholder,
-							styles.columnPlaceholderDark
-						),
-					styles.columnPlaceholderNotSelected,
+					getStylesFromColorScheme(
+						styles.columnPlaceholder,
+						styles.columnPlaceholderDark
+					),
 					contentStyle[ clientId ],
 				] }
 			/>
@@ -258,8 +255,6 @@ export default compose( [
 
 		const parentId = getBlockRootClientId( clientId );
 		const hasChildren = !! getBlockCount( clientId );
-		const isParentSelected =
-			selectedBlockClientId && selectedBlockClientId === parentId;
 
 		const blockOrder = getBlockOrder( parentId );
 
@@ -271,7 +266,6 @@ export default compose( [
 
 		return {
 			hasChildren,
-			isParentSelected,
 			isSelected,
 			selectedColumnIndex,
 			columns,

package/src/column/editor.native.scss

@@ -1,7 +1,3 @@
-.columnPlaceholderNotSelected {
-	padding-top: $block-selected-to-content;
-}
-
 .columnPlaceholder {
 	flex: 1;
 	padding: $block-selected-to-content;

package/src/columns/edit.js

@@ -123,6 +123,7 @@ function ColumnsEditContainer( {
 						<>
 							<RangeControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Columns' ) }
 								value={ count }
 								onChange={ ( value ) =>

package/src/comment-author-avatar/edit.js

@@ -51,6 +51,7 @@ export default function Edit( {
 			<PanelBody title={ __( 'Avatar Settings' ) }>
 				<RangeControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'Image size' ) }
 					onChange={ ( newWidth ) =>
 						setAttributes( {

package/src/comment-template/index.php

@@ -35,8 +35,11 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 		 * We set commentId context through the `render_block_context` filter so
 		 * that dynamically inserted blocks (at `render_block` filter stage)
 		 * will also receive that context.
+		 *
+		 * Use an early priority to so that other 'render_block_context' filters
+		 * have access to the values.
 		 */
-		add_filter( 'render_block_context', $filter_block_context );
+		add_filter( 'render_block_context', $filter_block_context, 1 );
 
 		/*
 		 * We construct a new WP_Block instance from the parsed block so that
@@ -44,7 +47,7 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 		 */
 		$block_content = ( new WP_Block( $block->parsed_block ) )->render( array( 'dynamic' => false ) );
 
-		remove_filter( 'render_block_context', $filter_block_context );
+		remove_filter( 'render_block_context', $filter_block_context, 1 );
 
 		$children = $comment->get_children();
 

package/src/comments/block.json

@@ -21,6 +21,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/cover/block.json

@@ -108,6 +108,7 @@
 		},
 		"color": {
 			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
+			"heading": true,
 			"text": true,
 			"background": false,
 			"__experimentalSkipSerialization": [ "gradients" ]

package/src/cover/deprecated.js

@@ -329,6 +329,7 @@ const v11 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // Deprecation for blocks that renders fixed background as backgroud from the main block container.
@@ -465,6 +466,7 @@ const v10 = {
 			</div>
 		);
 	},
+	migrate: migrateTag,
 };
 
 // Deprecation for blocks with `minHeightUnit` set but no `minHeight`.

package/src/cover/edit/inspector-controls.js

@@ -303,6 +303,7 @@ export default function CoverInspectorControls( {
 							max={ 100 }
 							step={ 10 }
 							required
+							__next40pxDefaultSize
 						/>
 					</ToolsPanelItem>
 				</InspectorControls>

package/src/details/block.json

@@ -34,7 +34,11 @@
 		"html": false,
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/embed/embed-placeholder.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,8 @@ import { useRef } from '@wordpress/element';
 import styles from './styles.scss';
 import { noticeOutline } from '../../../components/src/mobile/gridicons';
 
+const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
+
 const EmbedPlaceholder = ( {
 	icon,
 	isSelected,
@@ -28,10 +30,17 @@ const EmbedPlaceholder = ( {
 	tryAgain,
 	openEmbedLinkSettings,
 } ) => {
-	const containerStyle = usePreferredColorSchemeStyle(
-		styles.embed__container,
-		styles[ 'embed__container--dark' ]
+	const containerSelectedStyle = usePreferredColorSchemeStyle(
+		styles[ 'embed__container-selected' ],
+		styles[ 'embed__container-selected--dark' ]
 	);
+	const containerStyle = [
+		usePreferredColorSchemeStyle(
+			styles.embed__container,
+			styles[ 'embed__container--dark' ]
+		),
+		isSelected && containerSelectedStyle,
+	];
 	const labelStyle = usePreferredColorSchemeStyle(
 		styles.embed__label,
 		styles[ 'embed__label--dark' ]
@@ -44,6 +53,15 @@ const EmbedPlaceholder = ( {
 	);
 	const embedIconErrorStyle = styles[ 'embed__icon--error' ];
 
+	const buttonStyles = usePreferredColorSchemeStyle(
+		styles.embed__button,
+		styles[ 'embed__button--dark' ]
+	);
+	const iconStyles = usePreferredColorSchemeStyle(
+		styles.embed__icon,
+		styles[ 'embed__icon--dark' ]
+	);
+
 	const cannotEmbedMenuPickerRef = useRef();
 
 	const errorPickerOptions = {
@@ -89,55 +107,70 @@ const EmbedPlaceholder = ( {
 
 	return (
 		<>
-			<TouchableWithoutFeedback
-				accessibilityRole={ 'button' }
-				accessibilityHint={
-					cannotEmbed
-						? __( 'Double tap to view embed options.' )
-						: __( 'Double tap to add a link.' )
-				}
-				onPress={ resolveOnPressEvent }
-				disabled={ ! isSelected }
-			>
-				<View style={ containerStyle }>
-					{ cannotEmbed ? (
-						<>
-							<Icon
-								icon={ noticeOutline }
-								fill={ embedIconErrorStyle.fill }
-								style={ embedIconErrorStyle }
-							/>
-							<Text
-								style={ [
-									descriptionStyle,
-									descriptionErrorStyle,
-								] }
-							>
-								{ __( 'Unable to embed media' ) }
-							</Text>
+			<View style={ containerStyle }>
+				{ cannotEmbed ? (
+					<>
+						<Icon
+							icon={ noticeOutline }
+							fill={ embedIconErrorStyle.fill }
+							style={ embedIconErrorStyle }
+						/>
+						<Text
+							style={ [
+								descriptionStyle,
+								descriptionErrorStyle,
+							] }
+						>
+							{ __( 'Unable to embed media' ) }
+						</Text>
+						<TouchableOpacity
+							activeOpacity={ 0.5 }
+							accessibilityRole={ 'button' }
+							accessibilityHint={ __(
+								'Double tap to view embed options.'
+							) }
+							style={ buttonStyles }
+							hitSlop={ hitSlop }
+							onPress={ resolveOnPressEvent }
+							disabled={ ! isSelected }
+						>
 							<Text style={ actionStyle }>
 								{ __( 'More options' ) }
 							</Text>
-							<Picker
-								title={ __( 'Embed options' ) }
-								ref={ cannotEmbedMenuPickerRef }
-								options={ options }
-								onChange={ onPickerSelect }
-								hideCancelButton
-								leftAlign
-							/>
-						</>
-					) : (
-						<>
-							<BlockIcon icon={ icon } />
+						</TouchableOpacity>
+						<Picker
+							title={ __( 'Embed options' ) }
+							ref={ cannotEmbedMenuPickerRef }
+							options={ options }
+							onChange={ onPickerSelect }
+							hideCancelButton
+							leftAlign
+						/>
+					</>
+				) : (
+					<>
+						<View style={ styles[ 'embed__placeholder-header' ] }>
+							<BlockIcon icon={ icon } fill={ iconStyles.fill } />
 							<Text style={ labelStyle }>{ label }</Text>
+						</View>
+						<TouchableOpacity
+							activeOpacity={ 0.5 }
+							accessibilityRole={ 'button' }
+							accessibilityHint={ __(
+								'Double tap to add a link.'
+							) }
+							style={ buttonStyles }
+							hitSlop={ hitSlop }
+							onPress={ resolveOnPressEvent }
+							disabled={ ! isSelected }
+						>
 							<Text style={ actionStyle }>
-								{ __( 'ADD LINK' ) }
+								{ __( 'Add link' ) }
 							</Text>
-						</>
-					) }
-				</View>
-			</TouchableWithoutFeedback>
+						</TouchableOpacity>
+					</>
+				) }
+			</View>
 		</>
 	);
 };

package/src/embed/styles.native.scss

@@ -4,19 +4,28 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	background-color: $gray-lighten-30;
+	background-color: #e0e0e0; // $light-dim
 	padding-left: 12;
 	padding-right: 12;
 	padding-top: 12;
 	padding-bottom: 12;
-	border-top-left-radius: 4;
-	border-top-right-radius: 4;
-	border-bottom-left-radius: 4;
-	border-bottom-right-radius: 4;
+	border-top-left-radius: 2;
+	border-top-right-radius: 2;
+	border-bottom-left-radius: 2;
+	border-bottom-right-radius: 2;
 }
 
 .embed__container--dark {
-	background-color: $background-dark-secondary;
+	background-color: #1f1f1f; // $dark-dim
+}
+
+.embed__container-selected {
+	border-width: 2px;
+	border-color: $blue-40;
+}
+
+.embed__container-selected--dark {
+	border-color: $blue-50;
 }
 
 .embed__icon--error {
@@ -24,23 +33,38 @@
 	fill: $alert-red;
 }
 
+.embed__placeholder-header {
+	flex-direction: row;
+	align-items: center;
+	margin-top: 4;
+	margin-bottom: 16;
+}
+
+.embed__icon {
+	fill: $light-secondary;
+}
+
+.embed__icon--dark {
+	fill: $dark-tertiary;
+}
+
 .embed__label {
 	text-align: center;
-	margin-top: 4;
-	margin-bottom: 4;
-	font-size: 14;
-	font-weight: 500;
-	color: $gray-90;
+	margin-left: $grid-unit;
+	font-size: 16;
+	font-weight: 400;
+	color: $light-secondary;
 }
 
 .embed__label--dark {
-	color: $gray-10;
+	color: $dark-tertiary;
 }
 
 .embed__description {
 	font-size: $default-font-size;
 	text-align: center;
-	margin-bottom: 4;
+	margin-top: 4;
+	margin-bottom: 16;
 	color: $light-secondary;
 }
 
@@ -53,12 +77,14 @@
 }
 
 .embed__action {
-	width: 100%;
 	text-align: center;
-	color: $blue-wordpress;
-	font-size: 14;
-	font-weight: 500;
-	margin-top: 4;
+	color: $white;
+	font-size: 16;
+	font-weight: 400;
+}
+
+.embed__action--dark {
+	color: $black;
 }
 
 .embed-preview__loading {
@@ -158,3 +184,13 @@
 .embed-no-preview__sheet-button--dark {
 	color: $blue-30;
 }
+
+.embed__button {
+	background-color: $light-primary;
+	border-radius: 3px;
+	padding: $grid-unit $grid-unit-20;
+}
+
+.embed__button--dark {
+	background-color: $dark-primary;
+}

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

@@ -330,7 +330,7 @@ describe( 'Embed block', () => {
 			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( await editor.findByText( 'ADD LINK' ) );
+			fireEvent.press( await editor.findByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
@@ -351,7 +351,7 @@ describe( 'Embed block', () => {
 			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
@@ -392,7 +392,7 @@ describe( 'Embed block', () => {
 			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
@@ -592,7 +592,7 @@ describe( 'Embed block', () => {
 			fireEvent.press( editor.block );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			await waitForModalVisible( embedEditURLModal );
@@ -602,7 +602,7 @@ describe( 'Embed block', () => {
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			await waitForModalVisible( embedEditURLModal );

package/src/embed/util.js

@@ -1,18 +1,13 @@
-/**
- * Internal dependencies
- */
-import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
-
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
 import classnames from 'classnames/dedupe';
 import memoize from 'memize';
 
 /**
  * WordPress dependencies
  */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { renderToString } from '@wordpress/element';
 import {
 	createBlock,
@@ -24,8 +19,11 @@ import {
  * Internal dependencies
  */
 import metadata from './block.json';
+import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
+import { unlock } from '../lock-unlock';
 
 const { name: DEFAULT_EMBED_BLOCK } = metadata;
+const { kebabCase } = unlock( blockEditorPrivateApis );
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 

package/src/file/index.php

@@ -5,7 +5,7 @@
  * @package WordPress
  */
 
-if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) ) {
 	/**
 	 * Replaces view script for the File block with version using Interactivity API.
 	 *
@@ -15,7 +15,8 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 	 */
 	function gutenberg_block_core_file_update_interactive_view_script( $metadata ) {
 		if ( 'core/file' === $metadata['name'] ) {
-			$metadata['viewScript'] = array( 'file:./interactivity.min.js' );
+			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
+			$metadata['supports']['interactivity'] = true;
 		}
 		return $metadata;
 	}
@@ -71,7 +72,7 @@ function render_block_core_file( $attributes, $content, $block ) {
 	);
 
 	// If it uses the Interactivity API, add the directives.
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $should_load_view_script ) {
+	if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) && $should_load_view_script ) {
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '' );

package/src/file/inspector.js

@@ -58,6 +58,7 @@ export default function FileBlockInspector( {
 						{ displayPreview && (
 							<RangeControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Height in pixels' ) }
 								min={ MIN_PREVIEW_HEIGHT }
 								max={ Math.max(