@wordpress/block-library 8.20.1 → 8.21.1-next.f8d8eceb.0

package/src/query/view.js

@@ -33,7 +33,14 @@ store( {
 		core: {
 			query: {
 				navigate: async ( { event, ref, context } ) => {
-					if ( isValidLink( ref ) && isValidEvent( event ) ) {
+					const isDisabled = ref.closest( '[data-wp-navigation-id]' )
+						?.dataset.wpNavigationDisabled;
+
+					if (
+						isValidLink( ref ) &&
+						isValidEvent( event ) &&
+						! isDisabled
+					) {
 						event.preventDefault();
 
 						const id = ref.closest( '[data-wp-navigation-id]' )
@@ -70,7 +77,9 @@ store( {
 					}
 				},
 				prefetch: async ( { ref } ) => {
-					if ( isValidLink( ref ) ) {
+					const isDisabled = ref.closest( '[data-wp-navigation-id]' )
+						?.dataset.wpNavigationDisabled;
+					if ( isValidLink( ref ) && ! isDisabled ) {
 						await prefetch( ref.href );
 					}
 				},

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

@@ -63,7 +63,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		wp_reset_postdata(); // Restore original Post Data.
 	}
 
-	if ( $enhanced_pagination ) {
+	if ( $enhanced_pagination && isset( $content ) ) {
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag(
 			array(

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

@@ -51,7 +51,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 		);
 	}
 
-	if ( $enhanced_pagination ) {
+	if ( $enhanced_pagination && isset( $content ) ) {
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag(
 			array(

package/src/search/edit.js

@@ -16,7 +16,7 @@ import {
 	getTypographyClassesAndStyles as useTypographyProps,
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
-	useSetting,
+	useSettings,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
@@ -125,8 +125,10 @@ export default function SearchEdit( {
 	}
 
 	const colorProps = useColorProps( attributes );
-	const fluidTypographySettings = useSetting( 'typography.fluid' );
-	const layout = useSetting( 'layout' );
+	const [ fluidTypographySettings, layout ] = useSettings(
+		'typography.fluid',
+		'layout'
+	);
 	const typographyProps = useTypographyProps( attributes, {
 		typography: {
 			fluid: fluidTypographySettings,

package/src/search/index.php

@@ -281,8 +281,6 @@ function classnames_for_block_core_search( $attributes ) {
  * @param array  $wrapper_styles Current collection of wrapper styles.
  * @param array  $button_styles  Current collection of button styles.
  * @param array  $input_styles   Current collection of input styles.
- *
- * @return void
  */
 function apply_block_core_search_border_style( $attributes, $property, $side, &$wrapper_styles, &$button_styles, &$input_styles ) {
 	$is_button_inside = isset( $attributes['buttonPosition'] ) && 'button-inside' === $attributes['buttonPosition'];
@@ -327,8 +325,6 @@ function apply_block_core_search_border_style( $attributes, $property, $side, &$
  * @param array  $wrapper_styles Current collection of wrapper styles.
  * @param array  $button_styles  Current collection of button styles.
  * @param array  $input_styles   Current collection of input styles.
- *
- * @return void
  */
 function apply_block_core_search_border_styles( $attributes, $property, &$wrapper_styles, &$button_styles, &$input_styles ) {
 	apply_block_core_search_border_style( $attributes, $property, null, $wrapper_styles, $button_styles, $input_styles );

package/src/social-link/edit.native.js

@@ -16,7 +16,7 @@ import {
 	ToolbarButton,
 	LinkSettingsNavigation,
 } from '@wordpress/components';
-import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { link, Icon } from '@wordpress/icons';
 import { withSelect } from '@wordpress/data';
@@ -30,10 +30,6 @@ const DEFAULT_ACTIVE_ICON_STYLES = {
 	backgroundColor: '#f0f0f0',
 	color: '#444',
 };
-const DEFAULT_INACTIVE_ICON_STYLES = {
-	backgroundColor: '#0000003f',
-	color: '#fff',
-};
 const ANIMATION_DELAY = 300;
 const ANIMATION_DURATION = 400;
 
@@ -66,12 +62,6 @@ const SocialLinkEdit = ( {
 		styles[ `wp-social-link-${ service }` ] ||
 		styles[ `wp-social-link` ] ||
 		DEFAULT_ACTIVE_ICON_STYLES;
-	const inactiveIcon =
-		usePreferredColorSchemeStyle(
-			styles.inactiveIcon,
-			styles.inactiveIconDark
-		) || DEFAULT_INACTIVE_ICON_STYLES;
-
 	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
 
 	const IconComponent = getIconBySite( service )();
@@ -94,23 +84,13 @@ const SocialLinkEdit = ( {
 	}, [ url ] );
 
 	const interpolationColors = {
-		backgroundColor: animatedValue.interpolate( {
-			inputRange: [ 0, 1 ],
-			outputRange: [
-				inactiveIcon.backgroundColor,
-				activeIcon.backgroundColor,
-			],
-		} ),
-		color: animatedValue.interpolate( {
+		opacity: animatedValue.interpolate( {
 			inputRange: [ 0, 1 ],
-			outputRange: [ inactiveIcon.color, activeIcon.color ],
+			outputRange: [ 0.3, 1 ],
 		} ),
-		stroke: '',
 	};
 
-	const { backgroundColor, color, stroke } = hasUrl
-		? activeIcon
-		: interpolationColors;
+	const { opacity } = hasUrl ? activeIcon : interpolationColors;
 
 	function animateColors() {
 		Animated.sequence( [
@@ -200,12 +180,18 @@ const SocialLinkEdit = ( {
 				accessibilityHint={ accessibilityHint }
 			>
 				<Animated.View
-					style={ [ styles.iconContainer, { backgroundColor } ] }
+					style={ [
+						styles.iconContainer,
+						{
+							backgroundColor: activeIcon.backgroundColor,
+							opacity,
+						},
+					] }
 				>
 					<Icon
 						animated
 						icon={ IconComponent }
-						style={ { stroke, color } }
+						style={ { color: activeIcon.color } }
 					/>
 				</Animated.View>
 			</TouchableWithoutFeedback>

package/src/social-link/editor.native.scss

@@ -13,15 +13,6 @@
 	justify-content: center;
 }
 
-.inactiveIcon {
-	background-color: $light-quaternary;
-	color: $white;
-}
-
-.inactiveIconDark {
-	background-color: $dark-quaternary;
-}
-
 .container {
 	margin: $block-selected-margin;
 }

package/src/social-link/index.php

@@ -62,10 +62,10 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$processor = new WP_HTML_Tag_Processor( $link );
 	$processor->next_tag( 'a' );
 	if ( $open_in_new_tab ) {
-		$processor->set_attribute( 'rel', esc_attr( $rel ) . ' noopener nofollow' );
+		$processor->set_attribute( 'rel', trim( $rel . ' noopener nofollow' ) );
 		$processor->set_attribute( 'target', '_blank' );
 	} elseif ( '' !== $rel ) {
-		$processor->set_attribute( 'rel', esc_attr( $rel ) );
+		$processor->set_attribute( 'rel', trim( $rel ) );
 	}
 	return $processor->get_updated_html();
 }

package/src/spacer/controls.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	InspectorControls,
-	useSetting,
+	useSettings,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
 	isValueSpacingPreset,
 } from '@wordpress/block-editor';
@@ -25,22 +25,19 @@ import { MIN_SPACER_SIZE } from './constants';
 
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+	const [ spacingSizes, spacingUnits ] = useSettings(
+		'spacing.spacingSizes',
+		'spacing.units'
+	);
 	// In most contexts the spacer size cannot meaningfully be set to a
 	// percentage, since this is relative to the parent container. This
 	// unit is disabled from the UI.
-	const availableUnitSettings = (
-		useSetting( 'spacing.units' ) || undefined
-	)?.filter( ( availableUnit ) => availableUnit !== '%' );
+	const availableUnits = spacingUnits
+		? spacingUnits.filter( ( unit ) => unit !== '%' )
+		: [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
 	const units = useCustomUnits( {
-		availableUnits: availableUnitSettings || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits,
 		defaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 },
 	} );
 

package/src/spacer/controls.native.js

@@ -8,7 +8,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { useSetting } from '@wordpress/block-editor';
+import { useSettings } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -59,14 +59,9 @@ function Controls( {
 		[ height, width ]
 	);
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: DEFAULT_VALUES,
 	} );
 

package/src/spacer/edit.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import {
 	useBlockProps,
-	useSetting,
+	useSettings,
 	getCustomValueFromPreset,
 	getSpacingPresetCssVar,
 	store as blockEditorStore,
@@ -107,7 +107,7 @@ const SpacerEdit = ( {
 	const { layout = {} } = blockStyle;
 	const { selfStretch, flexSize } = layout;
 
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+	const [ spacingSizes ] = useSettings( 'spacing.spacingSizes' );
 
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ temporaryHeight, setTemporaryHeight ] = useState( null );

package/src/spacer/edit.native.js

@@ -11,7 +11,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import {
 	InspectorControls,
 	isValueSpacingPreset,
-	useSetting,
+	useSettings,
 	getCustomValueFromPreset,
 	getPxFromCssUnit,
 } from '@wordpress/block-editor';
@@ -39,10 +39,11 @@ const Spacer = ( {
 		fontSize: DEFAULT_FONT_SIZE,
 	};
 	const { height, width } = attributes;
-	const spacingSizes = [
-		{ name: 0, slug: '0', size: 0 },
-		...( useSetting( 'spacing.spacingSizes' ) || [] ),
-	];
+	const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];
+	const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
+	if ( settingsSizes ) {
+		spacingSizes.push( ...settingsSizes );
+	}
 	const { orientation } = context;
 	const defaultStyle = getStylesFromColorScheme(
 		styles.staticSpacer,

package/src/style.scss

@@ -14,6 +14,7 @@
 @import "./details/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";
+@import "./form-input/style.scss";
 @import "./gallery/style.scss";
 @import "./group/style.scss";
 @import "./heading/style.scss";

package/src/tag-cloud/edit.js

@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	InspectorControls,
 	useBlockProps,
-	useSetting,
+	useSettings,
 } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 import { store as coreStore } from '@wordpress/core-data';
@@ -49,13 +49,9 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		largestFontSize,
 	} = attributes;
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem' ],
 	} );
 
 	const getTaxonomyOptions = () => {

package/src/template-part/block.json

@@ -23,7 +23,8 @@
 	"supports": {
 		"align": true,
 		"html": false,
-		"reusable": false
+		"reusable": false,
+		"renaming": false
 	},
 	"editorStyle": "wp-block-template-part-editor"
 }

package/src/template-part/edit/inner-blocks.js

@@ -5,7 +5,7 @@ import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
-	useSetting,
+	useSettings,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -21,8 +21,8 @@ export default function TemplatePartInnerBlocks( {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings()?.supportsLayout;
 	}, [] );
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const [ defaultLayout ] = useSettings( 'layout' );
+	const usedLayout = layout?.inherit ? defaultLayout || {} : layout;
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',

package/src/template-part/index.php

@@ -18,13 +18,10 @@ function render_block_core_template_part( $attributes ) {
 	$template_part_id = null;
 	$content          = null;
 	$area             = WP_TEMPLATE_PART_AREA_UNCATEGORIZED;
+	$theme            = isset( $attributes['theme'] ) ? $attributes['theme'] : get_stylesheet();
 
-	if (
-		isset( $attributes['slug'] ) &&
-		isset( $attributes['theme'] ) &&
-		get_stylesheet() === $attributes['theme']
-	) {
-		$template_part_id    = $attributes['theme'] . '//' . $attributes['slug'];
+	if ( isset( $attributes['slug'] ) && get_stylesheet() === $theme ) {
+		$template_part_id    = $theme . '//' . $attributes['slug'];
 		$template_part_query = new WP_Query(
 			array(
 				'post_type'           => 'wp_template_part',
@@ -34,7 +31,7 @@ function render_block_core_template_part( $attributes ) {
 					array(
 						'taxonomy' => 'wp_theme',
 						'field'    => 'name',
-						'terms'    => $attributes['theme'],
+						'terms'    => $theme,
 					),
 				),
 				'posts_per_page'      => 1,

package/src/term-description/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": "fse",
 	"name": "core/term-description",
 	"title": "Term Description",
 	"category": "theme",

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

@@ -78,4 +78,41 @@ describe( 'Verse block', () => {
 		<!-- /wp:verse -->"
 	` );
 	} );
+
+	it( 'should split on triple Enter', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Verse' );
+
+		// Act
+		const verseTextInput =
+			await screen.findByPlaceholderText( 'Write verse…' );
+		typeInRichText( verseTextInput, 'Hello' );
+		fireEvent( verseTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		fireEvent( verseTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		fireEvent( verseTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:verse -->
+		<pre class="wp-block-verse">Hello</pre>
+		<!-- /wp:verse -->
+
+		<!-- wp:paragraph -->
+		<p></p>
+		<!-- /wp:paragraph -->"
+	` );
+	} );
 } );