From 6893b2d87910bdc2f1c5dab899f0e352cd774c33 Mon Sep 17 00:00:00 2001
From: tellthemachines <tellthemachines@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:18:48 +1100
Subject: [PATCH 1/6] Try toggle instead of dropdown to show stylebook.
 (#67810)

* Try toggle instead of dropdown to show stylebook.

* Use button instead of actual toggle

* Make button icon except if text labels are enabled
---
 .../edit-site/src/components/editor/index.js  |  8 +---
 .../edit-site/src/components/layout/index.js  | 13 ++++-
 .../sidebar-global-styles-wrapper/index.js    | 47 +++++--------------
 .../sidebar-global-styles-wrapper/style.scss  | 22 +++++++++
 4 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index c045bafd8a6839..ad88ee07e2150f 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -20,7 +20,6 @@ import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library
 import { useCallback, useMemo } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { store as preferencesStore } from '@wordpress/preferences';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Icon, arrowUpLeft } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -130,7 +129,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	const { postType, postId, context } = entity;
 	const {
 		supportsGlobalStyles,
-		showIconLabels,
 		editorCanvasView,
 		currentPostIsTrashed,
 		hasSiteIcon,
@@ -138,13 +136,11 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		const { getEditorCanvasContainerView } = unlock(
 			select( editSiteStore )
 		);
-		const { get } = select( preferencesStore );
 		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
-			showIconLabels: get( 'core', 'showIconLabels' ),
 			editorCanvasView: getEditorCanvasContainerView(),
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
@@ -267,9 +263,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					postId={ postWithTemplate ? context.postId : postId }
 					templateId={ postWithTemplate ? postId : undefined }
 					settings={ settings }
-					className={ clsx( 'edit-site-editor__editor-interface', {
-						'show-icon-labels': showIconLabels,
-					} ) }
+					className="edit-site-editor__editor-interface"
 					styles={ styles }
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index 20162c5272f2ef..a5e14f0be82816 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -32,7 +32,8 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { PluginArea } from '@wordpress/plugins';
 import { store as noticesStore } from '@wordpress/notices';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -70,6 +71,15 @@ function Layout() {
 		triggerAnimationOnChange: routeKey + '-' + canvas,
 	} );
 
+	const { showIconLabels } = useSelect( ( select ) => {
+		return {
+			showIconLabels: select( preferencesStore ).get(
+				'core',
+				'showIconLabels'
+			),
+		};
+	} );
+
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const previousCanvaMode = usePrevious( canvas );
@@ -93,6 +103,7 @@ function Layout() {
 					navigateRegionsProps.className,
 					{
 						'is-full-canvas': canvas === 'edit',
+						'show-icon-labels': showIconLabels,
 					}
 				) }
 			>
diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
index 980f20c49821b0..030512a38fab3a 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -5,11 +5,9 @@ import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { addQueryArgs } from '@wordpress/url';
+import { seen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,44 +19,21 @@ import StyleBook from '../style-book';
 import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
-const { Menu } = unlock( componentsPrivateApis );
 
 const GlobalStylesPageActions = ( {
 	isStyleBookOpened,
 	setIsStyleBookOpened,
 } ) => {
 	return (
-		<Menu
-			trigger={
-				<Button __next40pxDefaultSize variant="tertiary" size="compact">
-					{ __( 'Preview' ) }
-				</Button>
-			}
-		>
-			<Menu.RadioItem
-				value
-				checked={ isStyleBookOpened }
-				name="styles-preview-actions"
-				onChange={ () => setIsStyleBookOpened( true ) }
-				defaultChecked
-			>
-				<Menu.ItemLabel>{ __( 'Style book' ) }</Menu.ItemLabel>
-				<Menu.ItemHelpText>
-					{ __( 'Preview blocks and styles.' ) }
-				</Menu.ItemHelpText>
-			</Menu.RadioItem>
-			<Menu.RadioItem
-				value={ false }
-				checked={ ! isStyleBookOpened }
-				name="styles-preview-actions"
-				onChange={ () => setIsStyleBookOpened( false ) }
-			>
-				<Menu.ItemLabel>{ __( 'Site' ) }</Menu.ItemLabel>
-				<Menu.ItemHelpText>
-					{ __( 'Preview your site.' ) }
-				</Menu.ItemHelpText>
-			</Menu.RadioItem>
-		</Menu>
+		<Button
+			isPressed={ isStyleBookOpened }
+			icon={ seen }
+			label={ __( 'Style Book' ) }
+			onClick={ () => {
+				setIsStyleBookOpened( ! isStyleBookOpened );
+			} }
+			size="compact"
+		/>
 	);
 };
 
diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss
index 88aa9ddf0c1618..0fa4e158fe7f10 100644
--- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss
+++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss
@@ -33,3 +33,25 @@
 		color: $gray-900;
 	}
 }
+
+.show-icon-labels {
+	.edit-site-styles .edit-site-page-content {
+		.edit-site-page-header__actions {
+			.components-button.has-icon {
+				width: auto;
+				padding: 0 $grid-unit-10;
+
+				// Hide the button icons when labels are set to display...
+				svg {
+					display: none;
+				}
+				// ... and display labels.
+				&::after {
+					content: attr(aria-label);
+					font-size: $helptext-font-size;
+				}
+			}
+
+		}
+	}
+}

From 34d25a8faf8f60faa23bf11c150b4ff48a4d020a Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:45:39 +0900
Subject: [PATCH 2/6] DateFormatPicker: Improve line breaks in JSDoc and README
 (#68006)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 .../components/date-format-picker/README.md   | 19 ++++++-------------
 .../components/date-format-picker/index.js    | 19 ++++---------------
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/packages/block-editor/src/components/date-format-picker/README.md b/packages/block-editor/src/components/date-format-picker/README.md
index e057bdc31a1680..f6160cb90955b5 100644
--- a/packages/block-editor/src/components/date-format-picker/README.md
+++ b/packages/block-editor/src/components/date-format-picker/README.md
@@ -1,17 +1,12 @@
 # DateFormatPicker
 
-The `DateFormatPicker` component renders controls that let the user choose a
-_date format_. That is, how they want their dates to be formatted.
+The `DateFormatPicker` component renders controls that let the user choose a _date format_. That is, how they want their dates to be formatted.
 
-A user can pick _Default_ to use the default date format (usually set at the
-site level).
+A user can pick _Default_ to use the default date format (usually set at the site level).
 
-Otherwise, a user may choose a suggested date format or type in their own date
-format by selecting _Custom_.
+Otherwise, a user may choose a suggested date format or type in their own date format by selecting _Custom_.
 
-All date format strings should be in the format accepted by by the [`dateI18n`
-function in
-`@wordpress/date`](https://github.com/WordPress/gutenberg/tree/trunk/packages/date#datei18n).
+All date format strings should be in the format accepted by by the [`dateI18n` function in `@wordpress/date`](https://github.com/WordPress/gutenberg/tree/trunk/packages/date#datei18n).
 
 ## Usage
 
@@ -43,16 +38,14 @@ The current date format selected by the user. If `null`, _Default_ is selected.
 
 ### `defaultFormat`
 
-The default format string. Used to show to the user what the date will look like
-if _Default_ is selected.
+The default format string. Used to show to the user what the date will look like if _Default_ is selected.
 
 -   Type: `string`
 -   Required: Yes
 
 ### `onChange`
 
-Called when the user makes a selection, or when the user types in a date format.
-`null` indicates that _Default_ is selected.
+Called when the user makes a selection, or when the user types in a date format. `null` indicates that _Default_ is selected.
 
 -   Type: `( format: string|null ) => void`
 -   Required: Yes
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
index eb269e03ca5abc..719390a1d6f903 100644
--- a/packages/block-editor/src/components/date-format-picker/index.js
+++ b/packages/block-editor/src/components/date-format-picker/index.js
@@ -29,21 +29,10 @@ if ( exampleDate.getMonth() === 4 ) {
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md
  *
- * @param {Object}                          props
- * @param {string|null}                     props.format        The selected date
- *                                                              format. If
- *                                                              `null`,
- *                                                              _Default_ is
- *                                                              selected.
- * @param {string}                          props.defaultFormat The date format that
- *                                                              will be used if the
- *                                                              user selects
- *                                                              'Default'.
- * @param {( format: string|null ) => void} props.onChange      Called when a
- *                                                              selection is
- *                                                              made. If `null`,
- *                                                              _Default_ is
- *                                                              selected.
+ * @param {Object}      props
+ * @param {string|null} props.format        The selected date format. If `null`, _Default_ is selected.
+ * @param {string}      props.defaultFormat The date format that will be used if the user selects 'Default'.
+ * @param {Function}    props.onChange      Called when a selection is made. If `null`, _Default_ is selected.
  */
 export default function DateFormatPicker( {
 	format,

From bc4f6c6632f52dfc455709bd27bda08041e225ec Mon Sep 17 00:00:00 2001
From: Ankit Kumar Shah <ankit.shah@rtcamp.com>
Date: Mon, 16 Dec 2024 13:22:32 +0530
Subject: [PATCH 3/6] LoginOut: Add dropdown menu props to ToolsPanel component
 (#68009)

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 packages/block-library/src/loginout/edit.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-library/src/loginout/edit.js b/packages/block-library/src/loginout/edit.js
index 76d6e98b1ccc32..9af634c87371cf 100644
--- a/packages/block-library/src/loginout/edit.js
+++ b/packages/block-library/src/loginout/edit.js
@@ -8,9 +8,14 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function LoginOutEdit( { attributes, setAttributes } ) {
 	const { displayLoginAsForm, redirectToCurrent } = attributes;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (
 		<>
@@ -23,6 +28,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 							redirectToCurrent: true,
 						} );
 					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						label={ __( 'Display login as form' ) }

From 081a66893c5028a0d5bd2ad4bb8abbb292553aa1 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 16 Dec 2024 12:12:45 +0400
Subject: [PATCH 4/6] DOM: Support class wildcard matcher in 'cleanNodeList'
 (#67830)

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
---
 packages/block-library/src/image/transforms.js | 2 +-
 packages/dom/src/dom/clean-node-list.js        | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/transforms.js b/packages/block-library/src/image/transforms.js
index 32824c372efdcb..0119009b2182c4 100644
--- a/packages/block-library/src/image/transforms.js
+++ b/packages/block-library/src/image/transforms.js
@@ -59,7 +59,7 @@ const schema = ( { phrasingContentSchema } ) => ( {
 			...imageSchema,
 			a: {
 				attributes: [ 'href', 'rel', 'target' ],
-				classes: [ /[\w-]*/ ],
+				classes: [ '*' ],
 				children: imageSchema,
 			},
 			figcaption: {
diff --git a/packages/dom/src/dom/clean-node-list.js b/packages/dom/src/dom/clean-node-list.js
index bbdff13b470d69..f1b7e1be7264f4 100644
--- a/packages/dom/src/dom/clean-node-list.js
+++ b/packages/dom/src/dom/clean-node-list.js
@@ -76,7 +76,10 @@ export default function cleanNodeList( nodeList, doc, schema, inline ) {
 						// TODO: Explore patching this in jsdom-jscore.
 						if ( node.classList && node.classList.length ) {
 							const mattchers = classes.map( ( item ) => {
-								if ( typeof item === 'string' ) {
+								if ( item === '*' ) {
+									// Keep all classes.
+									return () => true;
+								} else if ( typeof item === 'string' ) {
 									return (
 										/** @type {string} */ className
 									) => className === item;

From d02331c2d22a636f20818dd311f9cc8a48b9f82d Mon Sep 17 00:00:00 2001
From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:00:46 +0530
Subject: [PATCH 5/6] Page List Block: Add dropdown menu props to ToolsPanel
 component (#68012)

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 packages/block-library/src/page-list/edit.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index d9fee67968ac08..00d96e9ba307bd 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -38,6 +38,7 @@ import {
 	convertDescription,
 	ConvertToLinksModal,
 } from './convert-to-links-modal';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
@@ -124,6 +125,7 @@ export default function PageListEdit( {
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = useCallback( () => setOpen( true ), [] );
 	const closeModal = () => setOpen( false );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
 		'postType',
@@ -326,6 +328,7 @@ export default function PageListEdit( {
 					resetAll={ () => {
 						setAttributes( { parentPageID: 0 } );
 					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					{ pagesTree.length > 0 && (
 						<ToolsPanelItem

From dad6c824ed5a0c9582c1646f1c1a6d99901af007 Mon Sep 17 00:00:00 2001
From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:01:42 +0530
Subject: [PATCH 6/6] Archive: Add dropdown menu props to ToolsPanel component
 (#68010)

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 packages/block-library/src/archives/edit.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
index b51bd9a4fe1e6b..d4f25da8507f3e 100644
--- a/packages/block-library/src/archives/edit.js
+++ b/packages/block-library/src/archives/edit.js
@@ -12,9 +12,16 @@ import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function ArchivesEdit( { attributes, setAttributes } ) {
 	const { showLabel, showPostCounts, displayAsDropdown, type } = attributes;
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
@@ -28,6 +35,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 							type: 'monthly',
 						} );
 					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						label={ __( 'Display as dropdown' ) }