@wordpress/block-library 9.8.4 → 9.9.0

package/src/categories/index.php

@@ -49,7 +49,7 @@ function render_block_core_categories( $attributes, $content, $block ) {
 
 		$show_label     = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
 		$default_label  = $taxonomy->label;
-		$label_text     = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+		$label_text     = ! empty( $attributes['label'] ) ? wp_kses_post( $attributes['label'] ) : $default_label;
 		$wrapper_markup = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
 		$items_markup   = wp_dropdown_categories( $args );
 		$type           = 'dropdown';

package/src/comment-author-name/index.js

@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/comment-content/index.js

@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/comment-date/index.js

@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/comment-edit-link/index.js

@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/comment-reply-link/index.js

@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	icon,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

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

@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Next Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,

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

@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

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

@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Previous Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,

package/src/comments-title/index.js

@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/cover/edit/index.js

@@ -18,6 +18,7 @@ import {
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -278,6 +279,9 @@ function CoverEdit( {
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
+	const blockEditingMode = useBlockEditingMode();
+	const hasNonContentControls = blockEditingMode === 'default';
+
 	const [ resizeListener, { height, width } ] = useResizeObserver();
 	const resizableBoxDimensions = useMemo( () => {
 		return {
@@ -447,7 +451,7 @@ function CoverEdit( {
 			<>
 				{ blockControls }
 				{ inspectorControls }
-				{ isSelected && (
+				{ hasNonContentControls && isSelected && (
 					<ResizableCoverPopover { ...resizableCoverProps } />
 				) }
 				<TagName
@@ -576,7 +580,7 @@ function CoverEdit( {
 				/>
 				<div { ...innerBlocksProps } />
 			</TagName>
-			{ isSelected && (
+			{ hasNonContentControls && isSelected && (
 				<ResizableCoverPopover { ...resizableCoverProps } />
 			) }
 		</>

package/src/editor.scss

@@ -55,7 +55,6 @@
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
 @import "./post-comments-form/editor.scss";
-@import "./post-content/editor.scss";
 @import "./editor-elements.scss";
 
 :root .editor-styles-wrapper {

package/src/file/block.json

@@ -16,7 +16,8 @@
 			"role": "local"
 		},
 		"href": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"fileId": {
 			"type": "string",
@@ -27,13 +28,15 @@
 		"fileName": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "a:not([download])"
+			"selector": "a:not([download])",
+			"role": "content"
 		},
 		"textLinkHref": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a:not([download])",
-			"attribute": "href"
+			"attribute": "href",
+			"role": "content"
 		},
 		"textLinkTarget": {
 			"type": "string",
@@ -48,7 +51,8 @@
 		"downloadButtonText": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "a[download]"
+			"selector": "a[download]",
+			"role": "content"
 		},
 		"displayPreview": {
 			"type": "boolean"

package/src/group/editor.scss

@@ -39,9 +39,9 @@
 	&::after {
 		content: "";
 		display: flex;
-		flex: 1 0 $grid-unit-60;
+		flex: 1 0 $button-size-next-default-40px;
 		pointer-events: none;
-		min-height: $grid-unit-60 - $border-width - $border-width;
+		min-height: $button-size-next-default-40px - $border-width - $border-width;
 		border: $border-width dashed currentColor;
 	}
 

package/src/image/edit.js

@@ -7,9 +7,9 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { isBlobURL, createBlobURL } from '@wordpress/blob';
-import { store as blocksStore, createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockBindingsSource } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockIcon,
 	useBlockProps,
@@ -28,7 +28,6 @@ import { useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { unlock } from '../lock-unlock';
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import Image from './image';
 import { isValidFileType } from './utils';
@@ -113,7 +112,6 @@ export function ImageEdit( {
 
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
-	const registry = useRegistry();
 	const containerRef = useRef();
 	// Only observe the max width from the parent container when the parent layout is not flex nor grid.
 	// This won't work for them because the container width changes with the image.
@@ -373,15 +371,15 @@ export function ImageEdit( {
 				return {};
 			}
 
-			const blockBindingsSource = unlock(
-				select( blocksStore )
-			).getBlockBindingsSource( metadata?.bindings?.url?.source );
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
 
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
 					! blockBindingsSource?.canUserEditValue?.( {
-						registry,
+						select,
 						context,
 						args: metadata?.bindings?.url?.args,
 					} ),

package/src/image/image.js

@@ -17,7 +17,7 @@ import {
 	Placeholder,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockControls,
 	InspectorControls,
@@ -34,7 +34,7 @@ import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { getFilename } from '@wordpress/url';
-import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -134,7 +134,6 @@ export default function Image( {
 	const numericWidth = width ? parseInt( width, 10 ) : undefined;
 	const numericHeight = height ? parseInt( height, 10 ) : undefined;
 
-	const registry = useRegistry();
 	const imageRef = useRef();
 	const { allowResize = true } = context;
 	const { getBlock, getSettings } = useSelect( blockEditorStore );
@@ -477,7 +476,6 @@ export default function Image( {
 			if ( ! isSingleSelected ) {
 				return {};
 			}
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			const {
 				url: urlBinding,
 				alt: altBinding,
@@ -497,7 +495,7 @@ export default function Image( {
 				lockUrlControls:
 					!! urlBinding &&
 					! urlBindingSource?.canUserEditValue?.( {
-						registry,
+						select,
 						context,
 						args: urlBinding?.args,
 					} ),
@@ -512,7 +510,7 @@ export default function Image( {
 				lockAltControls:
 					!! altBinding &&
 					! altBindingSource?.canUserEditValue?.( {
-						registry,
+						select,
 						context,
 						args: altBinding?.args,
 					} ),
@@ -526,7 +524,7 @@ export default function Image( {
 				lockTitleControls:
 					!! titleBinding &&
 					! titleBindingSource?.canUserEditValue?.( {
-						registry,
+						select,
 						context,
 						args: titleBinding?.args,
 					} ),

package/src/post-navigation-link/block.json

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

package/src/post-navigation-link/variations.js

@@ -15,6 +15,12 @@ const variations = [
 		icon: next,
 		attributes: { type: 'next' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Next post',
+				arrow: 'arrow',
+			},
+		},
 	},
 	{
 		name: 'post-previous',
@@ -25,6 +31,12 @@ const variations = [
 		icon: previous,
 		attributes: { type: 'previous' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Previous post',
+				arrow: 'arrow',
+			},
+		},
 	},
 ];
 

package/src/post-time-to-read/index.js

@@ -12,6 +12,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/query/block.json

@@ -5,6 +5,7 @@
 	"title": "Query Loop",
 	"category": "theme",
 	"description": "An advanced block that allows displaying post types based on different query parameters and visual configurations.",
+	"keywords": [ "posts", "list", "blog", "blogs", "custom post types" ],
 	"textdomain": "default",
 	"attributes": {
 		"queryId": {

package/src/query/edit/inspector-controls/index.js

@@ -321,7 +321,7 @@ export default function QueryInspectorControls( props ) {
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
-						label={ __( 'Items' ) }
+						label={ __( 'Items per page' ) }
 						hasValue={ () => perPage > 0 }
 					>
 						<PerPageControl
@@ -341,7 +341,7 @@ export default function QueryInspectorControls( props ) {
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
-						label={ __( 'Max Pages to Show' ) }
+						label={ __( 'Max pages to show' ) }
 						hasValue={ () => pages > 0 }
 						onDeselect={ () => setQuery( { pages: 0 } ) }
 					>

package/src/query/edit/inspector-controls/pages-control.js

@@ -8,7 +8,7 @@ export const PagesControl = ( { pages, onChange } ) => {
 	return (
 		<NumberControl
 			__next40pxDefaultSize
-			label={ __( 'Max pages' ) }
+			label={ __( 'Max pages to show' ) }
 			value={ pages }
 			min={ 0 }
 			onChange={ ( newPages ) => {

package/src/query/edit/inspector-controls/per-page-control.js

@@ -12,7 +12,7 @@ const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
 		<RangeControl
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
-			label={ __( 'Posts per page' ) }
+			label={ __( 'Items per page' ) }
 			min={ MIN_POSTS_PER_PAGE }
 			max={ MAX_POSTS_PER_PAGE }
 			onChange={ ( newPerPage ) => {

package/src/query-no-results/block.json

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

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

@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/query-title/block.json

@@ -29,6 +29,11 @@
 			"default": true
 		}
 	},
+	"example": {
+		"attributes": {
+			"type": "search"
+		}
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,

package/src/site-logo/edit.js

@@ -564,6 +564,7 @@ export default function LogoEdit( {
 					iconId={ siteIconId }
 					canUserEdit={ canUserEdit }
 				/>
+				{ canUserEdit && <DropZone onFilesDrop={ onFilesDrop } /> }
 			</>
 		);
 	}

package/src/social-links/editor.scss

@@ -101,19 +101,10 @@
 .wp-block-social-links .block-list-appender {
 	position: static; // display inline.
 
-	.block-editor-button-block-appender.components-button.components-button {
-		padding: $grid-unit-10 - 2px;
-	}
-}
-
-.wp-block-social-links {
-	&.has-small-icon-size .block-editor-button-block-appender.components-button.components-button {
+	.block-editor-button-block-appender {
+		height: 1.5em;
+		width: 1.5em;
+		font-size: inherit;
 		padding: 0;
 	}
-	&.has-large-icon-size .block-editor-button-block-appender.components-button.components-button {
-		padding: $grid-unit-20 - 2px;
-	}
-	&.has-huge-icon-size .block-editor-button-block-appender.components-button.components-button {
-		padding: $grid-unit-30 - 1px;
-	}
 }

package/src/table-of-contents/block.json

@@ -62,6 +62,57 @@
 			}
 		}
 	},
-	"example": {},
+	"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"
 }

package/src/term-description/index.js

@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/build-style/post-content/editor-rtl.css

@@ -1,95 +0,0 @@
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Colors
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Editor widths.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Breakpoint mixins
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-.wp-block-post-content.wp-block-post-content {
-  -webkit-user-select: none;
-          user-select: none;
-}