@wordpress/block-library 9.18.0 → 9.19.1

package/build-style/editor.css

@@ -1969,15 +1969,11 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   background-image: none !important;
 }
 .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span {
-  --wp-underline-color: var(--wp-admin-theme-color);
-  background-image: linear-gradient(45deg, transparent 20%, var(--wp-underline-color) 30%, var(--wp-underline-color) 36%, transparent 46%), linear-gradient(135deg, transparent 54%, var(--wp-underline-color) 64%, var(--wp-underline-color) 70%, transparent 80%);
-  background-position: 0 100%;
-  background-size: 6px 3px;
-  background-repeat: repeat-x;
-  padding-bottom: 0.1em;
-}
-.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-invalid span, .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-draft span {
-  --wp-underline-color: #cc1818;
+  -webkit-text-decoration: wavy underline;
+          text-decoration: wavy underline;
+  -webkit-text-decoration-skip-ink: none;
+          text-decoration-skip-ink: none;
+  text-underline-offset: 0.25rem;
 }
 .wp-block-navigation-link__placeholder.wp-block-navigation-item__content {
   cursor: pointer;
@@ -2369,6 +2365,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   height: auto;
   font-weight: inherit;
   font-family: inherit;
+  margin: 0;
   opacity: 1;
   padding: 0.25em;
 }

package/build-style/navigation-link/editor-rtl.css

@@ -156,15 +156,11 @@
   background-image: none !important;
 }
 .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span {
-  --wp-underline-color: var(--wp-admin-theme-color);
-  background-image: linear-gradient(-45deg, transparent 20%, var(--wp-underline-color) 30%, var(--wp-underline-color) 36%, transparent 46%), linear-gradient(-135deg, transparent 54%, var(--wp-underline-color) 64%, var(--wp-underline-color) 70%, transparent 80%);
-  background-position: 100% 100%;
-  background-size: 6px 3px;
-  background-repeat: repeat-x;
-  padding-bottom: 0.1em;
-}
-.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-invalid span, .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-draft span {
-  --wp-underline-color: #cc1818;
+  -webkit-text-decoration: wavy underline;
+          text-decoration: wavy underline;
+  -webkit-text-decoration-skip-ink: none;
+          text-decoration-skip-ink: none;
+  text-underline-offset: 0.25rem;
 }
 .wp-block-navigation-link__placeholder.wp-block-navigation-item__content {
   cursor: pointer;

package/build-style/navigation-link/editor.css

@@ -156,15 +156,11 @@
   background-image: none !important;
 }
 .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span {
-  --wp-underline-color: var(--wp-admin-theme-color);
-  background-image: linear-gradient(45deg, transparent 20%, var(--wp-underline-color) 30%, var(--wp-underline-color) 36%, transparent 46%), linear-gradient(135deg, transparent 54%, var(--wp-underline-color) 64%, var(--wp-underline-color) 70%, transparent 80%);
-  background-position: 0 100%;
-  background-size: 6px 3px;
-  background-repeat: repeat-x;
-  padding-bottom: 0.1em;
-}
-.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-invalid span, .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text.is-draft span {
-  --wp-underline-color: #cc1818;
+  -webkit-text-decoration: wavy underline;
+          text-decoration: wavy underline;
+  -webkit-text-decoration-skip-ink: none;
+          text-decoration-skip-ink: none;
+  text-underline-offset: 0.25rem;
 }
 .wp-block-navigation-link__placeholder.wp-block-navigation-item__content {
   cursor: pointer;

package/build-style/post-comments-count/style-rtl.css

@@ -0,0 +1,103 @@
+/**
+*  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.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * 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.
+ */
+/**
+ * Typography
+ */
+/**
+ * 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-comments-count {
+  box-sizing: border-box;
+}

package/build-style/post-comments-count/style.css

@@ -0,0 +1,103 @@
+/**
+*  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.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * 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.
+ */
+/**
+ * Typography
+ */
+/**
+ * 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-comments-count {
+  box-sizing: border-box;
+}

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

@@ -138,6 +138,10 @@
   text-align: left;
 }
 
+.wp-block-pullquote.has-text-align-center blockquote {
+  text-align: center;
+}
+
 .wp-block-pullquote.is-style-solid-color {
   border: none;
 }

package/build-style/pullquote/style.css

@@ -138,6 +138,10 @@
   text-align: right;
 }
 
+.wp-block-pullquote.has-text-align-center blockquote {
+  text-align: center;
+}
+
 .wp-block-pullquote.is-style-solid-color {
   border: none;
 }

package/build-style/social-link/editor-rtl.css

@@ -114,6 +114,7 @@
   height: auto;
   font-weight: inherit;
   font-family: inherit;
+  margin: 0;
   opacity: 1;
   padding: 0.25em;
 }

package/build-style/social-link/editor.css

@@ -114,6 +114,7 @@
   height: auto;
   font-weight: inherit;
   font-family: inherit;
+  margin: 0;
   opacity: 1;
   padding: 0.25em;
 }

package/build-style/style-rtl.css

@@ -2931,6 +2931,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-right: 0.5em;
 }
 
+.wp-block-post-comments-count {
+  box-sizing: border-box;
+}
+
 .wp-block-post-content {
   display: flow-root;
 }
@@ -3127,6 +3131,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   text-align: left;
 }
 
+.wp-block-pullquote.has-text-align-center blockquote {
+  text-align: center;
+}
+
 .wp-block-pullquote.is-style-solid-color {
   border: none;
 }

package/build-style/style.css

@@ -2963,6 +2963,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   margin-left: 0.5em;
 }
 
+.wp-block-post-comments-count {
+  box-sizing: border-box;
+}
+
 .wp-block-post-content {
   display: flow-root;
 }
@@ -3159,6 +3163,10 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   text-align: right;
 }
 
+.wp-block-pullquote.has-text-align-center blockquote {
+  text-align: center;
+}
+
 .wp-block-pullquote.is-style-solid-color {
   border: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.18.0",
+	"version": "9.19.1",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,39 +41,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.18.0",
-		"@wordpress/api-fetch": "^7.18.0",
-		"@wordpress/autop": "^4.18.0",
-		"@wordpress/blob": "^4.18.0",
-		"@wordpress/block-editor": "^14.13.0",
-		"@wordpress/blocks": "^14.7.0",
-		"@wordpress/components": "^29.4.0",
-		"@wordpress/compose": "^7.18.0",
-		"@wordpress/core-data": "^7.18.0",
-		"@wordpress/data": "^10.18.0",
-		"@wordpress/date": "^5.18.0",
-		"@wordpress/deprecated": "^4.18.0",
-		"@wordpress/dom": "^4.18.0",
-		"@wordpress/element": "^6.18.0",
-		"@wordpress/escape-html": "^3.18.0",
-		"@wordpress/hooks": "^4.18.0",
-		"@wordpress/html-entities": "^4.18.0",
-		"@wordpress/i18n": "^5.18.0",
-		"@wordpress/icons": "^10.18.0",
-		"@wordpress/interactivity": "^6.18.0",
-		"@wordpress/interactivity-router": "^2.18.0",
-		"@wordpress/keyboard-shortcuts": "^5.18.0",
-		"@wordpress/keycodes": "^4.18.0",
-		"@wordpress/notices": "^5.18.0",
-		"@wordpress/patterns": "^2.18.0",
-		"@wordpress/primitives": "^4.18.0",
-		"@wordpress/private-apis": "^1.18.0",
-		"@wordpress/reusable-blocks": "^5.18.0",
-		"@wordpress/rich-text": "^7.18.0",
-		"@wordpress/server-side-render": "^5.18.0",
-		"@wordpress/url": "^4.18.0",
-		"@wordpress/viewport": "^6.18.0",
-		"@wordpress/wordcount": "^4.18.0",
+		"@wordpress/a11y": "^4.19.1",
+		"@wordpress/api-fetch": "^7.19.1",
+		"@wordpress/autop": "^4.19.1",
+		"@wordpress/blob": "^4.19.1",
+		"@wordpress/block-editor": "^14.14.1",
+		"@wordpress/blocks": "^14.8.1",
+		"@wordpress/components": "^29.5.1",
+		"@wordpress/compose": "^7.19.1",
+		"@wordpress/core-data": "^7.19.1",
+		"@wordpress/data": "^10.19.1",
+		"@wordpress/date": "^5.19.1",
+		"@wordpress/deprecated": "^4.19.1",
+		"@wordpress/dom": "^4.19.1",
+		"@wordpress/element": "^6.19.1",
+		"@wordpress/escape-html": "^3.19.1",
+		"@wordpress/hooks": "^4.19.1",
+		"@wordpress/html-entities": "^4.19.1",
+		"@wordpress/i18n": "^5.19.1",
+		"@wordpress/icons": "^10.19.1",
+		"@wordpress/interactivity": "^6.19.1",
+		"@wordpress/interactivity-router": "^2.19.1",
+		"@wordpress/keyboard-shortcuts": "^5.19.1",
+		"@wordpress/keycodes": "^4.19.1",
+		"@wordpress/notices": "^5.19.1",
+		"@wordpress/patterns": "^2.19.1",
+		"@wordpress/primitives": "^4.19.1",
+		"@wordpress/private-apis": "^1.19.1",
+		"@wordpress/reusable-blocks": "^5.19.1",
+		"@wordpress/rich-text": "^7.19.1",
+		"@wordpress/server-side-render": "^5.19.1",
+		"@wordpress/url": "^4.19.1",
+		"@wordpress/viewport": "^6.19.1",
+		"@wordpress/wordcount": "^4.19.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "afe4fb333177642180ac020f1030c5685eab7183"
+	"gitHead": "6f49fee89f840761f7fedf662713cbd4a71723e9"
 }

package/src/cover/edit/index.js

@@ -514,6 +514,8 @@ function CoverEdit( {
 								value={ overlayColor.color }
 								onChange={ onSetOverlayColor }
 								clearable={ false }
+								asButtons
+								aria-label={ __( 'Overlay color' ) }
 							/>
 						</div>
 					</CoverPlaceholder>

package/src/cover/test/edit.js

@@ -47,7 +47,7 @@ async function setup( attributes, useCoreBlocks, customSettings ) {
 
 async function createAndSelectBlock() {
 	await userEvent.click(
-		screen.getByRole( 'option', {
+		screen.getByRole( 'button', {
 			name: 'Black',
 		} )
 	);
@@ -72,7 +72,7 @@ describe( 'Cover block', () => {
 
 		test( 'can set overlay color using color picker on block placeholder', async () => {
 			const { container } = await setup();
-			const colorPicker = screen.getByRole( 'option', {
+			const colorPicker = screen.getByRole( 'button', {
 				name: 'Black',
 			} );
 			await userEvent.click( colorPicker );
@@ -96,7 +96,7 @@ describe( 'Cover block', () => {
 			await setup();
 
 			await userEvent.click(
-				screen.getByRole( 'option', {
+				screen.getByRole( 'button', {
 					name: 'Black',
 				} )
 			);
@@ -389,7 +389,7 @@ describe( 'Cover block', () => {
 	describe( 'isDark settings', () => {
 		test( 'should toggle is-light class if background changed from light to dark', async () => {
 			await setup();
-			const colorPicker = screen.getByRole( 'option', {
+			const colorPicker = screen.getByRole( 'button', {
 				name: 'White',
 			} );
 			await userEvent.click( colorPicker );
@@ -413,7 +413,7 @@ describe( 'Cover block', () => {
 		} );
 		test( 'should remove is-light class if overlay color is removed', async () => {
 			await setup();
-			const colorPicker = screen.getByRole( 'option', {
+			const colorPicker = screen.getByRole( 'button', {
 				name: 'White',
 			} );
 			await userEvent.click( colorPicker );
@@ -426,7 +426,7 @@ describe( 'Cover block', () => {
 				} )
 			);
 			await userEvent.click( screen.getByText( 'Overlay' ) );
-			// The default color is black, so clicking the black color option will remove the background color,
+			// The default color is black, so clicking the black color button will remove the background color,
 			// which should remove the isDark setting and assign the is-light class.
 			const popupColorPicker = screen.getByRole( 'option', {
 				name: 'White',

package/src/form/edit.js

@@ -123,6 +123,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 							help={ __(
 								'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
 							) }
+							type="email"
 						/>
 					) }
 				</PanelBody>
@@ -159,6 +160,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						help={ __(
 							'The URL where the form should be submitted.'
 						) }
+						type="url"
 					/>
 				</InspectorControls>
 			) }

package/src/image/view.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 /**
  * Tracks whether user is touching screen; used to differentiate behavior for
@@ -128,7 +133,7 @@ const { state, actions, callbacks } = store(
 					}, 450 );
 				}
 			},
-			handleKeydown( event ) {
+			handleKeydown: withSyncEvent( ( event ) => {
 				if ( state.overlayEnabled ) {
 					// Focuses the close button when the user presses the tab key.
 					if ( event.key === 'Tab' ) {
@@ -141,8 +146,8 @@ const { state, actions, callbacks } = store(
 						actions.hideLightbox();
 					}
 				}
-			},
-			handleTouchMove( event ) {
+			} ),
+			handleTouchMove: withSyncEvent( ( event ) => {
 				// On mobile devices, prevents triggering the scroll event because
 				// otherwise the page jumps around when it resets the scroll position.
 				// This also means that closing the lightbox requires that a user
@@ -152,7 +157,7 @@ const { state, actions, callbacks } = store(
 				if ( state.overlayEnabled ) {
 					event.preventDefault();
 				}
-			},
+			} ),
 			handleTouchStart() {
 				isTouching = true;
 			},

package/src/latest-posts/edit.js

@@ -126,6 +126,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					orderby: orderBy,
 					per_page: postsToShow,
 					_embed: 'wp:featuredmedia',
+					ignore_sticky: true,
 				} ).filter( ( [ , value ] ) => typeof value !== 'undefined' )
 			);
 

package/src/navigation/use-template-part-area-label.js

@@ -36,24 +36,24 @@ export default function useTemplatePartAreaLabel( clientId ) {
 				return;
 			}
 
+			const { getCurrentTheme, getEditedEntityRecord } =
+				select( coreStore );
+
+			const currentTheme = getCurrentTheme();
 			const defaultTemplatePartAreas =
-				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
-					?.default_template_part_areas || [];
+				currentTheme?.default_template_part_areas || [];
 
 			const definedAreas = defaultTemplatePartAreas.map( ( item ) => ( {
 				...item,
 				icon: getTemplatePartIcon( item.icon ),
 			} ) );
 
-			const { getCurrentTheme, getEditedEntityRecord } =
-				select( coreStore );
-
 			for ( const templatePartClientId of parentTemplatePartClientIds ) {
 				const templatePartBlock = getBlock( templatePartClientId );
 
 				// The 'area' usually isn't stored on the block, but instead
 				// on the entity.
-				const { theme = getCurrentTheme()?.stylesheet, slug } =
+				const { theme = currentTheme?.stylesheet, slug } =
 					templatePartBlock.attributes;
 				const templatePartEntityId = createTemplatePartId(
 					theme,

package/src/navigation/view.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const focusableSelectors = [
 	'a[href]',
@@ -106,7 +111,7 @@ const { state, actions } = store(
 					actions.openMenu( 'click' );
 				}
 			},
-			handleMenuKeydown( event ) {
+			handleMenuKeydown: withSyncEvent( ( event ) => {
 				const { type, firstFocusableElement, lastFocusableElement } =
 					getContext();
 				if ( state.menuOpenedBy.click ) {
@@ -137,7 +142,7 @@ const { state, actions } = store(
 						}
 					}
 				}
-			},
+			} ),
 			handleMenuFocusout( event ) {
 				const { modal, type } = getContext();
 				// If focus is outside modal, and in the document, close menu

package/src/navigation-link/edit.js

@@ -201,6 +201,7 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 						);
 					} }
 					autoComplete="off"
+					type="url"
 				/>
 			</ToolsPanelItem>