[pull] trunk from WordPress:trunk

packages/block-editor/src/components/background-image-control/index.js

@@ -24,6 +24,7 @@ import {
 	Placeholder,
 	Spinner,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -378,6 +379,9 @@ function BackgroundImageControls( {
 					/>
 				}
 				variant="secondary"
+				renderToggle={ ( props ) => (
+					<Button { ...props } __next40pxDefaultSize />
+				) }
 				onError={ onUploadError }
 				onReset={ () => {
 					closeAndFocus();

packages/block-editor/src/components/background-image-control/style.scss

@@ -23,7 +23,10 @@
 
 	.components-dropdown {
 		display: block;
-		height: 36px;
+
+		.block-editor-global-styles-background-panel__dropdown-toggle {
+			height: 40px;
+		}
 	}
 }
 
@@ -44,7 +47,6 @@
 
 	.components-dropdown {
 		display: block;
-		height: 36px;
 	}
 
 	button.components-button {

packages/block-editor/src/components/media-replace-flow/README.md

@@ -98,3 +98,10 @@ If passed, children are rendered inside the dropdown.
 -   Required: No
 
 If passed, children are rendered inside the dropdown. If a function is provided for this prop, it will receive an object with the `onClose` prop as an argument.
+
+### renderToggle
+
+-   Type: `func`
+-   Required: No
+
+If passed, it will be used to render the provided button instead of the default one. It should accept and pass through `button` props to a `button` element.

packages/block-editor/src/components/media-replace-flow/index.js

@@ -1,16 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useRef } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
 	FormFileUpload,
 	NavigableMenu,
 	MenuItem,
-	ToolbarButton,
 	Dropdown,
 	withFilters,
+	ToolbarButton,
 } from '@wordpress/components';
 import { useSelect, withDispatch } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
@@ -55,9 +54,9 @@ const MediaReplaceFlow = ( {
 	addToGallery,
 	handleUpload = true,
 	popoverProps,
+	renderToggle,
 } ) => {
 	const { getSettings } = useSelect( blockEditorStore );
-	const editMediaButtonRef = useRef();
 	const errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;
 
 	const onUploadError = ( message ) => {
@@ -133,17 +132,27 @@ const MediaReplaceFlow = ( {
 		<Dropdown
 			popoverProps={ popoverProps }
 			contentClassName="block-editor-media-replace-flow__options"
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ToolbarButton
-					ref={ editMediaButtonRef }
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ onToggle }
-					onKeyDown={ openOnArrowDown }
-				>
-					{ name }
-				</ToolbarButton>
-			) }
+			renderToggle={ ( { isOpen, onToggle } ) => {
+				if ( renderToggle ) {
+					return renderToggle( {
+						'aria-expanded': isOpen,
+						'aria-haspopup': 'true',
+						onClick: onToggle,
+						onKeyDown: openOnArrowDown,
+						children: name,
+					} );
+				}
+				return (
+					<ToolbarButton
+						aria-expanded={ isOpen }
+						aria-haspopup="true"
+						onClick={ onToggle }
+						onKeyDown={ openOnArrowDown }
+					>
+						{ name }
+					</ToolbarButton>
+				);
+			} }
 			renderContent={ ( { onClose } ) => (
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
@@ -222,7 +231,6 @@ const MediaReplaceFlow = ( {
 								showSuggestions={ false }
 								onChange={ ( { url } ) => {
 									onSelectURL( url );
-									editMediaButtonRef.current.focus();
 								} }
 							/>
 						</form>

packages/block-library/src/post-comments-form/block.json

@@ -56,5 +56,10 @@
 		"wp-block-post-comments-form",
 		"wp-block-buttons",
 		"wp-block-button"
-	]
+	],
+	"example": {
+		"attributes": {
+			"textAlign": "center"
+		}
+	}
 }

packages/block-library/src/post-comments-link/block.json

@@ -42,6 +42,13 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
-	}
+	},
+	"style": "wp-block-post-comments-link"
 }

packages/block-library/src/post-comments-link/style.scss

@@ -0,0 +1,4 @@
+.wp-block-post-comments-link {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

packages/block-library/src/post-navigation-link/block.json

@@ -34,12 +34,6 @@
 			"default": ""
 		}
 	},
-	"example": {
-		"attributes": {
-			"label": "Next post",
-			"arrow": "arrow"
-		}
-	},
 	"usesContext": [ "postType" ],
 	"supports": {
 		"reusable": false,

packages/block-library/src/post-navigation-link/index.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -12,6 +17,12 @@ export { metadata, name };
 export const settings = {
 	edit,
 	variations,
+	example: {
+		attributes: {
+			label: __( 'Next post' ),
+			arrow: 'arrow',
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/post-navigation-link/variations.js

@@ -17,7 +17,7 @@ const variations = [
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: 'Next post',
+				label: __( 'Next post' ),
 				arrow: 'arrow',
 			},
 		},
@@ -33,7 +33,7 @@ const variations = [
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: 'Previous post',
+				label: __( 'Previous post' ),
 				arrow: 'arrow',
 			},
 		},

packages/block-library/src/post-template/block.json

@@ -50,8 +50,8 @@
 			},
 			"__experimentalDefaultControls": {
 				"blockGap": true,
-				"padding" : false,
-				"margin" : false
+				"padding": false,
+				"margin": false
 			}
 		},
 		"interactivity": {

packages/block-library/src/query-no-results/block.json

@@ -8,16 +8,6 @@
 	"ancestor": [ "core/query" ],
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
-	"example": {
-		"innerBlocks": [
-			{
-				"name": "core/paragraph",
-				"attributes": {
-					"content": "No posts were found."
-				}
-			}
-		]
-	},
 	"supports": {
 		"align": true,
 		"reusable": false,

packages/block-library/src/query-no-results/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { loop as icon } from '@wordpress/icons';
 
 /**
@@ -18,6 +19,16 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: __( 'No posts were found.' ),
+				},
+			},
+		],
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/style.scss

@@ -37,6 +37,7 @@
 @import "./post-author-biography/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-content/style.scss";
+@import "./post-comments-link/style.scss";
 @import "./post-date/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";

packages/block-library/src/table-of-contents/block.json

@@ -62,57 +62,5 @@
 			}
 		}
 	},
-	"example": {
-		"innerBlocks": [
-			{
-				"name": "core/heading",
-				"attributes": {
-					"level": 2,
-					"content": "Heading"
-				}
-			},
-			{
-				"name": "core/heading",
-				"attributes": {
-					"level": 3,
-					"content": "Subheading"
-				}
-			},
-			{
-				"name": "core/heading",
-				"attributes": {
-					"level": 2,
-					"content": "Heading"
-				}
-			},
-			{
-				"name": "core/heading",
-				"attributes": {
-					"level": 3,
-					"content": "Subheading"
-				}
-			}
-		],
-		"attributes": {
-			"headings": [
-				{
-					"content": "Heading",
-					"level": 2
-				},
-				{
-					"content": "Subheading",
-					"level": 3
-				},
-				{
-					"content": "Heading",
-					"level": 2
-				},
-				{
-					"content": "Subheading",
-					"level": 3
-				}
-			]
-		}
-	},
 	"style": "wp-block-table-of-contents"
 }

packages/block-library/src/table-of-contents/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { tableOfContents as icon } from '@wordpress/icons';
 
 /**
@@ -19,6 +20,58 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/heading',
+				attributes: {
+					level: 2,
+					content: __( 'Heading' ),
+				},
+			},
+			{
+				name: 'core/heading',
+				attributes: {
+					level: 3,
+					content: __( 'Subheading' ),
+				},
+			},
+			{
+				name: 'core/heading',
+				attributes: {
+					level: 2,
+					content: __( 'Heading' ),
+				},
+			},
+			{
+				name: 'core/heading',
+				attributes: {
+					level: 3,
+					content: __( 'Subheading' ),
+				},
+			},
+		],
+		attributes: {
+			headings: [
+				{
+					content: __( 'Heading' ),
+					level: 2,
+				},
+				{
+					content: __( 'Subheading' ),
+					level: 3,
+				},
+				{
+					content: __( 'Heading' ),
+					level: 2,
+				},
+				{
+					content: __( 'Subheading' ),
+					level: 3,
+				},
+			],
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );