@wordpress/block-library 7.7.0 → 7.8.0

package/build-style/style.css

@@ -83,9 +83,6 @@
   text-align: center;
 }
 
-.wp-block-audio {
-  margin: 0 0 1em 0;
-}
 .wp-block-audio figcaption {
   margin-top: 0.5em;
   margin-bottom: 1em;
@@ -96,14 +93,9 @@
 }
 
 .wp-block-button__link {
-  color: #fff;
-  background-color: #32373c;
-  border-radius: 9999px;
   box-shadow: none;
   cursor: pointer;
   display: inline-block;
-  font-size: 1.125em;
-  padding: calc(0.667em + 2px) calc(1.333em + 2px);
   text-align: center;
   text-decoration: none;
   word-break: break-word;
@@ -709,8 +701,7 @@
   height: 100%;
   max-width: none;
   max-height: none;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   outline: none;
   border: none;
   box-shadow: none;
@@ -827,7 +818,6 @@ section.wp-block-cover-image > h2,
 }
 
 .wp-block-embed {
-  margin: 0 0 1em 0;
   overflow-wrap: break-word;
 }
 .wp-block-embed figcaption {
@@ -889,28 +879,30 @@ section.wp-block-cover-image > h2,
   /*rtl:ignore*/
   text-align: right;
 }
-.wp-block-file .wp-block-file__embed {
+.wp-block-file * + .wp-block-file__button {
+  margin-left: 0.75em;
+}
+
+.wp-block-file__embed {
   margin-bottom: 1em;
 }
-.wp-block-file .wp-block-file__button {
+
+.wp-block-file__button {
   background: #32373c;
   border-radius: 2em;
   color: #fff;
   font-size: 0.8em;
   padding: 0.5em 1em;
 }
-.wp-block-file a.wp-block-file__button {
+.wp-block-file__button:is(a) {
   text-decoration: none;
 }
-.wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:visited, .wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:active {
+.wp-block-file__button:is(a):hover, .wp-block-file__button:is(a):visited, .wp-block-file__button:is(a):focus, .wp-block-file__button:is(a):active {
   box-shadow: none;
   color: #fff;
   opacity: 0.85;
   text-decoration: none;
 }
-.wp-block-file * + .wp-block-file__button {
-  margin-left: 0.75em;
-}
 
 .wp-block-gallery:not(.has-nested-images),
 .blocks-gallery-grid:not(.has-nested-images) {
@@ -995,8 +987,7 @@ section.wp-block-cover-image > h2,
   width: 100%;
   height: 100%;
   flex: 1;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
@@ -1185,8 +1176,7 @@ figure.wp-block-gallery.has-nested-images {
   width: 100%;
   flex: 1 0 0%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
   width: 100%;
@@ -1242,9 +1232,6 @@ h6.has-background {
   padding: 1.25em 2.375em;
 }
 
-.wp-block-image {
-  margin: 0 0 1em 0;
-}
 .wp-block-image img {
   height: auto;
   max-width: 100%;
@@ -2612,19 +2599,19 @@ ul.wp-block-rss.is-grid li {
   margin-left: 0;
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
   border: 1px solid #949494;
 }
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
   border-radius: 0;
   border: none;
   padding: 0 0 0 0.25em;
 }
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
   outline: none;
 }
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__button {
   padding: 0.125em 0.5em;
 }
 
@@ -3086,7 +3073,6 @@ ul.wp-block-rss.is-grid li {
 }
 
 .wp-block-table {
-  margin: 0 0 1em 0;
   overflow-x: auto;
 }
 .wp-block-table table {
@@ -3238,16 +3224,12 @@ pre.wp-block-verse {
   white-space: pre-wrap;
 }
 
-.wp-block-video {
-  margin: 0 0 1em 0;
-}
 .wp-block-video video {
   width: 100%;
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {
@@ -3359,7 +3341,6 @@ pre.wp-block-verse {
 .screen-reader-text {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
@@ -3373,8 +3354,7 @@ pre.wp-block-verse {
 .screen-reader-text:focus {
   background-color: #ddd;
   clip: auto !important;
-  -webkit-clip-path: none;
-          clip-path: none;
+  clip-path: none;
   color: #444;
   display: block;
   font-size: 1em;

package/build-style/table/style-rtl.css

@@ -75,7 +75,6 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-table {
-  margin: 0 0 1em 0;
   overflow-x: auto;
 }
 .wp-block-table table {

package/build-style/table/style.css

@@ -75,7 +75,6 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 .wp-block-table {
-  margin: 0 0 1em 0;
   overflow-x: auto;
 }
 .wp-block-table table {

package/build-style/video/style-rtl.css

@@ -74,16 +74,12 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-video {
-  margin: 0 0 1em 0;
-}
 .wp-block-video video {
   width: 100%;
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/build-style/video/style.css

@@ -74,16 +74,12 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-video {
-  margin: 0 0 1em 0;
-}
 .wp-block-video video {
   width: 100%;
 }
 @supports (position: sticky) {
   .wp-block-video [poster] {
-    -o-object-fit: cover;
-       object-fit: cover;
+    object-fit: cover;
   }
 }
 .wp-block-video.aligncenter {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,39 +34,40 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.10.0",
-		"@wordpress/api-fetch": "^6.7.0",
-		"@wordpress/autop": "^3.10.0",
-		"@wordpress/blob": "^3.10.0",
-		"@wordpress/block-editor": "^9.2.0",
-		"@wordpress/blocks": "^11.9.0",
-		"@wordpress/components": "^19.12.0",
-		"@wordpress/compose": "^5.8.0",
-		"@wordpress/core-data": "^4.8.0",
-		"@wordpress/data": "^6.10.0",
-		"@wordpress/date": "^4.10.0",
-		"@wordpress/deprecated": "^3.10.0",
-		"@wordpress/dom": "^3.10.0",
-		"@wordpress/element": "^4.8.0",
-		"@wordpress/hooks": "^3.10.0",
-		"@wordpress/html-entities": "^3.10.0",
-		"@wordpress/i18n": "^4.10.0",
-		"@wordpress/icons": "^9.1.0",
-		"@wordpress/keycodes": "^3.10.0",
-		"@wordpress/notices": "^3.10.0",
-		"@wordpress/primitives": "^3.8.0",
-		"@wordpress/reusable-blocks": "^3.8.0",
-		"@wordpress/rich-text": "^5.8.0",
-		"@wordpress/server-side-render": "^3.8.0",
-		"@wordpress/url": "^3.11.0",
-		"@wordpress/viewport": "^4.8.0",
+		"@wordpress/a11y": "^3.11.0",
+		"@wordpress/api-fetch": "^6.8.0",
+		"@wordpress/autop": "^3.11.0",
+		"@wordpress/blob": "^3.11.0",
+		"@wordpress/block-editor": "^9.3.0",
+		"@wordpress/blocks": "^11.10.0",
+		"@wordpress/components": "^19.13.0",
+		"@wordpress/compose": "^5.9.0",
+		"@wordpress/core-data": "^4.9.0",
+		"@wordpress/data": "^6.11.0",
+		"@wordpress/date": "^4.11.0",
+		"@wordpress/deprecated": "^3.11.0",
+		"@wordpress/dom": "^3.11.0",
+		"@wordpress/element": "^4.9.0",
+		"@wordpress/hooks": "^3.11.0",
+		"@wordpress/html-entities": "^3.11.0",
+		"@wordpress/i18n": "^4.11.0",
+		"@wordpress/icons": "^9.2.0",
+		"@wordpress/keycodes": "^3.11.0",
+		"@wordpress/notices": "^3.11.0",
+		"@wordpress/primitives": "^3.9.0",
+		"@wordpress/reusable-blocks": "^3.9.0",
+		"@wordpress/rich-text": "^5.9.0",
+		"@wordpress/server-side-render": "^3.9.0",
+		"@wordpress/url": "^3.12.0",
+		"@wordpress/viewport": "^4.9.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
-		"moment": "^2.22.1"
+		"moment": "^2.22.1",
+		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0",
@@ -75,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
+	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
 }

package/src/audio/block.json

@@ -43,7 +43,12 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"editorStyle": "wp-block-audio-editor",
 	"style": "wp-block-audio"

package/src/audio/index.js

@@ -20,8 +20,7 @@ export const settings = {
 	icon,
 	example: {
 		attributes: {
-			src:
-				'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
+			src: 'https://upload.wikimedia.org/wikipedia/commons/d/dd/Armstrong_Small_Step.ogg',
 		},
 	},
 	transforms,

package/src/audio/style.scss

@@ -1,6 +1,4 @@
 .wp-block-audio {
-	margin: 0 0 1em 0;
-
 	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.

package/src/avatar/hooks.js

@@ -76,12 +76,15 @@ export function useUserAvatar( { userId, postId, postType } ) {
 		},
 		[ postType, postId, userId ]
 	);
-	const avatarUrls = authorDetails
-		? Object.values( authorDetails.avatar_urls )
-		: null;
-	const sizes = authorDetails
-		? Object.keys( authorDetails.avatar_urls )
-		: null;
+
+	const avatarUrls =
+		authorDetails && authorDetails?.avatar_urls
+			? Object.values( authorDetails.avatar_urls )
+			: null;
+	const sizes =
+		authorDetails && authorDetails?.avatar_urls
+			? Object.keys( authorDetails.avatar_urls )
+			: null;
 	const { minSize, maxSize } = getAvatarSizes( sizes );
 	const defaultAvatar = useDefaultAvatar();
 	return {

package/src/block/edit.js

@@ -31,9 +31,8 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
 
 export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		ref
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
@@ -46,9 +45,8 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 		[ clientId ]
 	);
 
-	const {
-		__experimentalConvertBlockToStatic: convertBlockToStatic,
-	} = useDispatch( reusableBlocksStore );
+	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
+		useDispatch( reusableBlocksStore );
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',

package/src/block/edit.native.js

@@ -48,9 +48,8 @@ export default function ReusableBlockEdit( {
 	clientId,
 	isSelected,
 } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		ref
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( ref );
 
 	const [ showHelp, setShowHelp ] = useState( false );
 	const infoTextStyle = usePreferredColorSchemeStyle(
@@ -85,18 +84,16 @@ export default function ReusableBlockEdit( {
 				'wp_block',
 				ref
 			);
-			const hasResolvedBlock = select(
-				coreStore
-			).hasFinishedResolution( 'getEntityRecord', [
-				'postType',
-				'wp_block',
-				ref,
-			] );
+			const hasResolvedBlock = select( coreStore ).hasFinishedResolution(
+				'getEntityRecord',
+				[ 'postType', 'wp_block', ref ]
+			);
 			return {
 				hasResolved: hasResolvedBlock,
-				isEditing: select(
-					reusableBlocksStore
-				).__experimentalIsEditingReusableBlock( clientId ),
+				isEditing:
+					select(
+						reusableBlocksStore
+					).__experimentalIsEditingReusableBlock( clientId ),
 				isMissing: hasResolvedBlock && ! persistedBlock,
 			};
 		},
@@ -104,9 +101,8 @@ export default function ReusableBlockEdit( {
 	);
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const {
-		__experimentalConvertBlockToStatic: convertBlockToStatic,
-	} = useDispatch( reusableBlocksStore );
+	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
+		useDispatch( reusableBlocksStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(

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

@@ -74,14 +74,11 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const {
-			getByA11yLabel,
-			getByTestId,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml: '',
-			capabilities: { reusableBlock: true },
-		} );
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor( {
+				initialHtml: '',
+				capabilities: { reusableBlock: true },
+			} );
 
 		// Open the inserter menu.
 		fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );

package/src/button/block.json

@@ -89,7 +89,30 @@
 				"radius": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button__link"
+		"__experimentalSelector": ".wp-block-button__link",
+		"__experimentalStyle": {
+			"border": {
+				"//": "100% causes an oval, but any explicit but really high value retains the pill shape.",
+				"radius": "9999px"
+			},
+			"color": {
+				"text": "#fff",
+				"background": "#32373c"
+			},
+			"typography": {
+				"fontSize": "1.125em",
+				"textDecoration": "none"
+			},
+			"spacing": {
+				"padding": {
+					"//": "The extra 2px are added to size solids the same as the outline versions.",
+					"top": "calc(0.667em + 2px)",
+					"right": "calc(1.333em + 2px)",
+					"bottom": "calc(0.667em + 2px)",
+					"left": "calc(1.333em + 2px)"
+				}
+			}
+		}
 	},
 	"styles": [
 		{ "name": "fill", "label": "Fill", "isDefault": true },

package/src/button/deprecated.js

@@ -203,16 +203,8 @@ const v11 = {
 		__experimentalSelector: '.wp-block-button__link',
 	},
 	save( { attributes, className } ) {
-		const {
-			fontSize,
-			linkTarget,
-			rel,
-			style,
-			text,
-			title,
-			url,
-			width,
-		} = attributes;
+		const { fontSize, linkTarget, rel, style, text, title, url, width } =
+			attributes;
 
 		if ( ! text ) {
 			return null;
@@ -337,16 +329,8 @@ const v10 = {
 		__experimentalSelector: '.wp-block-button__link',
 	},
 	save( { attributes, className } ) {
-		const {
-			fontSize,
-			linkTarget,
-			rel,
-			style,
-			text,
-			title,
-			url,
-			width,
-		} = attributes;
+		const { fontSize, linkTarget, rel, style, text, title, url, width } =
+			attributes;
 
 		if ( ! text ) {
 			return null;
@@ -558,15 +542,8 @@ const deprecated = [
 			},
 		},
 		save( { attributes, className } ) {
-			const {
-				borderRadius,
-				linkTarget,
-				rel,
-				text,
-				title,
-				url,
-				width,
-			} = attributes;
+			const { borderRadius, linkTarget, rel, text, title, url, width } =
+				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
 			const buttonClasses = classnames(
 				'wp-block-button__link',
@@ -653,15 +630,8 @@ const deprecated = [
 			},
 		},
 		save( { attributes, className } ) {
-			const {
-				borderRadius,
-				linkTarget,
-				rel,
-				text,
-				title,
-				url,
-				width,
-			} = attributes;
+			const { borderRadius, linkTarget, rel, text, title, url, width } =
+				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
 			const buttonClasses = classnames(
 				'wp-block-button__link',
@@ -740,14 +710,8 @@ const deprecated = [
 			},
 		},
 		save( { attributes } ) {
-			const {
-				borderRadius,
-				linkTarget,
-				rel,
-				text,
-				title,
-				url,
-			} = attributes;
+			const { borderRadius, linkTarget, rel, text, title, url } =
+				attributes;
 			const buttonClasses = classnames( 'wp-block-button__link', {
 				'no-border-radius': borderRadius === 0,
 			} );

package/src/button/edit.js

@@ -75,15 +75,8 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 	} = props;
-	const {
-		linkTarget,
-		placeholder,
-		rel,
-		style,
-		text,
-		url,
-		width,
-	} = attributes;
+	const { linkTarget, placeholder, rel, style, text, url, width } =
+		attributes;
 	const onSetLinkRel = useCallback(
 		( value ) => {
 			setAttributes( { rel: value } );
@@ -157,7 +150,8 @@ function ButtonEdit( props ) {
 			<div
 				{ ...blockProps }
 				className={ classnames( blockProps.className, {
-					[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+					[ `has-custom-width wp-block-button__width-${ width }` ]:
+						width,
 					[ `has-custom-font-size` ]: blockProps.style.fontSize,
 				} ) }
 			>

package/src/button/edit.native.js

@@ -95,9 +95,8 @@ function ButtonEdit( props ) {
 	const { editorSidebarOpened, numOfButtons } = useSelect(
 		( select ) => {
 			const { isEditorSidebarOpened } = select( editPostStore );
-			const { getBlockCount, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const { getBlockCount, getBlockRootClientId } =
+				select( blockEditorStore );
 			const parentId = getBlockRootClientId( clientId );
 			const blockCount = getBlockCount( parentId );
 			const currentIsEditorSidebarOpened = isEditorSidebarOpened();

package/src/button/save.js

@@ -16,16 +16,8 @@ import {
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
-	const {
-		fontSize,
-		linkTarget,
-		rel,
-		style,
-		text,
-		title,
-		url,
-		width,
-	} = attributes;
+	const { fontSize, linkTarget, rel, style, text, title, url, width } =
+		attributes;
 
 	if ( ! text ) {
 		return null;

package/src/button/style.scss

@@ -4,14 +4,9 @@ $blocks-block__margin: 0.5em;
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
 .wp-block-button__link {
-	color: $white;
-	background-color: #32373c;
-	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
 	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;
-	font-size: 1.125em;
-	padding: calc(0.667em + 2px) calc(1.333em + 2px); // The extra 2px are added to size solids the same as the outline versions.
 	text-align: center;
 	text-decoration: none;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.