Merge branch 'trunk' into rnmobile/feature/drag-and-drop

WordPress · Apr 20, 2022 · 951103c · 951103c
2 parents 2ff70a4 + 1e06cba
commit 951103c
Show file tree

Hide file tree

Showing 55 changed files with 331 additions and 149 deletions.
diff --git a/docs/reference-guides/block-api/block-patterns.md b/docs/reference-guides/block-api/block-patterns.md
@@ -27,6 +27,7 @@ The properties available for block patterns are:
 -   `keywords` (optional): An array of aliases or keywords that help users discover the pattern while searching.
 -   `viewportWidth` (optional): An integer specifying the intended width of the pattern to allow for a scaled preview of the pattern in the inserter.
 -   `blockTypes` (optional): An array of block types that the pattern is intended to be used with. Each value needs to be the declared block's `name`.
+-   `inserter` (optional): By default, all patterns will appear in the inserter. To hide a pattern so that it can only be inserted programmatically, set the `inserter` to `false`.
 
 The following code sample registers a block pattern named 'my-plugin/my-awesome-pattern':
 

diff --git a/lib/compat/wordpress-6.0/blocks.php b/lib/compat/wordpress-6.0/blocks.php
@@ -293,11 +293,10 @@ function gutenberg_block_type_metadata_multiple_view_scripts( $metadata ) {
 	function build_comment_query_vars_from_block( $block ) {
 
 		$comment_args = array(
-			'orderby'                   => 'comment_date_gmt',
-			'order'                     => 'ASC',
-			'status'                    => 'approve',
-			'no_found_rows'             => false,
-			'update_comment_meta_cache' => false, // We lazy-load comment meta for performance.
+			'orderby'       => 'comment_date_gmt',
+			'order'         => 'ASC',
+			'status'        => 'approve',
+			'no_found_rows' => false,
 		);
 
 		if ( ! empty( $block->context['postId'] ) ) {

diff --git a/lib/compat/wordpress-6.0/class-wp-rest-block-patterns-controller.php b/lib/compat/wordpress-6.0/class-wp-rest-block-patterns-controller.php
@@ -117,6 +117,7 @@ public function prepare_item_for_response( $item, $request ) {
 			'categories'    => 'categories',
 			'keywords'      => 'keywords',
 			'content'       => 'content',
+			'inserter'      => 'inserter',
 		);
 		$data   = array();
 		foreach ( $keys as $item_key => $rest_key ) {
@@ -192,6 +193,12 @@ public function get_item_schema() {
 					'readonly'    => true,
 					'context'     => array( 'view', 'edit', 'embed' ),
 				),
+				'inserter'       => array(
+					'description' => __( 'Determines whether the pattern is visible in inserter.', 'gutenberg' ),
+					'type'        => 'boolean',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
 			),
 		);
 

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -9,7 +9,6 @@ import classnames from 'classnames';
  */
 import { useState, useLayoutEffect } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { ENTER, SPACE } from '@wordpress/keycodes';
 import {
 	Button,
 	__experimentalText as Text,
@@ -113,18 +112,8 @@ function BlockStyles( {
 							onFocus={ () => styleItemHandler( style ) }
 							onMouseLeave={ () => styleItemHandler( null ) }
 							onBlur={ () => styleItemHandler( null ) }
-							onKeyDown={ ( event ) => {
-								if (
-									ENTER === event.keyCode ||
-									SPACE === event.keyCode
-								) {
-									event.preventDefault();
-									onSelectStylePreview( style );
-								}
-							} }
 							onClick={ () => onSelectStylePreview( style ) }
-							role="button"
-							tabIndex="0"
+							aria-current={ activeStyle.name === style.name }
 						>
 							<Text
 								as="span"

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
@@ -60,82 +60,109 @@ export function getValuesFromColors( colors = [] ) {
  */
 
 /**
- * SVG and stylesheet needed for rendering the duotone filter.
+ * Stylesheet for rendering the duotone filter.
  *
  * @param {Object} props          Duotone props.
  * @param {string} props.selector Selector to apply the filter to.
  * @param {string} props.id       Unique id for this duotone filter.
- * @param {Values} props.values   R, G, B, and A values to filter with.
  *
  * @return {WPElement} Duotone element.
  */
-function DuotoneFilter( { selector, id, values } ) {
-	const stylesheet = `
+function DuotoneStylesheet( { selector, id } ) {
+	const css = `
 ${ selector } {
 	filter: url( #${ id } );
 }
 `;
+	return <style>{ css }</style>;
+}
 
+/**
+ * SVG for rendering the duotone filter.
+ *
+ * @param {Object} props        Duotone props.
+ * @param {string} props.id     Unique id for this duotone filter.
+ * @param {Values} props.values R, G, B, and A values to filter with.
+ *
+ * @return {WPElement} Duotone element.
+ */
+function DuotoneFilter( { id, values } ) {
 	return (
-		<>
-			<SVG
-				xmlnsXlink="http://www.w3.org/1999/xlink"
-				viewBox="0 0 0 0"
-				width="0"
-				height="0"
-				focusable="false"
-				role="none"
-				style={ {
-					visibility: 'hidden',
-					position: 'absolute',
-					left: '-9999px',
-					overflow: 'hidden',
-				} }
-			>
-				<defs>
-					<filter id={ id }>
-						<feColorMatrix
-							// Use sRGB instead of linearRGB so transparency looks correct.
-							colorInterpolationFilters="sRGB"
-							type="matrix"
-							// Use perceptual brightness to convert to grayscale.
-							values="
-								.299 .587 .114 0 0
-								.299 .587 .114 0 0
-								.299 .587 .114 0 0
-								.299 .587 .114 0 0
-							"
+		<SVG
+			xmlnsXlink="http://www.w3.org/1999/xlink"
+			viewBox="0 0 0 0"
+			width="0"
+			height="0"
+			focusable="false"
+			role="none"
+			style={ {
+				visibility: 'hidden',
+				position: 'absolute',
+				left: '-9999px',
+				overflow: 'hidden',
+			} }
+		>
+			<defs>
+				<filter id={ id }>
+					<feColorMatrix
+						// Use sRGB instead of linearRGB so transparency looks correct.
+						colorInterpolationFilters="sRGB"
+						type="matrix"
+						// Use perceptual brightness to convert to grayscale.
+						values="
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+							.299 .587 .114 0 0
+						"
+					/>
+					<feComponentTransfer
+						// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
+						colorInterpolationFilters="sRGB"
+					>
+						<feFuncR
+							type="table"
+							tableValues={ values.r.join( ' ' ) }
+						/>
+						<feFuncG
+							type="table"
+							tableValues={ values.g.join( ' ' ) }
+						/>
+						<feFuncB
+							type="table"
+							tableValues={ values.b.join( ' ' ) }
 						/>
-						<feComponentTransfer
-							// Use sRGB instead of linearRGB to be consistent with how CSS gradients work.
-							colorInterpolationFilters="sRGB"
-						>
-							<feFuncR
-								type="table"
-								tableValues={ values.r.join( ' ' ) }
-							/>
-							<feFuncG
-								type="table"
-								tableValues={ values.g.join( ' ' ) }
-							/>
-							<feFuncB
-								type="table"
-								tableValues={ values.b.join( ' ' ) }
-							/>
-							<feFuncA
-								type="table"
-								tableValues={ values.a.join( ' ' ) }
-							/>
-						</feComponentTransfer>
-						<feComposite
-							// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
-							in2="SourceGraphic"
-							operator="in"
+						<feFuncA
+							type="table"
+							tableValues={ values.a.join( ' ' ) }
 						/>
-					</filter>
-				</defs>
-			</SVG>
-			<style dangerouslySetInnerHTML={ { __html: stylesheet } } />
+					</feComponentTransfer>
+					<feComposite
+						// Re-mask the image with the original transparency since the feColorMatrix above loses that information.
+						in2="SourceGraphic"
+						operator="in"
+					/>
+				</filter>
+			</defs>
+		</SVG>
+	);
+}
+
+/**
+ * SVG and stylesheet needed for rendering the duotone filter.
+ *
+ * @param {Object} props          Duotone props.
+ * @param {string} props.selector Selector to apply the filter to.
+ * @param {string} props.id       Unique id for this duotone filter.
+ * @param {Values} props.values   R, G, B, and A values to filter with.
+ *
+ * @return {WPElement} Duotone element.
+ */
+function InlineDuotone( { selector, id, values } ) {
+	return (
+		<>
+			<DuotoneFilter id={ id } values={ values } />
+			<DuotoneStylesheet id={ id } selector={ selector } />
 		</>
 	);
 }
@@ -321,7 +348,7 @@ const withDuotoneStyles = createHigherOrderComponent(
 			<>
 				{ element &&
 					createPortal(
-						<DuotoneFilter
+						<InlineDuotone
 							selector={ selectorsGroup }
 							id={ id }
 							values={ getValuesFromColors( values ) }
@@ -335,6 +362,15 @@ const withDuotoneStyles = createHigherOrderComponent(
 	'withDuotoneStyles'
 );
 
+export function PresetDuotoneFilter( { preset } ) {
+	return (
+		<DuotoneFilter
+			id={ `wp-duotone-${ preset.slug }` }
+			values={ getValuesFromColors( preset.colors ) }
+		/>
+	);
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/editor/duotone/add-attributes',

diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
@@ -19,3 +19,4 @@ export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
+export { PresetDuotoneFilter } from './duotone';
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
@@ -3,6 +3,7 @@
  */
 import './hooks';
 export {
+	PresetDuotoneFilter as __unstablePresetDuotoneFilter,
 	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,
 	useBorderProps as __experimentalUseBorderProps,
 	getColorClassesAndStyles as __experimentalGetColorClassesAndStyles,

diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json
@@ -41,6 +41,16 @@
 				"padding": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"__experimentalLayout": true
 	}
 }
diff --git a/packages/block-library/src/comment-template/hooks.js b/packages/block-library/src/comment-template/hooks.js
@@ -7,6 +7,9 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 import apiFetch from '@wordpress/api-fetch';
 
+// This is limited by WP REST API
+const MAX_COMMENTS_PER_PAGE = 100;
+
 /**
  * Return an object with the query args needed to fetch the default page of
  * comments.
@@ -29,14 +32,23 @@ export const useCommentQueryArgs = ( { postId } ) => {
 
 	// Get the Discussion settings that may be needed to query the comments.
 	const {
-		commentsPerPage: perPage,
+		pageComments,
+		commentsPerPage,
 		defaultCommentsPage: defaultPage,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { __experimentalDiscussionSettings } = getSettings();
 		return __experimentalDiscussionSettings;
 	} );
 
+	// WP REST API doesn't allow fetching more than max items limit set per single page of data.
+	// As for the editor performance is more important than completeness of data and fetching only the
+	// max allowed for single page should be enough for the purpose of design and laying out the page.
+	// Fetching over the limit would return an error here but would work with backend query.
+	const perPage = pageComments
+		? Math.min( commentsPerPage, MAX_COMMENTS_PER_PAGE )
+		: MAX_COMMENTS_PER_PAGE;
+
 	// Get the number of the default page.
 	const page = useDefaultPageIndex( {
 		defaultPage,

diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js
@@ -7,6 +7,7 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
+	Warning,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
@@ -53,6 +54,7 @@ export default function QueryPaginationEdit( {
 			].includes( innerBlock.name );
 		} );
 	}, [] );
+
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -63,6 +65,27 @@ export default function QueryPaginationEdit( {
 		],
 		__experimentalLayout: usedLayout,
 	} );
+
+	// Get the Discussion settings
+	const pageComments = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings?.pageComments;
+	}, [] );
+
+	// If paging comments is not enabled in the Discussion Settings then hide the pagination
+	// controls. We don't want to remove them from the template so that when the user enables
+	// paging comments, the controls will be visible.
+	if ( ! pageComments ) {
+		return (
+			<Warning>
+				{ __(
+					'Comments Pagination block: paging comments is disabled in the Discussion Settings'
+				) }
+			</Warning>
+		);
+	}
+
 	return (
 		<>
 			{ hasNextPreviousBlocks && (