@wordpress/block-library 7.0.2 → 7.1.0

package/build-style/style.css

@@ -264,8 +264,9 @@
 
 .wp-block-code code {
   display: block;
-  white-space: pre-wrap;
+  font-family: inherit;
   overflow-wrap: break-word;
+  white-space: pre-wrap;
 }
 
 .wp-block-columns {
@@ -445,18 +446,14 @@
   background-color: transparent;
 }
 .wp-block-cover-image.has-background-dim::before,
-.wp-block-cover-image .has-background-dim::before,
-.wp-block-cover.has-background-dim::before,
-.wp-block-cover .has-background-dim::before {
+.wp-block-cover.has-background-dim::before {
   content: "";
   background-color: inherit;
 }
 .wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before,
-.wp-block-cover-image .has-background-dim:not(.has-background-gradient)::before,
 .wp-block-cover-image .wp-block-cover__background,
 .wp-block-cover-image .wp-block-cover__gradient-background,
 .wp-block-cover.has-background-dim:not(.has-background-gradient)::before,
-.wp-block-cover .has-background-dim:not(.has-background-gradient)::before,
 .wp-block-cover .wp-block-cover__background,
 .wp-block-cover .wp-block-cover__gradient-background {
   position: absolute;
@@ -1367,7 +1364,8 @@ h6.has-background {
   margin-top: 0.5em;
   margin-bottom: 1em;
 }
-.wp-block-image.is-style-rounded img {
+.wp-block-image.is-style-rounded img,
+.wp-block-image .is-style-rounded img {
   border-radius: 9999px;
 }
 .wp-block-image.is-style-circle-mask img {
@@ -3098,11 +3096,15 @@ ul.wp-block-rss.is-grid li {
   margin-left: 5px;
   text-decoration: none;
 }
+.wp-block-tag-cloud.is-style-outline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1ch;
+}
 .wp-block-tag-cloud.is-style-outline a {
   border: 1px solid currentColor;
   font-size: unset !important;
-  margin-bottom: 1ch;
-  margin-right: 1ch;
+  margin-right: 0;
   padding: 1ch 2ch;
   text-decoration: none !important;
 }
@@ -3394,7 +3396,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/build-style/tag-cloud/style-rtl.css

@@ -90,11 +90,15 @@
   margin-right: 5px;
   text-decoration: none;
 }
+.wp-block-tag-cloud.is-style-outline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1ch;
+}
 .wp-block-tag-cloud.is-style-outline a {
   border: 1px solid currentColor;
   font-size: unset !important;
-  margin-bottom: 1ch;
-  margin-left: 1ch;
+  margin-left: 0;
   padding: 1ch 2ch;
   text-decoration: none !important;
 }

package/build-style/tag-cloud/style.css

@@ -90,11 +90,15 @@
   margin-left: 5px;
   text-decoration: none;
 }
+.wp-block-tag-cloud.is-style-outline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1ch;
+}
 .wp-block-tag-cloud.is-style-outline a {
   border: 1px solid currentColor;
   font-size: unset !important;
-  margin-bottom: 1ch;
-  margin-right: 1ch;
+  margin-right: 0;
   padding: 1ch 2ch;
   text-decoration: none !important;
 }

package/build-style/theme-rtl.css

@@ -86,9 +86,6 @@
 .wp-block-code {
   border: 1px solid #ccc;
   border-radius: 4px;
-}
-
-.wp-block-code > code {
   font-family: Menlo, Consolas, monaco, monospace;
   padding: 0.8em 1em;
 }

package/build-style/theme.css

@@ -86,9 +86,6 @@
 .wp-block-code {
   border: 1px solid #ccc;
   border-radius: 4px;
-}
-
-.wp-block-code > code {
   font-family: Menlo, Consolas, monaco, monospace;
   padding: 0.8em 1em;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.0.2",
+	"version": "7.1.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.3.1",
-		"@wordpress/api-fetch": "^6.0.1",
-		"@wordpress/autop": "^3.3.1",
-		"@wordpress/blob": "^3.3.1",
-		"@wordpress/block-editor": "^8.2.0",
-		"@wordpress/blocks": "^11.2.2",
-		"@wordpress/components": "^19.5.0",
-		"@wordpress/compose": "^5.1.2",
-		"@wordpress/core-data": "^4.1.2",
-		"@wordpress/data": "^6.3.0",
-		"@wordpress/date": "^4.3.1",
-		"@wordpress/deprecated": "^3.3.1",
-		"@wordpress/dom": "^3.3.2",
-		"@wordpress/element": "^4.1.1",
-		"@wordpress/hooks": "^3.3.1",
-		"@wordpress/html-entities": "^3.3.1",
-		"@wordpress/i18n": "^4.3.1",
-		"@wordpress/icons": "^7.0.1",
-		"@wordpress/keycodes": "^3.3.1",
-		"@wordpress/notices": "^3.3.2",
-		"@wordpress/primitives": "^3.1.1",
-		"@wordpress/reusable-blocks": "^3.1.3",
-		"@wordpress/rich-text": "^5.1.2",
-		"@wordpress/server-side-render": "^3.1.3",
-		"@wordpress/url": "^3.4.1",
-		"@wordpress/viewport": "^4.1.2",
+		"@wordpress/a11y": "^3.4.0",
+		"@wordpress/api-fetch": "^6.1.0",
+		"@wordpress/autop": "^3.4.0",
+		"@wordpress/blob": "^3.4.0",
+		"@wordpress/block-editor": "^8.3.0",
+		"@wordpress/blocks": "^11.3.0",
+		"@wordpress/components": "^19.6.0",
+		"@wordpress/compose": "^5.2.0",
+		"@wordpress/core-data": "^4.2.0",
+		"@wordpress/data": "^6.4.0",
+		"@wordpress/date": "^4.4.0",
+		"@wordpress/deprecated": "^3.4.0",
+		"@wordpress/dom": "^3.4.0",
+		"@wordpress/element": "^4.2.0",
+		"@wordpress/hooks": "^3.4.0",
+		"@wordpress/html-entities": "^3.4.0",
+		"@wordpress/i18n": "^4.4.0",
+		"@wordpress/icons": "^8.0.0",
+		"@wordpress/keycodes": "^3.4.0",
+		"@wordpress/notices": "^3.4.0",
+		"@wordpress/primitives": "^3.2.0",
+		"@wordpress/reusable-blocks": "^3.2.0",
+		"@wordpress/rich-text": "^5.2.0",
+		"@wordpress/server-side-render": "^3.2.0",
+		"@wordpress/url": "^3.5.0",
+		"@wordpress/viewport": "^4.2.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -67,8 +67,12 @@
 		"micromodal": "^0.4.10",
 		"moment": "^2.22.1"
 	},
+	"peerDependencies": {
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4566ac290359553d04de4eb574545309343f790b"
+	"gitHead": "c37fd7edbc3e379540d7b24fce75a6f640a434ae"
 }

package/src/audio/edit.js

@@ -110,13 +110,13 @@ function AudioEdit( {
 
 	function onSelectAudio( media ) {
 		if ( ! media || ! media.url ) {
-			// in this case there was an error and we should continue in the editing state
-			// previous attributes should be removed because they may be temporary blob urls
+			// In this case there was an error and we should continue in the editing state
+			// previous attributes should be removed because they may be temporary blob urls.
 			setAttributes( { src: undefined, id: undefined } );
 			return;
 		}
-		// sets the block's attribute and updates the edit component from the
-		// selected media, then switches off the editing UI
+		// Sets the block's attribute and updates the edit component from the
+		// selected media, then switches off the editing UI.
 		setAttributes( { src: media.url, id: media.id } );
 	}
 

package/src/audio/edit.native.js

@@ -88,13 +88,13 @@ function AudioEdit( {
 
 	function onSelectAudio( media ) {
 		if ( ! media || ! media.url ) {
-			// in this case there was an error and we should continue in the editing state
-			// previous attributes should be removed because they may be temporary blob urls
+			// In this case there was an error and we should continue in the editing state
+			// previous attributes should be removed because they may be temporary blob urls.
 			setAttributes( { src: undefined, id: undefined } );
 			return;
 		}
-		// sets the block's attribute and updates the edit component from the
-		// selected media, then switches off the editing UI
+		// Sets the block's attribute and updates the edit component from the
+		// selected media, then switches off the editing UI.
 		setAttributes( { src: media.url, id: media.id } );
 	}
 

package/src/audio/transforms.js

@@ -18,7 +18,7 @@ const transforms = {
 				const file = files[ 0 ];
 				// We don't need to upload the media directly here
 				// It's already done as part of the `componentDidMount`
-				// in the audio block
+				// in the audio block.
 				const block = createBlock( 'core/audio', {
 					src: createBlobURL( file ),
 				} );

package/src/block/edit.js

@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import {
 	useEntityBlockEditor,
 	useEntityProp,
-	store as coreStore,
+	__experimentalUseEntityRecord as useEntityRecord,
 } from '@wordpress/core-data';
 import {
 	Placeholder,
@@ -33,27 +33,12 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
 		ref
 	);
-	const { isMissing, hasResolved } = useSelect(
-		( select ) => {
-			const persistedBlock = select( coreStore ).getEntityRecord(
-				'postType',
-				'wp_block',
-				ref
-			);
-			const hasResolvedBlock = select(
-				coreStore
-			).hasFinishedResolution( 'getEntityRecord', [
-				'postType',
-				'wp_block',
-				ref,
-			] );
-			return {
-				hasResolved: hasResolvedBlock,
-				isMissing: hasResolvedBlock && ! persistedBlock,
-			};
-		},
-		[ ref, clientId ]
+	const { record, hasResolved } = useEntityRecord(
+		'postType',
+		'wp_block',
+		ref
 	);
+	const isMissing = hasResolved && ! record;
 
 	const {
 		__experimentalConvertBlockToStatic: convertBlockToStatic,

package/src/block/test/edit.native.js

@@ -46,12 +46,12 @@ const getMockedReusableBlock = ( id ) => ( {
 } );
 
 beforeAll( () => {
-	// Register all core blocks
+	// Register all core blocks.
 	registerCoreBlocks();
 } );
 
 afterAll( () => {
-	// Clean up registered blocks
+	// Clean up registered blocks.
 	getBlockTypes().forEach( ( block ) => {
 		unregisterBlockType( block.name );
 	} );
@@ -83,12 +83,12 @@ describe( 'Reusable block', () => {
 			capabilities: { reusableBlock: true },
 		} );
 
-		// Open the inserter menu
+		// Open the inserter menu.
 		fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
 
-		// Navigate to reusable tab
+		// Navigate to reusable tab.
 		const reusableSegment = await waitFor( () => getByText( 'Reusable' ) );
-		// onLayout event is required by Segment component
+		// onLayout event is required by Segment component.
 		fireEvent( reusableSegment, 'layout', {
 			nativeEvent: {
 				layout: {
@@ -99,7 +99,7 @@ describe( 'Reusable block', () => {
 		fireEvent.press( reusableSegment );
 
 		const reusableBlockList = getByTestId( 'InserterUI-ReusableBlocks' );
-		// onScroll event used to force the FlatList to render all items
+		// onScroll event used to force the FlatList to render all items.
 		fireEvent.scroll( reusableBlockList, {
 			nativeEvent: {
 				contentOffset: { y: 0, x: 0 },
@@ -108,12 +108,12 @@ describe( 'Reusable block', () => {
 			},
 		} );
 
-		// Insert a reusable block
+		// Insert a reusable block.
 		fireEvent.press(
 			await waitFor( () => getByText( `Reusable block - 1` ) )
 		);
 
-		// Get the reusable block
+		// Get the reusable block.
 		const reusableBlock = await waitFor( () =>
 			getByA11yLabel( /Reusable block Block\. Row 1/ )
 		);
@@ -146,7 +146,7 @@ describe( 'Reusable block', () => {
 	} );
 
 	// Skipped until `pointerEvents: 'none'` no longer erroneously prevents
-	// triggering `onLayout*` on the element: https://git.io/JSHZt
+	// triggering `onLayout*` on the element: https://git.io/JSHZt.
 	it.skip( 'renders block content', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const id = 4;

package/src/button/edit.js

@@ -37,7 +37,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 		// Check if we are toggling the width off
 		const width = selectedWidth === newWidth ? undefined : newWidth;
 
-		// Update attributes
+		// Update attributes.
 		setAttributes( { width } );
 	}
 
@@ -224,6 +224,7 @@ function ButtonEdit( props ) {
 					} }
 					anchorRef={ ref?.current }
 					focusOnMount={ isEditingURL ? 'firstElement' : false }
+					__unstableSlotName={ '__unstable-block-tools-after' }
 				>
 					<LinkControl
 						className="wp-block-navigation-link__inline-link-input"

package/src/button/edit.native.js

@@ -59,7 +59,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 		if ( newWidth === 'auto' ) {
 			width = undefined;
 		}
-		// Update attributes
+		// Update attributes.
 		setAttributes( { width } );
 	}
 
@@ -435,7 +435,7 @@ function ButtonEdit( props ) {
 	const buttonBorderRadiusValue =
 		borderRadiusUnit === 'px' || borderRadiusUnit === '%'
 			? borderRadiusValue
-			: Math.floor( 14 * borderRadiusValue ); // lets assume that the font size is set to 14px; TO get a nicer preview.
+			: Math.floor( 14 * borderRadiusValue ); // Lets assume that the font size is set to 14px; TO get a nicer preview.
 	const outlineBorderRadius =
 		buttonBorderRadiusValue > 0
 			? buttonBorderRadiusValue + spacing + borderWidth

package/src/button/editor.scss

@@ -13,11 +13,6 @@
 	position: relative;
 	cursor: text;
 
-	// Make placeholder text white unless custom colors or outline versions are chosen.
-	&:not(.has-text-color):not(.is-style-outline) [data-rich-text-placeholder]::after {
-		color: $white;
-	}
-
 	// Add outline to button on focus to indicate focus-state
 	&:focus {
 		box-shadow: 0 0 0 1px $white, 0 0 0 3px var(--wp-admin-theme-color);

package/src/buttons/test/edit.native.js

@@ -16,12 +16,12 @@ import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
 beforeAll( () => {
-	// Register all core blocks
+	// Register all core blocks.
 	registerCoreBlocks();
 } );
 
 afterAll( () => {
-	// Clean up registered blocks
+	// Clean up registered blocks.
 	getBlockTypes().forEach( ( block ) => {
 		unregisterBlockType( block.name );
 	} );
@@ -103,7 +103,7 @@ describe( 'Buttons block', () => {
 					getByA11yLabel( 'Change items justification' )
 				);
 
-				// Select alignment option
+				// Select alignment option.
 				fireEvent.press(
 					await waitFor( () => getByText( justificationOption ) )
 				);

package/src/buttons/transforms.js

@@ -16,13 +16,13 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/button' ],
 			transform: ( buttons ) =>
-				// Creates the buttons block
+				// Creates the buttons block.
 				createBlock(
 					name,
 					{},
-					// Loop the selected buttons
+					// Loop the selected buttons.
 					buttons.map( ( attributes ) =>
-						// Create singular button in the buttons block
+						// Create singular button in the buttons block.
 						createBlock( 'core/button', attributes )
 					)
 				),
@@ -32,22 +32,22 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( buttons ) =>
-				// Creates the buttons block
+				// Creates the buttons block.
 				createBlock(
 					name,
 					{},
-					// Loop the selected buttons
+					// Loop the selected buttons.
 					buttons.map( ( attributes ) => {
 						const element = createElement(
 							document,
 							attributes.content
 						);
-						// Remove any HTML tags
+						// Remove any HTML tags.
 						const text = element.innerText || '';
-						// Get first url
+						// Get first url.
 						const link = element.querySelector( 'a' );
 						const url = link?.getAttribute( 'href' );
-						// Create singular button in the buttons block
+						// Create singular button in the buttons block.
 						return createBlock( 'core/button', {
 							text,
 							url,

package/src/categories/edit.js

@@ -14,11 +14,10 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
 
 export default function CategoriesEdit( {
 	attributes: {
@@ -30,23 +29,14 @@ export default function CategoriesEdit( {
 	setAttributes,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
-	const { categories, isRequesting } = useSelect(
-		( select ) => {
-			const { getEntityRecords, isResolving } = select( coreStore );
-			const query = { per_page: -1, hide_empty: true, context: 'view' };
-			if ( showOnlyTopLevel ) {
-				query.parent = 0;
-			}
-			return {
-				categories: getEntityRecords( 'taxonomy', 'category', query ),
-				isRequesting: isResolving( 'getEntityRecords', [
-					'taxonomy',
-					'category',
-					query,
-				] ),
-			};
-		},
-		[ showOnlyTopLevel ]
+	const query = { per_page: -1, hide_empty: true, context: 'view' };
+	if ( showOnlyTopLevel ) {
+		query.parent = 0;
+	}
+	const { records: categories, isResolving } = useEntityRecords(
+		'taxonomy',
+		'category',
+		query
 	);
 	const getCategoriesList = ( parentId ) => {
 		if ( ! categories?.length ) {
@@ -163,19 +153,19 @@ export default function CategoriesEdit( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			{ isRequesting && (
+			{ isResolving && (
 				<Placeholder icon={ pin } label={ __( 'Categories' ) }>
 					<Spinner />
 				</Placeholder>
 			) }
-			{ ! isRequesting && categories?.length === 0 && (
+			{ ! isResolving && categories?.length === 0 && (
 				<p>
 					{ __(
 						'Your site does not have any posts, so there is nothing to display here at the moment.'
 					) }
 				</p>
 			) }
-			{ ! isRequesting &&
+			{ ! isResolving &&
 				categories?.length > 0 &&
 				( displayAsDropdown
 					? renderCategoryDropdown()

package/src/code/block.json

@@ -15,7 +15,6 @@
 	},
 	"supports": {
 		"anchor": true,
-		"__experimentalSelector": ".wp-block-code > code",
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/code/style.scss

@@ -1,6 +1,8 @@
-// Provide a minimum of overflow handling.
+// Provide a minimum of overflow handling and ensure the code markup inherits
+// the font-family set on pre.
 .wp-block-code code {
 	display: block;
-	white-space: pre-wrap;
+	font-family: inherit;
 	overflow-wrap: break-word;
+	white-space: pre-wrap;
 }

package/src/code/theme.scss

@@ -1,9 +1,6 @@
 .wp-block-code {
 	border: 1px solid #ccc;
 	border-radius: 4px;
-}
-
-.wp-block-code > code {
 	font-family: Menlo, Consolas, monaco, monospace;
 	padding: 0.8em 1em;
 }

package/src/columns/columnCalculations.native.js

@@ -45,7 +45,7 @@ export const getColumnsInRow = ( width, columnCount ) => {
 				MAX_COLUMNS_NUM_IN_ROW
 			);
 		}
-		// show all Column in one row
+		// Show all Column in one row.
 		return columnCount;
 	}
 };

package/src/columns/edit.js

@@ -141,7 +141,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 			// Update own alignment.
 			setAttributes( { verticalAlignment } );
 
-			// Update all child Column Blocks to match
+			// Update all child Column Blocks to match.
 			const innerBlockClientIds = getBlockOrder( clientId );
 			innerBlockClientIds.forEach( ( innerBlockClientId ) => {
 				updateBlockAttributes( innerBlockClientId, {

package/src/columns/edit.native.js

@@ -317,7 +317,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 			// Update own alignment.
 			setAttributes( { verticalAlignment } );
 
-			// Update all child Column Blocks to match
+			// Update all child Column Blocks to match.
 			const innerBlockClientIds = getBlockOrder( clientId );
 			innerBlockClientIds.forEach( ( innerBlockClientId ) => {
 				updateBlockAttributes( innerBlockClientId, {
@@ -359,7 +359,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 			// Redistribute available width for existing inner blocks.
 			const isAddingColumn = newColumns > previousColumns;
 
-			// Get verticalAlignment from Columns block to set the same to new Column
+			// Get verticalAlignment from Columns block to set the same to new Column.
 			const { verticalAlignment } = getBlockAttributes( clientId ) || {};
 
 			if ( isAddingColumn && hasExplicitWidths ) {
@@ -421,7 +421,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 				blockEditorStore
 			);
 
-			// Get verticalAlignment from Columns block to set the same to new Column
+			// Get verticalAlignment from Columns block to set the same to new Column.
 			const { verticalAlignment } = getBlockAttributes( clientId );
 
 			const innerBlocks = getBlocks( clientId );

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

@@ -23,7 +23,7 @@ function render_block_core_comments_pagination_numbers( $attributes, $content, $
 	$comment_vars = build_comment_query_vars_from_block( $block );
 
 	$total   = ( new WP_Comment_Query( $comment_vars ) )->max_num_pages;
-	$current = $comment_vars['paged'];
+	$current = ! empty( $comment_vars['paged'] ) ? $comment_vars['paged'] : null;
 
 	// Render links.
 	$content = paginate_comments_links(

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%;
 }