@wordpress/block-library 6.0.23 → 7.0.0

package/src/spacer/edit.js

@@ -6,87 +6,123 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import {
-	InspectorControls,
-	useBlockProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
-import { compose, withInstanceId } from '@wordpress/compose';
-import { withDispatch } from '@wordpress/data';
+import { useBlockProps } from '@wordpress/block-editor';
+import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { View } from '@wordpress/primitives';
 
-const MIN_SPACER_HEIGHT = 1;
-const MAX_SPACER_HEIGHT = 500;
+/**
+ * Internal dependencies
+ */
+import SpacerControls from './controls';
+
+export const MIN_SPACER_SIZE = 1;
+export const MAX_SPACER_SIZE = 500;
+
+const ResizableSpacer = ( {
+	orientation,
+	onResizeStart,
+	onResize,
+	onResizeStop,
+	isSelected,
+	isResizing,
+	setIsResizing,
+	...props
+} ) => {
+	const getCurrentSize = ( elt ) => {
+		return orientation === 'horizontal'
+			? elt.clientWidth
+			: elt.clientHeight;
+	};
+
+	const getNextVal = ( elt ) => {
+		return `${ getCurrentSize( elt ) }px`;
+	};
 
-const MIN_SPACER_WIDTH = 1;
-const MAX_SPACER_WIDTH = 500;
+	return (
+		<ResizableBox
+			className={ classnames( 'block-library-spacer__resize-container', {
+				'resize-horizontal': orientation === 'horizontal',
+				'is-resizing': isResizing,
+				'is-selected': isSelected,
+			} ) }
+			onResizeStart={ ( _event, _direction, elt ) => {
+				const nextVal = getNextVal( elt );
+				onResizeStart( nextVal );
+				onResize( nextVal );
+			} }
+			onResize={ ( _event, _direction, elt ) => {
+				onResize( getNextVal( elt ) );
+				if ( ! isResizing ) {
+					setIsResizing( true );
+				}
+			} }
+			onResizeStop={ ( _event, _direction, elt ) => {
+				const nextVal = Math.min(
+					MAX_SPACER_SIZE,
+					getCurrentSize( elt )
+				);
+				onResizeStop( `${ nextVal }px` );
+				setIsResizing( false );
+			} }
+			__experimentalShowTooltip={ true }
+			__experimentalTooltipProps={ {
+				axis: orientation === 'horizontal' ? 'x' : 'y',
+				position: 'corner',
+				isVisible: isResizing,
+			} }
+			showHandle={ isSelected }
+			{ ...props }
+		/>
+	);
+};
 
 const SpacerEdit = ( {
 	attributes,
 	isSelected,
 	setAttributes,
-	onResizeStart,
-	onResizeStop,
+	toggleSelection,
 	context,
 } ) => {
 	const { orientation } = context;
-	const [ isResizing, setIsResizing ] = useState( false );
 	const { height, width } = attributes;
-	const updateHeight = ( value ) => {
-		setAttributes( {
-			height: value,
-		} );
-	};
-	const updateWidth = ( value ) => {
-		setAttributes( {
-			width: value,
-		} );
-	};
 
-	const handleOnResizeStart = ( ...args ) => {
-		onResizeStart( ...args );
-		setIsResizing( true );
-	};
+	const [ isResizing, setIsResizing ] = useState( false );
+	const [ temporaryHeight, setTemporaryHeight ] = useState( null );
+	const [ temporaryWidth, setTemporaryWidth ] = useState( null );
+
+	const onResizeStart = () => toggleSelection( false );
+	const onResizeStop = () => toggleSelection( true );
 
-	const handleOnVerticalResizeStop = ( event, direction, elt, delta ) => {
+	const handleOnVerticalResizeStop = ( newHeight ) => {
 		onResizeStop();
-		const spacerHeight = Math.min(
-			parseInt( height + delta.height, 10 ),
-			MAX_SPACER_HEIGHT
-		);
-		updateHeight( spacerHeight );
-		setIsResizing( false );
+
+		setAttributes( { height: newHeight } );
+		setTemporaryHeight( null );
 	};
 
-	const handleOnHorizontalResizeStop = ( event, direction, elt, delta ) => {
+	const handleOnHorizontalResizeStop = ( newWidth ) => {
 		onResizeStop();
-		const spacerWidth = Math.min(
-			parseInt( width + delta.width, 10 ),
-			MAX_SPACER_WIDTH
-		);
-		updateWidth( spacerWidth );
-		setIsResizing( false );
+		setAttributes( { width: newWidth } );
+		setTemporaryWidth( null );
+	};
+
+	const style = {
+		height:
+			orientation === 'horizontal'
+				? 24
+				: temporaryHeight || height || undefined,
+		width:
+			orientation === 'horizontal'
+				? temporaryWidth || width || undefined
+				: undefined,
 	};
 
 	const resizableBoxWithOrientation = ( blockOrientation ) => {
 		if ( blockOrientation === 'horizontal' ) {
 			return (
-				<ResizableBox
-					className={ classnames(
-						'block-library-spacer__resize-container',
-						'resize-horizontal',
-						{
-							'is-selected': isSelected,
-						}
-					) }
-					size={ {
-						width,
-						height: 24,
-					} }
-					minWidth={ MIN_SPACER_WIDTH }
+				<ResizableSpacer
+					minWidth={ MIN_SPACER_SIZE }
 					enable={ {
 						top: false,
 						right: true,
@@ -97,100 +133,65 @@ const SpacerEdit = ( {
 						bottomLeft: false,
 						topLeft: false,
 					} }
-					onResizeStart={ handleOnResizeStart }
+					orientation={ blockOrientation }
+					onResizeStart={ onResizeStart }
+					onResize={ setTemporaryWidth }
 					onResizeStop={ handleOnHorizontalResizeStop }
-					showHandle={ isSelected }
-					__experimentalShowTooltip={ true }
-					__experimentalTooltipProps={ {
-						axis: 'x',
-						position: 'corner',
-						isVisible: isResizing,
-					} }
+					isSelected={ isSelected }
+					isResizing={ isResizing }
+					setIsResizing={ setIsResizing }
 				/>
 			);
 		}
 
 		return (
-			<ResizableBox
-				className={ classnames(
-					'block-library-spacer__resize-container',
-					{
-						'is-selected': isSelected,
-					}
-				) }
-				size={ {
-					height,
-				} }
-				minHeight={ MIN_SPACER_HEIGHT }
-				enable={ {
-					top: false,
-					right: false,
-					bottom: true,
-					left: false,
-					topRight: false,
-					bottomRight: false,
-					bottomLeft: false,
-					topLeft: false,
-				} }
-				onResizeStart={ handleOnResizeStart }
-				onResizeStop={ handleOnVerticalResizeStop }
-				showHandle={ isSelected }
-				__experimentalShowTooltip={ true }
-				__experimentalTooltipProps={ {
-					axis: 'y',
-					position: 'bottom',
-					isVisible: isResizing,
-				} }
-			/>
+			<>
+				<ResizableSpacer
+					enable={ {
+						top: false,
+						right: false,
+						bottom: true,
+						left: false,
+						topRight: false,
+						bottomRight: false,
+						bottomLeft: false,
+						topLeft: false,
+					} }
+					orientation={ blockOrientation }
+					onResizeStart={ onResizeStart }
+					onResize={ setTemporaryHeight }
+					onResizeStop={ handleOnVerticalResizeStop }
+					isSelected={ isSelected }
+					isResizing={ isResizing }
+					setIsResizing={ setIsResizing }
+				/>
+			</>
 		);
 	};
 
 	useEffect( () => {
 		if ( orientation === 'horizontal' && ! width ) {
-			updateWidth( 72 );
-			updateHeight( 0 );
+			setAttributes( {
+				height: '0px',
+				width: '72px',
+			} );
 		}
 	}, [] );
 
 	return (
 		<>
-			<View { ...useBlockProps() }>
+			<View { ...useBlockProps( { style } ) }>
 				{ resizableBoxWithOrientation( orientation ) }
 			</View>
-			<InspectorControls>
-				<PanelBody title={ __( 'Spacer settings' ) }>
-					{ orientation === 'horizontal' && (
-						<RangeControl
-							label={ __( 'Width in pixels' ) }
-							min={ MIN_SPACER_WIDTH }
-							max={ Math.max( MAX_SPACER_WIDTH, width ) }
-							value={ width }
-							onChange={ updateWidth }
-						/>
-					) }
-					{ orientation !== 'horizontal' && (
-						<RangeControl
-							label={ __( 'Height in pixels' ) }
-							min={ MIN_SPACER_HEIGHT }
-							max={ Math.max( MAX_SPACER_HEIGHT, height ) }
-							value={ height }
-							onChange={ updateHeight }
-						/>
-					) }
-				</PanelBody>
-			</InspectorControls>
+			<SpacerControls
+				setAttributes={ setAttributes }
+				height={ temporaryHeight || height }
+				width={ temporaryWidth || width }
+				orientation={ orientation }
+				isResizing={ isResizing }
+			/>
 		</>
 	);
 };
 
-export default compose( [
-	withDispatch( ( dispatch ) => {
-		const { toggleSelection } = dispatch( blockEditorStore );
-
-		return {
-			onResizeStart: () => toggleSelection( false ),
-			onResizeStop: () => toggleSelection( true ),
-		};
-	} ),
-	withInstanceId,
-] )( SpacerEdit );
+export default SpacerEdit;

package/src/spacer/edit.native.js

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useConvertUnitToMobile } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
+import { InspectorControls } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Controls from './controls';
+import styles from './editor.native.scss';
+
+const Spacer = ( {
+	attributes,
+	context,
+	setAttributes,
+	isSelected,
+	getStylesFromColorScheme,
+} ) => {
+	const { height, width } = attributes;
+
+	const { orientation } = context;
+	const defaultStyle = getStylesFromColorScheme(
+		styles.staticSpacer,
+		styles.staticDarkSpacer
+	);
+
+	useEffect( () => {
+		if ( orientation === 'horizontal' && ! width ) {
+			setAttributes( {
+				height: '0px',
+				width: '72px',
+			} );
+		}
+	}, [] );
+
+	const convertedHeight = useConvertUnitToMobile( height );
+	const convertedWidth = useConvertUnitToMobile( width );
+
+	return (
+		<View
+			style={ [
+				defaultStyle,
+				isSelected && styles.selectedSpacer,
+				{ height: convertedHeight, width: convertedWidth },
+			] }
+		>
+			{ isSelected && (
+				<InspectorControls>
+					<Controls
+						attributes={ attributes }
+						context={ context }
+						setAttributes={ setAttributes }
+					/>
+				</InspectorControls>
+			) }
+		</View>
+	);
+};
+
+export default withPreferredColorScheme( Spacer );

package/src/spacer/editor.scss

@@ -28,6 +28,12 @@
 .block-library-spacer__resize-container {
 	clear: both;
 
+	&:not(.is-resizing) {
+		// Important is used to have higher specificity than the inline style set by re-resizable library.
+		height: 100% !important;
+		width: 100% !important;
+	}
+
 	// Don't show the horizontal indicator.
 	.components-resizable-box__handle::before {
 		content: none;

package/src/spacer/index.js

@@ -6,6 +6,7 @@ import { resizeCornerNE as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -18,4 +19,5 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	deprecated,
 };

package/src/spacer/save.js

@@ -3,11 +3,14 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save( { attributes: { height, width } } ) {
 	return (
 		<div
 			{ ...useBlockProps.save( {
-				style: { height: attributes.height, width: attributes.width },
+				style: {
+					height,
+					width,
+				},
 				'aria-hidden': true,
 			} ) }
 		/>

package/src/style.scss

@@ -6,6 +6,8 @@
 @import "./categories/style.scss";
 @import "./code/style.scss";
 @import "./columns/style.scss";
+@import "./comments-pagination/style.scss";
+@import "./comment-template/style.scss";
 @import "./cover/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";
@@ -19,13 +21,13 @@
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
 @import "./navigation-link/style.scss";
-@import "./home-link/style.scss";
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
 @import "./post-comments/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-excerpt/style.scss";
+@import "./post-featured-image/style.scss";
 @import "./post-terms/style.scss";
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";
@@ -33,6 +35,7 @@
 @import "./post-template/style.scss";
 @import "./query-pagination/style.scss";
 @import "./quote/style.scss";
+@import "./read-more/style.scss";
 @import "./rss/style.scss";
 @import "./search/style.scss";
 @import "./separator/style.scss";
@@ -44,6 +47,5 @@
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";
-@import "./post-featured-image/style.scss";
 
 @import "common.scss";

package/src/table/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/table",
 	"title": "Table",
@@ -127,7 +128,11 @@
 		"align": true,
 		"color": {
 			"__experimentalSkipSerialization": true,
-			"gradients": true
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -144,7 +149,12 @@
 			"__experimentalSkipSerialization": true,
 			"color": true,
 			"style": true,
-			"width": true
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"style": true,
+				"width": true
+			}
 		},
 		"__experimentalSelector": ".wp-block-table > table"
 	},

package/src/table/style.scss

@@ -127,6 +127,7 @@
 		th,
 		td {
 			border-width: inherit;
+			border-style: inherit;
 		}
 	}
 }

package/src/table-of-contents/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/table-of-contents",
 	"title": "Table of Contents",

package/src/table-of-contents/index.php

@@ -261,14 +261,14 @@ function block_core_table_of_contents_render_list(
 
 				$entry = sprintf(
 					'<a class="%1$s" href="%2$s">%3$s</a>',
-					$entry_class,
+					esc_attr( $entry_class ),
 					esc_url( $href ),
 					esc_html( $content )
 				);
 			} else {
 				$entry = sprintf(
 					'<span class="%1$s">%2$s</span>',
-					$entry_class,
+					esc_attr( $entry_class ),
 					esc_html( $content )
 				);
 			}
@@ -279,7 +279,7 @@ function block_core_table_of_contents_render_list(
 				$child_node['children']
 					? block_core_table_of_contents_render_list(
 						$child_node['children'],
-						$page_url
+						esc_url( $page_url )
 					)
 					: null
 			);

package/src/tag-cloud/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/tag-cloud",
 	"title": "Tag Cloud",
@@ -21,6 +22,10 @@
 			"default": false
 		}
 	},
+	"styles": [
+		{ "name": "default", "label": "Default", "isDefault": true },
+		{ "name": "outline", "label": "Outline" }
+	],
 	"supports": {
 		"html": false,
 		"align": true

package/src/tag-cloud/index.js

@@ -6,6 +6,7 @@ import { tag as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import transforms from './transforms';
 import metadata from './block.json';
 import edit from './edit';
 
@@ -17,4 +18,5 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	transforms,
 };

package/src/tag-cloud/style.scss

@@ -18,4 +18,13 @@
 		margin-left: 5px;
 		text-decoration: none;
 	}
+
+	&.is-style-outline a {
+		border: 1px solid currentColor;
+		font-size: unset !important; // !important Needed to override the inline styles.
+		margin-bottom: 1ch;
+		margin-right: 1ch;
+		padding: 1ch 2ch;
+		text-decoration: none !important; // !important needed to override generic post content link decoration.
+	}
 }

package/src/tag-cloud/transforms.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/categories' ],
+			transform: () => createBlock( 'core/tag-cloud' ),
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/categories' ],
+			transform: () => createBlock( 'core/categories' ),
+		},
+	],
+};
+
+export default transforms;

package/src/template-part/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/template-part",
 	"title": "Template Part",

package/src/template-part/index.php

@@ -103,7 +103,12 @@ function render_block_core_template_part( $attributes ) {
 		}
 	}
 
-	if ( is_null( $content ) && is_user_logged_in() ) {
+	// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
+	// is set in `wp_debug_mode()`.
+	$is_debug = defined( 'WP_DEBUG' ) && WP_DEBUG &&
+		defined( 'WP_DEBUG_DISPLAY' ) && WP_DEBUG_DISPLAY;
+
+	if ( is_null( $content ) && $is_debug ) {
 		if ( ! isset( $attributes['slug'] ) ) {
 			// If there is no slug this is a placeholder and we dont want to return any message.
 			return;
@@ -116,11 +121,6 @@ function render_block_core_template_part( $attributes ) {
 	}
 
 	if ( isset( $seen_ids[ $template_part_id ] ) ) {
-		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
-		// is set in `wp_debug_mode()`.
-		$is_debug = defined( 'WP_DEBUG' ) && WP_DEBUG &&
-			defined( 'WP_DEBUG_DISPLAY' ) && WP_DEBUG_DISPLAY;
-
 		return $is_debug ?
 			// translators: Visible only in the front end, this warning takes the place of a faulty block.
 			__( '[block rendering halted]' ) :

package/src/term-description/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/term-description",
 	"title": "Term Description",
@@ -14,7 +15,11 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"color": {
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"typography": {
 			"fontSize": true,

package/src/text-columns/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/text-columns",
 	"title": "Text Columns (deprecated)",