@wordpress/block-library 9.0.4 → 9.0.6

package/src/media-text/edit.js

@@ -46,7 +46,7 @@ import {
 	TEMPLATE,
 } from './constants';
 import { unlock } from '../lock-unlock';
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const { ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -276,6 +276,7 @@ function MediaTextEdit( {
 			mediaSizeSlug: newMediaSizeSlug,
 		} );
 	};
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const mediaTextGeneralSettings = (
 		<ToolsPanel
@@ -290,7 +291,7 @@ function MediaTextEdit( {
 					mediaSizeSlug: undefined,
 				} );
 			} }
-			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			<ToolsPanelItem
 				label={ __( 'Media width' ) }

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

@@ -1,3 +1,18 @@
+// Allow these default styles to be overridden by global styles.
+:where(.wp-block-post-comments-form) {
+	textarea,
+	input:not([type="submit"]) {
+		border: 1px solid $gray-600;
+		font-size: 1em;
+		font-family: inherit;
+	}
+
+	textarea,
+	input:where(:not([type="submit"]):not([type="checkbox"])) {
+		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
+	}
+}
+
 .wp-block-post-comments-form {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
@@ -31,18 +46,6 @@
 		overflow-wrap: break-word;
 	}
 
-	textarea,
-	input:not([type="submit"]) {
-		border: 1px solid $gray-600;
-		font-size: 1em;
-		font-family: inherit;
-	}
-
-	textarea,
-	input:not([type="submit"]):not([type="checkbox"]) {
-		padding: calc(0.667em + 2px); // The extra 2px is added to match outline buttons.
-	}
-
 	.comment-form {
 		textarea,
 		// Make sure to not set display block on hidden input fields, to prevent

package/src/query/edit/inspector-controls/index.js

@@ -34,7 +34,7 @@ import {
 	isControlAllowed,
 	useTaxonomies,
 } from '../../utils';
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../../../utils/constants';
+import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
@@ -128,6 +128,7 @@ export default function QueryInspectorControls( props ) {
 		showAuthorControl ||
 		showSearchControl ||
 		showParentControl;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
 		<>
@@ -221,7 +222,7 @@ export default function QueryInspectorControls( props ) {
 						} );
 						setQuerySearch( '' );
 					} }
-					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					{ showTaxControl && (
 						<ToolsPanelItem

package/src/social-links/style.scss

@@ -107,7 +107,7 @@
 }
 
 // Provide colors for a range of icons.
-.wp-block-social-links:not(.is-style-logos-only) {
+:where(.wp-block-social-links:not(.is-style-logos-only)) {
 	// Generic items such as mail, feed, etc.
 	@import "../social-link/socials-with-bg.scss";
 }
@@ -116,7 +116,7 @@
 // The specificity for this selector has not been reduced to 0-1-0 as per
 // global styles variation selectors as the lack of background should be
 // enforced for this block style.
-.wp-block-social-links.is-style-logos-only {
+:where(.wp-block-social-links.is-style-logos-only) {
 	.wp-social-link {
 		background: none;
 

package/src/utils/hooks.js

@@ -6,6 +6,7 @@ import { useLayoutEffect, useEffect, useRef } from '@wordpress/element';
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Returns whether the current user can edit the given entity.
@@ -84,3 +85,16 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 		} );
 	}, [ getSettings ] );
 }
+
+export function useToolsPanelDropdownMenuProps() {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+}

package/build/utils/constants.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TOOLSPANEL_DROPDOWNMENU_PROPS = void 0;
-// The following dropdown menu props aim to provide a consistent offset and
-// placement for ToolsPanel menus for block controls to match color popovers.
-const TOOLSPANEL_DROPDOWNMENU_PROPS = exports.TOOLSPANEL_DROPDOWNMENU_PROPS = {
-  popoverProps: {
-    placement: 'left-start',
-    offset: 259 // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
-  }
-};
-//# sourceMappingURL=constants.js.map

package/build/utils/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["TOOLSPANEL_DROPDOWNMENU_PROPS","exports","popoverProps","placement","offset"],"sources":["@wordpress/block-library/src/utils/constants.js"],"sourcesContent":["// The following dropdown menu props aim to provide a consistent offset and\n// placement for ToolsPanel menus for block controls to match color popovers.\nexport const TOOLSPANEL_DROPDOWNMENU_PROPS = {\n\tpopoverProps: {\n\t\tplacement: 'left-start',\n\t\toffset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t},\n};\n"],"mappings":";;;;;;AAAA;AACA;AACO,MAAMA,6BAA6B,GAAAC,OAAA,CAAAD,6BAAA,GAAG;EAC5CE,YAAY,EAAE;IACbC,SAAS,EAAE,YAAY;IACvBC,MAAM,EAAE,GAAG,CAAE;EACd;AACD,CAAC","ignoreList":[]}

package/build-module/utils/constants.js

@@ -1,9 +0,0 @@
-// The following dropdown menu props aim to provide a consistent offset and
-// placement for ToolsPanel menus for block controls to match color popovers.
-export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
-  popoverProps: {
-    placement: 'left-start',
-    offset: 259 // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
-  }
-};
-//# sourceMappingURL=constants.js.map

package/build-module/utils/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["TOOLSPANEL_DROPDOWNMENU_PROPS","popoverProps","placement","offset"],"sources":["@wordpress/block-library/src/utils/constants.js"],"sourcesContent":["// The following dropdown menu props aim to provide a consistent offset and\n// placement for ToolsPanel menus for block controls to match color popovers.\nexport const TOOLSPANEL_DROPDOWNMENU_PROPS = {\n\tpopoverProps: {\n\t\tplacement: 'left-start',\n\t\toffset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t},\n};\n"],"mappings":"AAAA;AACA;AACA,OAAO,MAAMA,6BAA6B,GAAG;EAC5CC,YAAY,EAAE;IACbC,SAAS,EAAE,YAAY;IACvBC,MAAM,EAAE,GAAG,CAAE;EACd;AACD,CAAC","ignoreList":[]}

package/src/utils/constants.js

@@ -1,8 +0,0 @@
-// The following dropdown menu props aim to provide a consistent offset and
-// placement for ToolsPanel menus for block controls to match color popovers.
-export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
-	popoverProps: {
-		placement: 'left-start',
-		offset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
-	},
-};