@wordpress/block-library 7.6.0 → 7.7.0

package/build-style/site-logo/style.css

@@ -84,6 +84,10 @@
   width: 120px;
   height: auto;
 }
+.wp-block-site-logo img {
+  height: auto;
+  max-width: 100%;
+}
 .wp-block-site-logo a,
 .wp-block-site-logo img {
   border-radius: inherit;

package/build-style/style-rtl.css

@@ -413,27 +413,6 @@
    *   - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545
    */
 }
-.wp-block-cover-image.has-parallax,
-.wp-block-cover.has-parallax {
-  background-attachment: fixed;
-}
-@supports (-webkit-touch-callout: inherit) {
-  .wp-block-cover-image.has-parallax,
-.wp-block-cover.has-parallax {
-    background-attachment: scroll;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .wp-block-cover-image.has-parallax,
-.wp-block-cover.has-parallax {
-    background-attachment: scroll;
-  }
-}
-.wp-block-cover-image.is-repeated,
-.wp-block-cover.is-repeated {
-  background-repeat: repeat;
-  background-size: auto;
-}
 .wp-block-cover-image.has-background-dim:not([class*=-background-color]),
 .wp-block-cover-image .has-background-dim:not([class*=-background-color]),
 .wp-block-cover.has-background-dim:not([class*=-background-color]),
@@ -710,9 +689,9 @@
   margin: 0;
   width: auto;
 }
-.wp-block-cover-image img.wp-block-cover__image-background,
+.wp-block-cover-image .wp-block-cover__image-background,
 .wp-block-cover-image video.wp-block-cover__video-background,
-.wp-block-cover img.wp-block-cover__image-background,
+.wp-block-cover .wp-block-cover__image-background,
 .wp-block-cover video.wp-block-cover__video-background {
   position: absolute;
   top: 0;
@@ -732,6 +711,36 @@
   box-shadow: none;
 }
 
+.wp-block-cover-image.has-parallax,
+.wp-block-cover.has-parallax,
+.wp-block-cover__image-background.has-parallax,
+video.wp-block-cover__video-background.has-parallax {
+  background-attachment: fixed;
+}
+@supports (-webkit-overflow-scrolling: touch) {
+  .wp-block-cover-image.has-parallax,
+.wp-block-cover.has-parallax,
+.wp-block-cover__image-background.has-parallax,
+video.wp-block-cover__video-background.has-parallax {
+    background-attachment: scroll;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-block-cover-image.has-parallax,
+.wp-block-cover.has-parallax,
+.wp-block-cover__image-background.has-parallax,
+video.wp-block-cover__video-background.has-parallax {
+    background-attachment: scroll;
+  }
+}
+.wp-block-cover-image.is-repeated,
+.wp-block-cover.is-repeated,
+.wp-block-cover__image-background.is-repeated,
+video.wp-block-cover__video-background.is-repeated {
+  background-repeat: repeat;
+  background-size: auto;
+}
+
 .wp-block-cover__video-background {
   z-index: 0;
 }
@@ -2623,6 +2632,10 @@ ul.wp-block-rss.is-grid li {
   width: 120px;
   height: auto;
 }
+.wp-block-site-logo img {
+  height: auto;
+  max-width: 100%;
+}
 .wp-block-site-logo a,
 .wp-block-site-logo img {
   border-radius: inherit;

package/build-style/style.css

@@ -418,27 +418,6 @@
    *   - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545
    */
 }
-.wp-block-cover-image.has-parallax,
-.wp-block-cover.has-parallax {
-  background-attachment: fixed;
-}
-@supports (-webkit-touch-callout: inherit) {
-  .wp-block-cover-image.has-parallax,
-.wp-block-cover.has-parallax {
-    background-attachment: scroll;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .wp-block-cover-image.has-parallax,
-.wp-block-cover.has-parallax {
-    background-attachment: scroll;
-  }
-}
-.wp-block-cover-image.is-repeated,
-.wp-block-cover.is-repeated {
-  background-repeat: repeat;
-  background-size: auto;
-}
 .wp-block-cover-image.has-background-dim:not([class*=-background-color]),
 .wp-block-cover-image .has-background-dim:not([class*=-background-color]),
 .wp-block-cover.has-background-dim:not([class*=-background-color]),
@@ -715,9 +694,9 @@
   margin: 0;
   width: auto;
 }
-.wp-block-cover-image img.wp-block-cover__image-background,
+.wp-block-cover-image .wp-block-cover__image-background,
 .wp-block-cover-image video.wp-block-cover__video-background,
-.wp-block-cover img.wp-block-cover__image-background,
+.wp-block-cover .wp-block-cover__image-background,
 .wp-block-cover video.wp-block-cover__video-background {
   position: absolute;
   top: 0;
@@ -737,6 +716,36 @@
   box-shadow: none;
 }
 
+.wp-block-cover-image.has-parallax,
+.wp-block-cover.has-parallax,
+.wp-block-cover__image-background.has-parallax,
+video.wp-block-cover__video-background.has-parallax {
+  background-attachment: fixed;
+}
+@supports (-webkit-overflow-scrolling: touch) {
+  .wp-block-cover-image.has-parallax,
+.wp-block-cover.has-parallax,
+.wp-block-cover__image-background.has-parallax,
+video.wp-block-cover__video-background.has-parallax {
+    background-attachment: scroll;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-block-cover-image.has-parallax,
+.wp-block-cover.has-parallax,
+.wp-block-cover__image-background.has-parallax,
+video.wp-block-cover__video-background.has-parallax {
+    background-attachment: scroll;
+  }
+}
+.wp-block-cover-image.is-repeated,
+.wp-block-cover.is-repeated,
+.wp-block-cover__image-background.is-repeated,
+video.wp-block-cover__video-background.is-repeated {
+  background-repeat: repeat;
+  background-size: auto;
+}
+
 .wp-block-cover__video-background {
   z-index: 0;
 }
@@ -2654,6 +2663,10 @@ ul.wp-block-rss.is-grid li {
   width: 120px;
   height: auto;
 }
+.wp-block-site-logo img {
+  height: auto;
+  max-width: 100%;
+}
 .wp-block-site-logo a,
 .wp-block-site-logo img {
   border-radius: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.6.0",
+	"version": "7.7.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,32 +34,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.9.0",
-		"@wordpress/api-fetch": "^6.6.0",
-		"@wordpress/autop": "^3.9.0",
-		"@wordpress/blob": "^3.9.0",
-		"@wordpress/block-editor": "^9.1.0",
-		"@wordpress/blocks": "^11.8.0",
-		"@wordpress/components": "^19.11.0",
-		"@wordpress/compose": "^5.7.0",
-		"@wordpress/core-data": "^4.7.0",
-		"@wordpress/data": "^6.9.0",
-		"@wordpress/date": "^4.9.0",
-		"@wordpress/deprecated": "^3.9.0",
-		"@wordpress/dom": "^3.9.0",
-		"@wordpress/element": "^4.7.0",
-		"@wordpress/hooks": "^3.9.0",
-		"@wordpress/html-entities": "^3.9.0",
-		"@wordpress/i18n": "^4.9.0",
-		"@wordpress/icons": "^9.0.0",
-		"@wordpress/keycodes": "^3.9.0",
-		"@wordpress/notices": "^3.9.0",
-		"@wordpress/primitives": "^3.7.0",
-		"@wordpress/reusable-blocks": "^3.7.0",
-		"@wordpress/rich-text": "^5.7.0",
-		"@wordpress/server-side-render": "^3.7.0",
-		"@wordpress/url": "^3.10.0",
-		"@wordpress/viewport": "^4.7.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",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
+	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
 }

package/src/button/deprecated.js

@@ -119,6 +119,150 @@ const blockAttributes = {
 	},
 };
 
+const v11 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'title',
+		},
+		text: {
+			type: 'string',
+			source: 'html',
+			selector: 'a',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'target',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'rel',
+		},
+		placeholder: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		alignWide: false,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			fontSize: true,
+			__experimentalFontFamily: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-button__link',
+	},
+	save( { attributes, className } ) {
+		const {
+			fontSize,
+			linkTarget,
+			rel,
+			style,
+			text,
+			title,
+			url,
+			width,
+		} = attributes;
+
+		if ( ! text ) {
+			return null;
+		}
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const buttonClasses = classnames(
+			'wp-block-button__link',
+			colorProps.className,
+			borderProps.className,
+			{
+				// For backwards compatibility add style that isn't provided via
+				// block support.
+				'no-border-radius': style?.border?.radius === 0,
+			}
+		);
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+		};
+
+		// The use of a `title` attribute here is soft-deprecated, but still applied
+		// if it had already been assigned, for the sake of backward-compatibility.
+		// A title will no longer be assigned for new or updated button block links.
+
+		const wrapperClasses = classnames( className, {
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName="a"
+					className={ buttonClasses }
+					href={ url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ linkTarget }
+					rel={ rel }
+				/>
+			</div>
+		);
+	},
+};
+
 const v10 = {
 	attributes: {
 		url: {
@@ -258,6 +402,7 @@ const v10 = {
 };
 
 const deprecated = [
+	v11,
 	v10,
 	{
 		supports: {

package/src/button/edit.js

@@ -25,6 +25,7 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalLinkControl as LinkControl,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -176,7 +177,8 @@ function ButtonEdit( props ) {
 							// For backwards compatibility add style that isn't
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
-						}
+						},
+						__experimentalElementButtonClassName
 					) }
 					style={ {
 						...borderProps.style,

package/src/button/save.js

@@ -12,6 +12,7 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
@@ -41,7 +42,8 @@ export default function save( { attributes, className } ) {
 			// For backwards compatibility add style that isn't provided via
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,
-		}
+		},
+		__experimentalElementButtonClassName
 	);
 	const buttonStyle = {
 		...borderProps.style,

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

@@ -21,7 +21,7 @@ exports[`Buttons block justify content sets Justify items right option 1`] = `
 exports[`Buttons block when a button is shown adjusts the border radius 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button {\\"style\\":{\\"border\\":{\\"radius\\":\\"6px\\"}}} -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;

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

@@ -32,7 +32,7 @@ describe( 'Buttons block', () => {
 		it( 'adjusts the border radius', async () => {
 			const initialHtml = `<!-- wp:buttons -->
 			<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
-			<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5px" >Hello</a></div>
+			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
 			const { getByA11yLabel } = await initializeEditor( {

package/src/columns/block.json

@@ -28,7 +28,9 @@
 			}
 		},
 		"spacing": {
-			"blockGap": true,
+			"blockGap": {
+				"__experimentalDefault": "2em"
+			},
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {