@wordpress/block-library 6.0.23 → 7.0.0

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

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-pagination-previous` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-pagination-previous` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the previous posts link for the comments pagination.
+ */
+function render_block_core_comments_pagination_previous( $attributes, $content, $block ) {
+	$default_label    = __( 'Older Comments' );
+	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$pagination_arrow = get_comments_pagination_arrow( $block, 'previous' );
+	if ( $pagination_arrow ) {
+		$label = $pagination_arrow . $label;
+	}
+
+	$filter_link_attributes = function() {
+		return get_block_wrapper_attributes();
+	};
+	add_filter( 'previous_comments_link_attributes', $filter_link_attributes );
+
+	$previous_comments_link = get_previous_comments_link( $label );
+
+	remove_filter( 'previous_comments_link_attributes', $filter_link_attributes );
+
+	if ( ! isset( $previous_comments_link ) ) {
+		return '';
+	}
+
+	return $previous_comments_link;
+}
+
+/**
+ * Registers the `core/comments-pagination-previous` block on the server.
+ */
+function register_block_core_comments_pagination_previous() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-pagination-previous',
+		array(
+			'render_callback' => 'render_block_core_comments_pagination_previous',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments_pagination_previous' );

package/src/comments-query-loop/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-query-loop",
 	"title": "Comments Query Loop",
@@ -6,12 +7,17 @@
 	"description": "An advanced block that allows displaying post comments based on different query parameters and visual configurations.",
 	"textdomain": "default",
 	"attributes": {
-		"queryId": {
-			"type": "number"
+		"inherit": {
+			"type": "boolean",
+			"default": true
 		},
-		"queryPerPage": {
+		"order": {
+			"type": "string",
+			"default": null
+		},
+		"perPage": {
 			"type": "number",
-			"default": 4
+			"default": null
 		},
 		"tagName": {
 			"type": "string",
@@ -19,15 +25,22 @@
 		}
 	},
 	"providesContext": {
-		"queryId": "queryId",
-		"queryPerPage": "queryPerPage"
+		"comments/perPage": "perPage",
+		"comments/order": "order",
+		"comments/inherit": "inherit"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
 		}
-	}
+	},
+	"editorStyle": "wp-block-comments-editor"
 }

package/src/comments-query-loop/edit/comments-inspector-controls.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	SelectControl,
+	ToggleControl,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+
+const orderOptions = [
+	{
+		label: __( 'Newest to oldest' ),
+		value: 'desc',
+	},
+	{
+		label: __( 'Oldest to newest' ),
+		value: 'asc',
+	},
+];
+
+export default function CommentsInspectorControls( {
+	attributes: { TagName, perPage, order, inherit },
+	setAttributes,
+	defaultSettings: { defaultPerPage, defaultOrder },
+} ) {
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings' ) }>
+				<ToggleControl
+					label={ __( 'Inherit from Discussion Settings' ) }
+					checked={ inherit }
+					onChange={ () => {
+						setAttributes( {
+							inherit: ! inherit,
+							order: inherit ? defaultOrder : null,
+							perPage: inherit ? defaultPerPage : null,
+						} );
+					} }
+				/>
+				{ ! inherit && (
+					<>
+						<SelectControl
+							label={ __( 'Order by' ) }
+							value={ order }
+							options={ orderOptions }
+							onChange={ ( value ) => {
+								setAttributes( {
+									order: value,
+								} );
+							} }
+						/>
+						<NumberControl
+							__unstableInputWidth="60px"
+							label={ __( 'Items per Page' ) }
+							labelPosition="edge"
+							min={ 1 }
+							max={ 100 }
+							onChange={ ( value ) => {
+								const num = parseInt( value, 10 );
+								if ( isNaN( num ) || num < 1 || num > 100 ) {
+									return;
+								}
+								setAttributes( {
+									perPage: num,
+								} );
+							} }
+							step="1"
+							value={ perPage }
+							isDragEnabled={ false }
+						/>
+					</>
+				) }
+			</PanelBody>
+			<InspectorControls __experimentalGroup="advanced">
+				<SelectControl
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<aside>', value: 'aside' },
+					] }
+					value={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+				/>
+			</InspectorControls>
+		</InspectorControls>
+	);
+}

package/src/comments-query-loop/edit.js

@@ -2,51 +2,46 @@
  * WordPress dependencies
  */
 import {
-	BlockControls,
-	InspectorControls,
 	useBlockProps,
 	useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import QueryToolbar from './toolbar';
+import CommentsInspectorControls from './edit/comments-inspector-controls';
+import { useSelect } from '@wordpress/data';
 
-const TEMPLATE = [ [ 'core/comment-template' ] ];
+const TEMPLATE = [
+	[ 'core/comment-template' ],
+	[ 'core/comments-pagination' ],
+];
 
 export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
-	const { queryPerPage, tagName: TagName } = attributes;
+	const { tagName: TagName } = attributes;
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
 
+	const { commentOrder, commentsPerPage } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
+
 	return (
 		<>
-			<BlockControls>
-				<QueryToolbar
-					queryPerPage={ queryPerPage }
-					setQuery={ setAttributes }
-				/>
-			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
-				<SelectControl
-					label={ __( 'HTML element' ) }
-					options={ [
-						{ label: __( 'Default (<div>)' ), value: 'div' },
-						{ label: '<section>', value: 'section' },
-						{ label: '<aside>', value: 'aside' },
-					] }
-					value={ TagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-				/>
-			</InspectorControls>
+			<CommentsInspectorControls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				defaultSettings={ {
+					defaultOrder: commentOrder,
+					defaultPerPage: commentsPerPage,
+				} }
+			/>
 			<TagName { ...innerBlocksProps } />
 		</>
 	);

package/src/comments-query-loop/editor.scss

@@ -0,0 +1,3 @@
+.block-library-comments-toolbar__popover .components-popover__content {
+	min-width: 230px;
+}

package/src/common.scss

@@ -101,3 +101,31 @@
 	width: auto;
 	z-index: 100000;
 }
+
+/**
+ * The following provide a simple means of applying a default border style when
+ * a user first makes a selection in the border block support panel.
+ * This prevents issues such as where the user could set a border width
+ * and see no border due there being no border style set.
+ *
+ * This is intended to be removed once intelligent defaults can be set while
+ * making border selections via the block support.
+ *
+ * See: https://github.com/WordPress/gutenberg/pull/33743
+ */
+html :where(.has-border-color) {
+	border-style: solid;
+}
+
+html :where([style*="border-width"]) {
+	border-style: solid;
+}
+
+
+/**
+ * Provide baseline responsiveness for images.
+ */
+html :where(img) {
+	height: auto;
+	max-width: 100%;
+}

package/src/cover/block.json

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

package/src/cover/deprecated.js

@@ -14,6 +14,7 @@ import {
 	InnerBlocks,
 	__experimentalGetGradientClass,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -26,6 +27,7 @@ import {
 	backgroundImageStyles,
 	getPositionClassName,
 	isContentPositionCenter,
+	dimRatioToClass,
 } from './shared';
 
 /**
@@ -79,6 +81,214 @@ const blockAttributes = {
 	},
 };
 
+// v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
+const v8 = {
+	attributes: {
+		url: {
+			type: 'string',
+		},
+		id: {
+			type: 'number',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+		},
+		hasParallax: {
+			type: 'boolean',
+			default: false,
+		},
+		isRepeated: {
+			type: 'boolean',
+			default: false,
+		},
+		dimRatio: {
+			type: 'number',
+			default: 100,
+		},
+		overlayColor: {
+			type: 'string',
+		},
+		customOverlayColor: {
+			type: 'string',
+		},
+		backgroundType: {
+			type: 'string',
+			default: 'image',
+		},
+		focalPoint: {
+			type: 'object',
+		},
+		minHeight: {
+			type: 'number',
+		},
+		minHeightUnit: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		customGradient: {
+			type: 'string',
+		},
+		contentPosition: {
+			type: 'string',
+		},
+		isDark: {
+			type: 'boolean',
+			default: true,
+		},
+		allowedBlocks: {
+			type: 'array',
+		},
+		templateLock: {
+			type: [ 'string', 'boolean' ],
+			enum: [ 'all', 'insert', false ],
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		html: false,
+		spacing: {
+			padding: true,
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		color: {
+			__experimentalDuotone:
+				'> .wp-block-cover__image-background, > .wp-block-cover__video-background',
+			text: false,
+			background: false,
+		},
+	},
+	save( { attributes } ) {
+		const {
+			backgroundType,
+			gradient,
+			contentPosition,
+			customGradient,
+			customOverlayColor,
+			dimRatio,
+			focalPoint,
+			hasParallax,
+			isDark,
+			isRepeated,
+			overlayColor,
+			url,
+			alt,
+			id,
+			minHeight: minHeightProp,
+			minHeightUnit,
+		} = attributes;
+		const overlayColorClass = getColorClassName(
+			'background-color',
+			overlayColor
+		);
+		const gradientClass = __experimentalGetGradientClass( gradient );
+		const minHeight = minHeightUnit
+			? `${ minHeightProp }${ minHeightUnit }`
+			: minHeightProp;
+
+		const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+		const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+		const isImgElement = ! ( hasParallax || isRepeated );
+
+		const style = {
+			...( isImageBackground && ! isImgElement
+				? backgroundImageStyles( url )
+				: {} ),
+			minHeight: minHeight || undefined,
+		};
+
+		const bgStyle = {
+			backgroundColor: ! overlayColorClass
+				? customOverlayColor
+				: undefined,
+			background: customGradient ? customGradient : undefined,
+		};
+
+		const objectPosition =
+			// prettier-ignore
+			focalPoint && isImgElement
+				 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
+				 : undefined;
+
+		const classes = classnames(
+			{
+				'is-light': ! isDark,
+				'has-parallax': hasParallax,
+				'is-repeated': isRepeated,
+				'has-custom-content-position': ! isContentPositionCenter(
+					contentPosition
+				),
+			},
+			getPositionClassName( contentPosition )
+		);
+
+		return (
+			<div { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						'wp-block-cover__gradient-background',
+						gradientClass,
+						{
+							'has-background-dim': dimRatio !== undefined,
+							'has-background-gradient':
+								gradient || customGradient,
+							[ gradientClass ]: ! url && gradientClass,
+						}
+					) }
+					style={ bgStyle }
+				/>
+
+				{ isImageBackground && isImgElement && url && (
+					<img
+						className={ classnames(
+							'wp-block-cover__image-background',
+							id ? `wp-image-${ id }` : null
+						) }
+						alt={ alt }
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				{ isVideoBackground && url && (
+					<video
+						className={ classnames(
+							'wp-block-cover__video-background',
+							'intrinsic-ignore'
+						) }
+						autoPlay
+						muted
+						loop
+						playsInline
+						src={ url }
+						style={ { objectPosition } }
+						data-object-fit="cover"
+						data-object-position={ objectPosition }
+					/>
+				) }
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-cover__inner-container',
+					} ) }
+				/>
+			</div>
+		);
+	},
+};
+
 const v7 = {
 	attributes: {
 		...blockAttributes,
@@ -808,4 +1018,4 @@ const v1 = {
 	},
 };
 
-export default [ v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];

package/src/cover/edit.js

@@ -706,6 +706,7 @@ function CoverEdit( {
 				<BoxControlVisualizer
 					values={ styleAttribute?.spacing?.padding }
 					showValues={ styleAttribute?.visualizers?.padding }
+					className="block-library-cover__padding-visualizer"
 				/>
 				<ResizableCover
 					className="block-library-cover__resize-container"
@@ -725,14 +726,18 @@ function CoverEdit( {
 				<span
 					aria-hidden="true"
 					className={ classnames(
+						'wp-block-cover__background',
 						dimRatioToClass( dimRatio ),
-						{ [ overlayColor.class ]: overlayColor.class },
-						'wp-block-cover__gradient-background',
-						gradientClass,
 						{
+							[ overlayColor.class ]: overlayColor.class,
 							'has-background-dim': dimRatio !== undefined,
+							// For backwards compatibility. Former versions of the Cover Block applied
+							// `.wp-block-cover__gradient-background` in the presence of
+							// media, a gradient and a dim.
+							'wp-block-cover__gradient-background':
+								url && gradientValue && dimRatio !== 0,
 							'has-background-gradient': gradientValue,
-							[ gradientClass ]: ! url && gradientClass,
+							[ gradientClass ]: gradientClass,
 						}
 					) }
 					style={ { backgroundImage: gradientValue, ...bgStyle } }