diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
index 3432e85728fd38..1cd2b51054e7ee 100644
--- a/packages/block-editor/src/components/image-size-control/index.js
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -139,7 +139,7 @@ export default function ImageSizeControl( {
value={ scale }
label={ sprintf(
/* translators: Percentage value. */
- __( '%1$d%%' ),
+ __( '%d%%' ),
scale
) }
/>
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 3b21fd4a04e6d0..3afbf3f5b5bc16 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -9,6 +9,7 @@ import clsx from 'clsx';
import {
__experimentalHStack as HStack,
__experimentalTruncate as Truncate,
+ privateApis as componentsPrivateApis,
} from '@wordpress/components';
import { forwardRef } from '@wordpress/element';
import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
@@ -25,6 +26,8 @@ import ListViewExpander from './expander';
import { useBlockLock } from '../block-lock';
import useListViewImages from './use-list-view-images';
import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+const { Badge } = unlock( componentsPrivateApis );
function ListViewBlockSelectButton(
{
@@ -117,12 +120,9 @@ function ListViewBlockSelectButton(
{ blockInformation?.anchor && (
-
+
{ blockInformation.anchor }
-
+
) }
{ isSticky && (
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index b010fbf8e73dea..138029262cd7f5 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -408,15 +408,11 @@
position: absolute;
right: 0;
transform: translateY(-50%);
- background: rgba($black, 0.1);
- border-radius: $radius-x-small;
- padding: 2px 6px;
- max-width: 100%;
- box-sizing: border-box;
}
&.is-selected .block-editor-list-view-block-select-button__anchor {
background: rgba($black, 0.3);
+ color: $white;
}
.block-editor-list-view-block-select-button__lock,
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
index 8be620bf40d938..0f6fa60a6224ed 100644
--- a/packages/block-editor/src/hooks/color.scss
+++ b/packages/block-editor/src/hooks/color.scss
@@ -1,12 +1,5 @@
.color-block-support-panel {
.block-editor-contrast-checker {
- /**
- * Contrast checkers are forced to the bottom of the panel so all
- * injected color controls can appear as a single item group without
- * the contrast checkers suddenly appearing between items.
- */
- /* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
- order: 9999;
grid-column: span 2;
margin-top: $grid-unit-20;
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 06e10f604650eb..67e1218ca2f65d 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -150,7 +150,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
value={ widthValue }
label={ sprintf(
/* translators: Percentage value. */
- __( '%1$d%%' ),
+ __( '%d%%' ),
widthValue
) }
/>
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index ae7dd60bd0c5ba..a9722c0b4f070e 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -142,24 +142,28 @@ function ColorTools( {
label: __( 'Text' ),
onColorChange: setTextColor,
resetAllFilter: () => setTextColor(),
+ clearable: true,
},
{
colorValue: backgroundColor.color,
label: __( 'Background' ),
onColorChange: setBackgroundColor,
resetAllFilter: () => setBackgroundColor(),
+ clearable: true,
},
{
colorValue: overlayTextColor.color,
label: __( 'Submenu & overlay text' ),
onColorChange: setOverlayTextColor,
resetAllFilter: () => setOverlayTextColor(),
+ clearable: true,
},
{
colorValue: overlayBackgroundColor.color,
label: __( 'Submenu & overlay background' ),
onColorChange: setOverlayBackgroundColor,
resetAllFilter: () => setOverlayBackgroundColor(),
+ clearable: true,
},
] }
panelId={ clientId }
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index b4ac37220c816c..ed8edf4a5aca8c 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -472,7 +472,7 @@ export default function SearchEdit( {
value={ widthValue }
label={ sprintf(
/* translators: Percentage value. */
- __( '%1$d%%' ),
+ __( '%d%%' ),
widthValue
) }
/>
diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx
index ee08003c3911dc..e57be66db0a7aa 100644
--- a/packages/components/src/badge/index.tsx
+++ b/packages/components/src/badge/index.tsx
@@ -15,45 +15,46 @@ import type { BadgeProps } from './types';
import type { WordPressComponentProps } from '../context';
import Icon from '../icon';
+/**
+ * Returns an icon based on the badge context.
+ *
+ * @return The corresponding icon for the provided context.
+ */
+function contextBasedIcon( intent: BadgeProps[ 'intent' ] = 'default' ) {
+ switch ( intent ) {
+ case 'info':
+ return info;
+ case 'success':
+ return published;
+ case 'warning':
+ return caution;
+ case 'error':
+ return error;
+ default:
+ return null;
+ }
+}
+
function Badge( {
className,
intent = 'default',
children,
...props
}: WordPressComponentProps< BadgeProps, 'span', false > ) {
- /**
- * Returns an icon based on the badge context.
- *
- * @return The corresponding icon for the provided context.
- */
- function contextBasedIcon() {
- switch ( intent ) {
- case 'info':
- return info;
- case 'success':
- return published;
- case 'warning':
- return caution;
- case 'error':
- return error;
- default:
- return null;
- }
- }
+ const icon = contextBasedIcon( intent );
+ const hasIcon = !! icon;
return (
- { intent !== 'default' && (
+ { hasIcon && (