@wordpress/block-library 9.3.0 → 9.5.0

package/src/navigation/test/use-navigation-menu.js

@@ -9,6 +9,12 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import useNavigationMenu from '../use-navigation-menu';
 
+const BASE_ENTITY = {
+	kind: 'postType',
+	name: 'wp_navigation',
+	id: undefined,
+};
+
 function createRegistryWithStores() {
 	// Create a registry and register used stores.
 	const registry = createRegistry();
@@ -63,37 +69,70 @@ function resolveRecords( registry, menus ) {
 
 function resolveReadPermission( registry, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( 'create/navigation', allowed );
-	dispatch.startResolution( 'canUser', [ 'read', 'navigation' ] );
-	dispatch.finishResolution( 'canUser', [ 'read', 'navigation' ] );
+	dispatch.receiveUserPermission( 'read/postType/wp_navigation', allowed );
+	dispatch.startResolution( 'canUser', [ 'read', BASE_ENTITY ] );
+	dispatch.finishResolution( 'canUser', [ 'read', BASE_ENTITY ] );
 }
 
 function resolveReadRecordPermission( registry, ref, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( 'create/navigation', allowed );
-	dispatch.startResolution( 'canUser', [ 'read', 'navigation', ref ] );
-	dispatch.finishResolution( 'canUser', [ 'read', 'navigation', ref ] );
+	dispatch.receiveUserPermission(
+		`read/postType/wp_navigation/${ ref }`,
+		allowed
+	);
+	dispatch.startResolution( 'canUser', [
+		'read',
+		{ ...BASE_ENTITY, id: ref },
+	] );
+	dispatch.finishResolution( 'canUser', [
+		'read',
+		{ ...BASE_ENTITY, id: ref },
+	] );
 }
 
 function resolveCreatePermission( registry, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( 'create/navigation', allowed );
-	dispatch.startResolution( 'canUser', [ 'create', 'navigation' ] );
-	dispatch.finishResolution( 'canUser', [ 'create', 'navigation' ] );
+	dispatch.receiveUserPermission( 'create/postType/wp_navigation', allowed );
+	dispatch.startResolution( 'canUser', [
+		'create',
+		{ kind: 'postType', name: 'wp_navigation' },
+	] );
+	dispatch.finishResolution( 'canUser', [
+		'create',
+		{ kind: 'postType', name: 'wp_navigation' },
+	] );
 }
 
 function resolveUpdatePermission( registry, ref, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( `update/navigation/${ ref }`, allowed );
-	dispatch.startResolution( 'canUser', [ 'update', 'navigation', ref ] );
-	dispatch.finishResolution( 'canUser', [ 'update', 'navigation', ref ] );
+	dispatch.receiveUserPermission(
+		`update/postType/wp_navigation/${ ref }`,
+		allowed
+	);
+	dispatch.startResolution( 'canUser', [
+		'update',
+		{ ...BASE_ENTITY, id: ref },
+	] );
+	dispatch.finishResolution( 'canUser', [
+		'update',
+		{ ...BASE_ENTITY, id: ref },
+	] );
 }
 
 function resolveDeletePermission( registry, ref, allowed ) {
 	const dispatch = registry.dispatch( coreStore );
-	dispatch.receiveUserPermission( `delete/navigation/${ ref }`, allowed );
-	dispatch.startResolution( 'canUser', [ 'delete', 'navigation', ref ] );
-	dispatch.finishResolution( 'canUser', [ 'delete', 'navigation', ref ] );
+	dispatch.receiveUserPermission(
+		`delete/postType/wp_navigation/${ ref }`,
+		allowed
+	);
+	dispatch.startResolution( 'canUser', [
+		'delete',
+		{ ...BASE_ENTITY, id: ref },
+	] );
+	dispatch.finishResolution( 'canUser', [
+		'delete',
+		{ ...BASE_ENTITY, id: ref },
+	] );
 }
 
 describe( 'useNavigationMenus', () => {

package/src/navigation/use-navigation-menu.js

@@ -14,7 +14,11 @@ import { useSelect } from '@wordpress/data';
 import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants';
 
 export default function useNavigationMenu( ref ) {
-	const permissions = useResourcePermissions( 'navigation', ref );
+	const permissions = useResourcePermissions( {
+		kind: 'postType',
+		name: 'wp_navigation',
+		id: ref,
+	} );
 
 	const {
 		navigationMenu,

package/src/navigation-link/link-ui.js

@@ -147,15 +147,18 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 }
 
 function UnforwardedLinkUI( props, ref ) {
+	const { label, url, opensInNewTab, type, kind } = props.link;
+	const postType = type || 'page';
+
 	const [ addingBlock, setAddingBlock ] = useState( false );
 	const [ focusAddBlockButton, setFocusAddBlockButton ] = useState( false );
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const pagesPermissions = useResourcePermissions( 'pages' );
-	const postsPermissions = useResourcePermissions( 'posts' );
+	const permissions = useResourcePermissions( {
+		kind: 'postType',
+		name: postType,
+	} );
 
 	async function handleCreate( pageTitle ) {
-		const postType = props.link.type || 'page';
-
 		const page = await saveEntityRecord( 'postType', postType, {
 			title: pageTitle,
 			status: 'draft',
@@ -180,15 +183,6 @@ function UnforwardedLinkUI( props, ref ) {
 		};
 	}
 
-	const { label, url, opensInNewTab, type, kind } = props.link;
-
-	let userCanCreate = false;
-	if ( ! type || type === 'page' ) {
-		userCanCreate = pagesPermissions.canCreate;
-	} else if ( type === 'post' ) {
-		userCanCreate = postsPermissions.canCreate;
-	}
-
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.
 	const link = useMemo(
@@ -241,7 +235,7 @@ function UnforwardedLinkUI( props, ref ) {
 						hasRichPreviews
 						value={ link }
 						showInitialSuggestions
-						withCreateSuggestion={ userCanCreate }
+						withCreateSuggestion={ permissions.canCreate }
 						createSuggestion={ handleCreate }
 						createSuggestionButtonText={ ( searchTerm ) => {
 							let format;

package/src/navigation-submenu/edit.js

@@ -29,7 +29,6 @@ import {
 import { isURL, prependHTTP } from '@wordpress/url';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
-import { useResourcePermissions } from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
 import { createBlock } from '@wordpress/blocks';
 import { useMergeRefs, usePrevious } from '@wordpress/compose';
@@ -134,7 +133,7 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, type, url, description, rel, title } = attributes;
+	const { label, url, description, rel, title } = attributes;
 
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 
@@ -154,9 +153,6 @@ export default function NavigationSubmenuEdit( {
 	const itemLabelPlaceholder = __( 'Add text…' );
 	const ref = useRef();
 
-	const pagesPermissions = useResourcePermissions( 'pages' );
-	const postsPermissions = useResourcePermissions( 'posts' );
-
 	const {
 		parentCount,
 		isParentOfSelectedBlock,
@@ -264,13 +260,6 @@ export default function NavigationSubmenuEdit( {
 		selection.addRange( range );
 	}
 
-	let userCanCreate = false;
-	if ( ! type || type === 'page' ) {
-		userCanCreate = pagesPermissions.canCreate;
-	} else if ( type === 'post' ) {
-		userCanCreate = postsPermissions.canCreate;
-	}
-
 	const {
 		textColor,
 		customTextColor,
@@ -499,7 +488,6 @@ export default function NavigationSubmenuEdit( {
 								}
 							} }
 							anchor={ popoverAnchor }
-							hasCreateSuggestion={ userCanCreate }
 							onRemove={ () => {
 								setAttributes( { url: '' } );
 								speak( __( 'Link removed.' ), 'assertive' );

package/src/page-list/edit.js

@@ -319,6 +319,7 @@ export default function PageListEdit( {
 				{ pagesTree.length > 0 && (
 					<PanelBody>
 						<ComboboxControl
+							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							className="editor-page-attributes__parent"
 							label={ __( 'Parent' ) }

package/src/page-list-item/edit.js

@@ -21,10 +21,10 @@ import {
 
 function useFrontPageId() {
 	return useSelect( ( select ) => {
-		const canReadSettings = select( coreStore ).canUser(
-			'read',
-			'settings'
-		);
+		const canReadSettings = select( coreStore ).canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} );
 		if ( ! canReadSettings ) {
 			return undefined;
 		}

package/src/paragraph/block.json

@@ -33,6 +33,12 @@
 		"splitting": true,
 		"anchor": true,
 		"className": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/post-author/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { postAuthor as icon } from '@wordpress/icons';
 
 /**
@@ -15,6 +16,13 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	example: {
+		viewportWidth: 350,
+		attributes: {
+			showBio: true,
+			byline: __( 'Posted by' ),
+		},
+	},
 	edit,
 };
 

package/src/post-author-biography/block.json

@@ -12,6 +12,9 @@
 		}
 	},
 	"usesContext": [ "postType", "postId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"spacing": {
 			"margin": true,

package/src/post-author-name/block.json

@@ -20,6 +20,9 @@
 		}
 	},
 	"usesContext": [ "postType", "postId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"spacing": {

package/src/post-comments-form/block.json

@@ -37,6 +37,18 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-comments-form-editor",

package/src/post-comments-form/style.scss

@@ -38,7 +38,7 @@
 	}
 
 	// Styles copied from button block styles.
-	input[type="submit"] {
+	:where(input[type="submit"]) {
 		box-shadow: none;
 		cursor: pointer;
 		display: inline-block;

package/src/post-content/block.json

@@ -54,5 +54,6 @@
 			}
 		}
 	},
+	"style": "wp-block-post-content",
 	"editorStyle": "wp-block-post-content-editor"
 }

package/src/post-content/style.scss

@@ -0,0 +1,5 @@
+.wp-block-post-content::after {
+	content: "";
+	display: table;
+	clear: both;
+}

package/src/post-date/block.json

@@ -23,6 +23,9 @@
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {
@@ -53,6 +56,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	}
 }

package/src/post-excerpt/block.json

@@ -56,6 +56,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",

package/src/post-excerpt/edit.js

@@ -231,6 +231,7 @@ export default function PostExcerptEditor( {
 						}
 					/>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Max number of words' ) }
 						value={ excerptLength }
 						onChange={ ( value ) => {

package/src/post-excerpt/style.scss

@@ -1,5 +1,8 @@
 // Lowest specificity on wrapper margins to avoid overriding layout styles.
 :where(.wp-block-post-excerpt) {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	margin-top: var(--wp--style--block-gap);
 	margin-bottom: var(--wp--style--block-gap);
 }

package/src/post-featured-image/block.json

@@ -58,6 +58,9 @@
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
 		"color": {

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

@@ -157,6 +157,8 @@ export default function PostNavigationLinkEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Filter by taxonomy' ) }
 					value={ taxonomy }
 					options={ getTaxonomyOptions() }

package/src/post-terms/block.json

@@ -27,6 +27,9 @@
 		}
 	},
 	"usesContext": [ "postId", "postType" ],
+	"example": {
+		"viewportWidth": 350
+	},
 	"supports": {
 		"html": false,
 		"color": {
@@ -57,6 +60,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-terms"

package/src/post-time-to-read/block.json

@@ -45,6 +45,12 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	}
 }

package/src/post-title/block.json

@@ -15,6 +15,9 @@
 			"type": "number",
 			"default": 2
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"isLink": {
 			"type": "boolean",
 			"default": false
@@ -63,6 +66,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-title"

package/src/post-title/edit.js

@@ -22,7 +22,7 @@ import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 export default function PostTitleEdit( {
-	attributes: { level, textAlign, isLink, rel, linkTarget },
+	attributes: { level, levelOptions, textAlign, isLink, rel, linkTarget },
 	setAttributes,
 	context: { postType, postId, queryId },
 	insertBlocksAfter,
@@ -42,11 +42,11 @@ export default function PostTitleEdit( {
 			if ( isDescendentOfQueryLoop ) {
 				return false;
 			}
-			return select( coreStore ).canUserEditEntityRecord(
-				'postType',
-				postType,
-				postId
-			);
+			return select( coreStore ).canUser( 'update', {
+				kind: 'postType',
+				name: postType,
+				id: postId,
+			} );
 		},
 		[ isDescendentOfQueryLoop, postType, postId ]
 	);
@@ -73,7 +73,7 @@ export default function PostTitleEdit( {
 		titleElement = userCanEdit ? (
 			<PlainText
 				tagName={ TagName }
-				placeholder={ __( 'No Title' ) }
+				placeholder={ __( 'No title' ) }
 				value={ rawTitle }
 				onChange={ setTitle }
 				__experimentalVersion={ 2 }
@@ -96,7 +96,7 @@ export default function PostTitleEdit( {
 					href={ link }
 					target={ linkTarget }
 					rel={ rel }
-					placeholder={ ! rawTitle.length ? __( 'No Title' ) : null }
+					placeholder={ ! rawTitle.length ? __( 'No title' ) : null }
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
@@ -125,6 +125,7 @@ export default function PostTitleEdit( {
 					<BlockControls group="block">
 						<HeadingLevelDropdown
 							value={ level }
+							options={ levelOptions }
 							onChange={ ( newLevel ) =>
 								setAttributes( { level: newLevel } )
 							}

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

@@ -76,6 +76,8 @@ function AuthorControl( { value, onChange } ) {
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
 			__experimentalShowHowTo={ false }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 		/>
 	);
 }

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -36,6 +36,7 @@ export default function EnhancedPaginationControl( {
 	return (
 		<>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Force page reload' ) }
 				help={ help }
 				checked={