@wordpress/block-library 6.0.12 → 6.0.17-next.33ec3857e2.0

package/src/comments-pagination/edit.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { getBlockSupport } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls';
+
+// TODO: add pagination-previous/next blocks once they are implemented.
+const TEMPLATE = [ [ 'core/comments-pagination-numbers' ] ];
+
+const getDefaultBlockLayout = ( blockTypeOrName ) => {
+	const layoutBlockSupportConfig = getBlockSupport(
+		blockTypeOrName,
+		'__experimentalLayout'
+	);
+	return layoutBlockSupportConfig?.default;
+};
+
+export default function QueryPaginationEdit( {
+	attributes: { paginationArrow, layout },
+	setAttributes,
+	clientId,
+	name,
+} ) {
+	const usedLayout = layout || getDefaultBlockLayout( name );
+	const hasNextPreviousBlocks = useSelect( ( select ) => {
+		const { getBlocks } = select( blockEditorStore );
+		const innerBlocks = getBlocks( clientId );
+		/**
+		 * Show the `paginationArrow` control only if a
+		 * `QueryPaginationNext/Previous` block exists.
+		 */
+		return innerBlocks?.find( ( innerBlock ) => {
+			return [
+				'core/query-pagination-next',
+				'core/query-pagination-previous',
+			].includes( innerBlock.name );
+		} );
+	}, [] );
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		allowedBlocks: [
+			// TODO: add pagination-previous/next blocks once they are implemented.
+			'core/comments-pagination-numbers',
+		],
+		__experimentalLayout: usedLayout,
+	} );
+	return (
+		<>
+			{ hasNextPreviousBlocks && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<CommentsPaginationArrowControls
+							value={ paginationArrow }
+							onChange={ ( value ) => {
+								setAttributes( { paginationArrow: value } );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/comments-pagination/editor.scss

@@ -0,0 +1,34 @@
+$pagination-margin: 0.5em;
+
+// Center flex items. This has an equivalent in style.scss.
+.wp-block[data-align="center"] > .wp-block-comments-pagination {
+	justify-content: center;
+}
+
+.editor-styles-wrapper {
+	.wp-block-comments-pagination {
+		max-width: 100%;
+		&.block-editor-block-list__layout {
+			margin: 0;
+		}
+	}
+}
+
+.wp-block-comments-pagination {
+	> .wp-block-comments-pagination-next,
+	> .wp-block-comments-pagination-previous,
+	> .wp-block-comments-pagination-numbers {
+		// Override editor auto block margins.
+		margin-left: 0;
+		margin-top: $pagination-margin;
+
+		/*rtl:ignore*/
+		margin-right: $pagination-margin;
+		margin-bottom: $pagination-margin;
+
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
+	}
+}

package/src/comments-pagination/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { queryPagination as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};

package/src/comments-pagination/index.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-pagination` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-pagination` block on the server.
+ *
+ * @param array  $attributes Block attributes.
+ * @param string $content    Block default content.
+ *
+ * @return string Returns the wrapper for the Comments pagination.
+ */
+function render_block_core_comments_pagination( $attributes, $content ) {
+	if ( empty( trim( $content ) ) ) {
+		return '';
+	}
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		get_block_wrapper_attributes(),
+		$content
+	);
+}
+
+/**
+ * Registers the `core/comments-pagination` block on the server.
+ */
+function register_block_core_comments_pagination() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-pagination',
+		array(
+			'render_callback' => 'render_block_core_comments_pagination',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments_pagination' );

package/src/comments-pagination/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function save() {
+	return <InnerBlocks.Content />;
+}

package/src/comments-pagination/style.scss

@@ -0,0 +1,38 @@
+$pagination-margin: 0.5em;
+.wp-block-comments-pagination {
+	// Increased specificity to override blocks default margin.
+	> .wp-block-comments-pagination-next,
+	> .wp-block-comments-pagination-previous,
+	> .wp-block-comments-pagination-numbers {
+		/*rtl:ignore*/
+		margin-right: $pagination-margin;
+		margin-bottom: $pagination-margin;
+
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
+	}
+	.wp-block-comments-pagination-previous-arrow {
+		margin-right: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+	.wp-block-comments-pagination-next-arrow {
+		margin-left: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+
+	&.aligncenter {
+		justify-content: center;
+	}
+}

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

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/comments-pagination-numbers",
+	"title": "Comments Pagination Numbers",
+	"category": "theme",
+	"parent": [ "core/comments-pagination" ],
+	"description": "Displays a list of page numbers for comments pagination.",
+	"textdomain": "default",
+	"usesContext": [ "comments/perPage", "postId" ],
+	"supports": {
+		"reusable": false,
+		"html": false
+	},
+	"editorStyle": "comments-pagination-numbers-editor"
+}

package/src/comments-pagination-numbers/edit.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+const PaginationItem = ( { content, tag: Tag = 'a', extraClass = '' } ) => (
+	<Tag className={ `page-numbers ${ extraClass }` }>{ content }</Tag>
+);
+
+export default function CommentsPaginationNumbersEdit() {
+	return (
+		<div { ...useBlockProps() }>
+			<PaginationItem content="1" />
+			<PaginationItem content="2" />
+			<PaginationItem content="3" tag="span" extraClass="current" />
+			<PaginationItem content="4" />
+			<PaginationItem content="5" />
+			<PaginationItem content="..." tag="span" extraClass="dots" />
+			<PaginationItem content="8" />
+		</div>
+	);
+}

package/src/comments-pagination-numbers/editor.scss

@@ -0,0 +1,12 @@
+.wp-block-comments-pagination-numbers {
+	a {
+		text-decoration: underline;
+	}
+	.page-numbers {
+		margin-right: 2px;
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
+	}
+}

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { queryPaginationNumbers as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};

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

@@ -0,0 +1,69 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-pagination-numbers` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-pagination-numbers` 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 pagination numbers for the comments.
+ */
+function render_block_core_comments_pagination_numbers( $attributes, $content, $block ) {
+	// Bail out early if the post ID is not set for some reason.
+	if ( empty( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$comments_query = new WP_Comment_Query(
+		build_comment_query_vars_from_block( $block )
+	);
+	$total          = $comments_query->max_num_pages;
+
+	// 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;
+	}
+
+	// Render links.
+	$content = paginate_comments_links(
+		array(
+			'total'     => $total,
+			'current'   => $current,
+			'prev_next' => false,
+			'echo'      => false,
+		)
+	);
+
+	if ( empty( $content ) ) {
+		return '';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$content
+	);
+}
+
+/**
+ * Registers the `core/comments-pagination-numbers` block on the server.
+ */
+function register_block_core_comments_pagination_numbers() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-pagination-numbers',
+		array(
+			'render_callback' => 'render_block_core_comments_pagination_numbers',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments_pagination_numbers' );

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,9 @@
 	"description": "An advanced block that allows displaying post comments based on different query parameters and visual configurations.",
 	"textdomain": "default",
 	"attributes": {
-		"queryId": {
-			"type": "number"
-		},
-		"queryPerPage": {
+		"perPage": {
 			"type": "number",
-			"default": 4
+			"default": null
 		},
 		"tagName": {
 			"type": "string",
@@ -19,8 +17,7 @@
 		}
 	},
 	"providesContext": {
-		"queryId": "queryId",
-		"queryPerPage": "queryPerPage"
+		"comments/perPage": "perPage"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],

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

@@ -18,7 +18,7 @@ import QueryToolbar from './toolbar';
 const TEMPLATE = [ [ 'core/comment-template' ] ];
 
 export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
-	const { queryPerPage, tagName: TagName } = attributes;
+	const { perPage, tagName: TagName } = attributes;
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -28,10 +28,7 @@ export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<BlockControls>
-				<QueryToolbar
-					queryPerPage={ queryPerPage }
-					setQuery={ setAttributes }
-				/>
+				<QueryToolbar perPage={ perPage } setQuery={ setAttributes } />
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl

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

@@ -11,7 +11,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 
-export default function CommentsQueryLoopToolbar( { queryPerPage, setQuery } ) {
+export default function CommentsQueryLoopToolbar( { perPage, setQuery } ) {
 	return (
 		<ToolbarGroup>
 			<Dropdown
@@ -41,11 +41,11 @@ export default function CommentsQueryLoopToolbar( { queryPerPage, setQuery } ) {
 										return;
 									}
 									setQuery( {
-										queryPerPage: num,
+										perPage: num,
 									} );
 								} }
 								step="1"
-								value={ queryPerPage }
+								value={ perPage }
 								isDragEnabled={ false }
 							/>
 						</BaseControl>

package/src/common.scss

@@ -6,6 +6,10 @@
 	@include background-colors-deprecated();
 	@include foreground-colors-deprecated();
 	@include gradient-colors-deprecated();
+	// This CSS Custom Properties aren't used anymore as defaults,
+	// but we still need to keep them for backward compatibility.
+	--wp--preset--font-size--normal: 16px;
+	--wp--preset--font-size--huge: 42px;
 }
 
 // Font sizes (not used now, kept because of backward compatibility).
@@ -17,6 +21,14 @@
 	font-size: 2.625em;
 }
 
+.has-normal-font-size {
+	font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.has-huge-font-size {
+	font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 // Text alignments.
 .has-text-align-center {
 	text-align: center;
@@ -89,3 +101,22 @@
 	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;
+}

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/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"

package/src/cover/style.scss

@@ -76,6 +76,10 @@
 		}
 	}
 
+	.block-library-cover__padding-visualizer {
+		z-index: z-index(".block-library-cover__padding-visualizer");
+	}
+
 	// Apply max-width to floated items that have no intrinsic width
 	&.alignleft,
 	&.alignright {

package/src/editor.scss

@@ -5,6 +5,8 @@
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./columns/editor.scss";
+@import "./comments-pagination/editor.scss";
+@import "./comments-pagination-numbers/editor.scss";
 @import "./cover/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
@@ -48,6 +50,10 @@
 	@include background-colors-deprecated();
 	@include foreground-colors-deprecated();
 	@include gradient-colors-deprecated();
+	// This CSS Custom Properties aren't used anymore as defaults,
+	// but we still need to keep them for backward compatibility.
+	--wp--preset--font-size--normal: 16px;
+	--wp--preset--font-size--huge: 42px;
 }
 
 // Font sizes (not used now, kept because of backward compatibility).
@@ -62,6 +68,14 @@
 	font-size: 42px;
 }
 
+.editor-styles-wrapper .has-normal-font-size {
+	font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.editor-styles-wrapper .has-huge-font-size {
+	font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 /**
  * Editor Normalization Styles
  *

package/src/embed/block.json

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

package/src/embed/edit.native.js

@@ -13,7 +13,7 @@ import { embedContentIcon } from './icons';
 import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedPreview from './embed-preview';
-import EmbedBottomSheet from './embed-bottom-sheet';
+import EmbedLinkSettings from './embed-link-settings';
 
 /**
  * External dependencies
@@ -24,7 +24,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useCallback, useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useBlockProps,
@@ -196,6 +196,14 @@ const EmbedEdit = ( props ) => {
 		isEditingURL,
 	] );
 
+	const onEditURL = useCallback( ( value ) => {
+		// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
+		// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
+		// for creating the new block.
+		setAttributes( { url: value } );
+		setIsEditingURL( false );
+	}, [] );
+
 	const blockProps = useBlockProps();
 
 	if ( fetching ) {
@@ -230,16 +238,12 @@ const EmbedEdit = ( props ) => {
 		( WP_EMBED_TYPE === type &&
 			! NOT_PREVIEWABLE_WP_EMBED_PROVIDERS.includes( providerNameSlug ) );
 
-	const bottomSheetLabel = WP_EMBED_TYPE === type ? 'WordPress' : title;
+	const linkLabel = WP_EMBED_TYPE === type ? 'WordPress' : title;
 
 	return (
 		<>
 			{ showEmbedPlaceholder ? (
 				<>
-					<EmbedControls
-						showEditButton={ cannotEmbed }
-						switchBackToURLInput={ () => setIsEditingURL( true ) }
-					/>
 					<View { ...blockProps }>
 						<EmbedPlaceholder
 							icon={ icon }
@@ -256,18 +260,22 @@ const EmbedEdit = ( props ) => {
 									url,
 								] );
 							} }
+							openEmbedLinkSettings={ () =>
+								setShowEmbedBottomSheet( true )
+							}
 						/>
 					</View>
 				</>
 			) : (
 				<>
 					<EmbedControls
-						showEditButton={ preview && ! cannotEmbed }
 						themeSupportsResponsive={ themeSupportsResponsive }
 						blockSupportsResponsive={ responsive }
 						allowResponsive={ allowResponsive }
 						toggleResponsive={ toggleResponsive }
-						switchBackToURLInput={ () => setIsEditingURL( true ) }
+						url={ url }
+						linkLabel={ linkLabel }
+						onEditURL={ onEditURL }
 					/>
 					<View { ...blockProps }>
 						<EmbedPreview
@@ -289,18 +297,15 @@ const EmbedEdit = ( props ) => {
 					</View>
 				</>
 			) }
-			<EmbedBottomSheet
+			<EmbedLinkSettings
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus
 				value={ url }
-				label={ bottomSheetLabel }
+				label={ linkLabel }
 				isVisible={ showEmbedBottomSheet }
 				onClose={ () => setShowEmbedBottomSheet( false ) }
-				onSubmit={ ( value ) => {
-					// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
-					// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
-					// for creating the new block.
-					setAttributes( { url: value } );
-					setIsEditingURL( false );
-				} }
+				onSubmit={ onEditURL }
+				withBottomSheet
 			/>
 		</>
 	);