@wordpress/block-library 7.0.1 → 7.1.0-next.e230fbab09.0

package/src/comment-template/hooks.js

@@ -0,0 +1,151 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Return an object with the query args needed to fetch the default page of
+ * comments.
+ *
+ * @param {Object}  props             Hook props.
+ * @param {number}  props.postId      ID of the post that contains the comments.
+ * @param {number}  props.perPage     The number of comments included per page.
+ * @param {string}  props.defaultPage Page shown by default (newest/oldest).
+ * @param {boolean} props.inherit     Overwrite props with values from WP
+ *                                    discussion settings.
+ *
+ * @return {Object} Query args to retrieve the comments.
+ */
+export const useCommentQueryArgs = ( {
+	postId,
+	perPage,
+	defaultPage,
+	inherit,
+} ) => {
+	// Initialize the query args that are not going to change.
+	const queryArgs = {
+		status: 'approve',
+		order: 'asc',
+		context: 'embed',
+		parent: 0,
+		_embed: 'children',
+	};
+
+	// Get the Discussion settings that may be needed to query the comments.
+	const { commentsPerPage, defaultCommentsPage } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
+
+	// Overwrite the received attributes if `inherit` is true.
+	if ( inherit ) {
+		perPage = commentsPerPage;
+		defaultPage = defaultCommentsPage;
+	}
+
+	// If a block props is not set, use the settings value to generate the
+	// appropriate query arg.
+	perPage = perPage || commentsPerPage;
+	defaultPage = defaultPage || defaultCommentsPage;
+
+	// Get the number of the default page.
+	const page = useDefaultPageIndex( {
+		defaultPage,
+		postId,
+		perPage,
+		queryArgs,
+	} );
+
+	// Merge, memoize and return all query arguments, unless the default page's
+	// number is not known yet.
+	return useMemo( () => {
+		return page
+			? {
+					...queryArgs,
+					post: postId,
+					per_page: perPage,
+					page,
+			  }
+			: null;
+	}, [ postId, perPage, page ] );
+};
+
+/**
+ * Return the index of the default page, depending on whether `defaultPage` is
+ * `newest` or `oldest`. In the first case, the only way to know the page's
+ * index is by using the `X-WP-TotalPages` header, which forces to make an
+ * additional request.
+ *
+ * @param {Object} props             Hook props.
+ * @param {string} props.defaultPage Page shown by default (newest/oldest).
+ * @param {number} props.postId      ID of the post that contains the comments.
+ * @param {number} props.perPage     The number of comments included per page.
+ * @param {Object} props.queryArgs   Other query args.
+ *
+ * @return {number} Index of the default comments page.
+ */
+const useDefaultPageIndex = ( { defaultPage, postId, perPage, queryArgs } ) => {
+	// Store the default page indices.
+	const [ defaultPages, setDefaultPages ] = useState( {} );
+	const key = `${ postId }_${ perPage }`;
+	const page = defaultPages[ key ] || 0;
+
+	useEffect( () => {
+		// Do nothing if the page is already known or not the newest page.
+		if ( page || defaultPage !== 'newest' ) {
+			return;
+		}
+		// We need to fetch comments to know the index. Use HEAD and limit
+		// fields just to ID, to make this call as light as possible.
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/comments', {
+				...queryArgs,
+				post: postId,
+				per_page: perPage,
+				_fields: 'id',
+			} ),
+			method: 'HEAD',
+			parse: false,
+		} ).then( ( res ) => {
+			setDefaultPages( {
+				...defaultPages,
+				[ key ]: parseInt( res.headers.get( 'X-WP-TotalPages' ) ),
+			} );
+		} );
+	}, [ defaultPage, postId, perPage, setDefaultPages ] );
+
+	// The oldest one is always the first one.
+	return defaultPage === 'newest' ? page : 1;
+};
+
+/**
+ * Generate a tree structure of comment IDs from a list of comment entities. The
+ * children of each comment are obtained from `_embedded`.
+ *
+ * @typedef {{ commentId: number, children: CommentNode }} CommentNode
+ *
+ * @param {Object[]} topLevelComments List of comment entities.
+ * @return {{ commentTree: CommentNode[]}} Tree of comment IDs.
+ */
+export const useCommentTree = ( topLevelComments ) => {
+	const commentTree = useMemo(
+		() =>
+			topLevelComments?.map( ( { id, _embedded } ) => {
+				const [ children ] = _embedded?.children || [ [] ];
+				return {
+					commentId: id,
+					children: children.map( ( child ) => ( {
+						commentId: child.id,
+					} ) ),
+				};
+			} ),
+		[ topLevelComments ]
+	);
+
+	return commentTree;
+};

package/src/comment-template/index.php

@@ -68,6 +68,14 @@ function render_block_core_comment_template( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$comment_order = empty( $block->context['comments/inherit'] ) && ! empty( $block->context['comments/order'] )
+		? $block->context['comments/order']
+		: get_option( 'comment_order' );
+
+	if ( 'desc' === $comment_order ) {
+		$comments = array_reverse( $comments );
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes();
 
 	return sprintf(

package/src/comment-template/util.js

@@ -29,6 +29,7 @@
  */
 export const convertToTree = ( data ) => {
 	const table = {};
+
 	if ( ! data ) return [];
 
 	// First create a hash table of { [id]: { ...comment, children: [] }}

package/src/comments-pagination-next/block.json

@@ -12,7 +12,14 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "postId", "comments/perPage", "comments/paginationArrow" ],
+	"usesContext": [
+		"postId",
+		"comments/perPage",
+		"comments/order",
+		"comments/inherit",
+		"comments/defaultPage",
+		"comments/paginationArrow"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,

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

@@ -15,15 +15,13 @@
  * @return string Returns the next comments link for the query pagination.
  */
 function render_block_core_comments_pagination_next( $attributes, $content, $block ) {
-	$per_page = ! empty( $block->context['comments/perPage'] ) ? (int) $block->context['comments/perPage'] : 0;
-	if ( 0 === $per_page && get_option( 'page_comments' ) ) {
-		$per_page = (int) get_query_var( 'comments_per_page' );
-		if ( 0 === $per_page ) {
-			$per_page = (int) get_option( 'comments_per_page' );
-		}
+	// Bail out early if the post ID is not set for some reason.
+	if ( empty( $block->context['postId'] ) ) {
+		return '';
 	}
-	$comments_number  = (int) get_comments_number();
-	$max_page         = 0 !== $per_page ? (int) floor( $comments_number / $per_page ) : 0;
+
+	$comment_vars     = build_comment_query_vars_from_block( $block );
+	$max_page         = ( new WP_Comment_Query( $comment_vars ) )->max_num_pages;
 	$default_label    = __( 'Newer Comments' );
 	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
 	$pagination_arrow = get_comments_pagination_arrow( $block, 'next' );

package/src/comments-pagination-numbers/block.json

@@ -7,7 +7,13 @@
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays a list of page numbers for comments pagination.",
 	"textdomain": "default",
-	"usesContext": [ "comments/perPage", "postId", "comments/order" ],
+	"usesContext": [
+		"postId",
+		"comments/perPage",
+		"comments/order",
+		"comments/inherit",
+		"comments/defaultPage"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false

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

@@ -20,17 +20,10 @@ function render_block_core_comments_pagination_numbers( $attributes, $content, $
 		return '';
 	}
 
-	$comments_query = new WP_Comment_Query(
-		build_comment_query_vars_from_block( $block )
-	);
-	$total          = $comments_query->max_num_pages;
+	$comment_vars = build_comment_query_vars_from_block( $block );
 
-	// Get the current comment page from the URL.
-	$current = get_query_var( 'cpage' );
-	if ( ! $current ) {
-		// Get the number of the default page.
-		$current = 'newest' === get_option( 'default_comments_page' ) ? $total : 1;
-	}
+	$total   = ( new WP_Comment_Query( $comment_vars ) )->max_num_pages;
+	$current = ! empty( $comment_vars['paged'] ) ? $comment_vars['paged'] : null;
 
 	// Render links.
 	$content = paginate_comments_links(

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

@@ -22,11 +22,16 @@
 		"tagName": {
 			"type": "string",
 			"default": "div"
+		},
+		"defaultPage": {
+			"type": "string",
+			"default": "oldest"
 		}
 	},
 	"providesContext": {
 		"comments/perPage": "perPage",
 		"comments/order": "order",
+		"comments/defaultPage": "defaultPage",
 		"comments/inherit": "inherit"
 	},
 	"supports": {

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

@@ -21,10 +21,20 @@ const orderOptions = [
 	},
 ];
 
+const defaultPageOptions = [
+	{
+		label: __( 'Newest' ),
+		value: 'newest',
+	},
+	{
+		label: __( 'Oldest' ),
+		value: 'oldest',
+	},
+];
+
 export default function CommentsInspectorControls( {
-	attributes: { TagName, perPage, order, inherit },
+	attributes: { TagName, perPage, order, inherit, defaultPage },
 	setAttributes,
-	defaultSettings: { defaultPerPage, defaultOrder },
 } ) {
 	return (
 		<InspectorControls>
@@ -35,8 +45,6 @@ export default function CommentsInspectorControls( {
 					onChange={ () => {
 						setAttributes( {
 							inherit: ! inherit,
-							order: inherit ? defaultOrder : null,
-							perPage: inherit ? defaultPerPage : null,
 						} );
 					} }
 				/>
@@ -52,6 +60,16 @@ export default function CommentsInspectorControls( {
 								} );
 							} }
 						/>
+						<SelectControl
+							label={ __( 'Default page' ) }
+							value={ defaultPage }
+							options={ defaultPageOptions }
+							onChange={ ( value ) => {
+								setAttributes( {
+									defaultPage: value,
+								} );
+							} }
+						/>
 						<NumberControl
 							__unstableInputWidth="60px"
 							label={ __( 'Items per Page' ) }

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

@@ -1,17 +1,12 @@
 /**
  * WordPress dependencies
  */
-import {
-	useBlockProps,
-	useInnerBlocksProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import CommentsInspectorControls from './edit/comments-inspector-controls';
-import { useSelect } from '@wordpress/data';
 
 const TEMPLATE = [
 	[ 'core/comment-template' ],
@@ -26,21 +21,11 @@ export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
 		template: TEMPLATE,
 	} );
 
-	const { commentOrder, commentsPerPage } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const { __experimentalDiscussionSettings } = getSettings();
-		return __experimentalDiscussionSettings;
-	} );
-
 	return (
 		<>
 			<CommentsInspectorControls
 				attributes={ attributes }
 				setAttributes={ setAttributes }
-				defaultSettings={ {
-					defaultOrder: commentOrder,
-					defaultPerPage: commentsPerPage,
-				} }
 			/>
 			<TagName { ...innerBlocksProps } />
 		</>

package/src/common.scss

@@ -125,7 +125,7 @@ html :where([style*="border-width"]) {
 /**
  * Provide baseline responsiveness for images.
  */
-html :where(img) {
+html :where(img[class*="wp-image-"]) {
 	height: auto;
 	max-width: 100%;
 }

package/src/cover/controls.native.js

@@ -76,7 +76,7 @@ function Controls( {
 			'vw',
 			'vh',
 		],
-		defaultValues: { px: '430', em: '20', rem: '20', vw: '20', vh: '50' },
+		defaultValues: { px: 430, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 
 	const onOpacityChange = useCallback( ( value ) => {

package/src/cover/deprecated.js

@@ -81,6 +81,219 @@ const blockAttributes = {
 	},
 };
 
+// Deprecation for blocks with `minHeightUnit` set but no `minHeight`.
+const v9 = {
+	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 )
+		);
+
+		const gradientValue = gradient || customGradient;
+
+		return (
+			<div { ...useBlockProps.save( { className: classes, style } ) }>
+				<span
+					aria-hidden="true"
+					className={ classnames(
+						'wp-block-cover__background',
+						overlayColorClass,
+						dimRatioToClass( dimRatio ),
+						{
+							'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 ]: 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>
+		);
+	},
+};
+
 // v8: deprecated to remove duplicated gradient classes and swap `wp-block-cover__gradient-background` for `wp-block-cover__background`.
 const v8 = {
 	attributes: {
@@ -1018,4 +1231,4 @@ const v1 = {
 	},
 };
 
-export default [ v8, v7, v6, v5, v4, v3, v2, v1 ];
+export default [ v9, v8, v7, v6, v5, v4, v3, v2, v1 ];