+
{ ! isMultiToolbar &&
isLargeViewport &&
blockEditingMode === 'default' &&
}
@@ -135,6 +137,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
{ ! isMultiToolbar && (
) }
Date: Mon, 26 Jun 2023 11:36:30 -0400
Subject: [PATCH 13/37] Fix missing MenuGroup in header more menu (#51860)
---
.../components/header-edit-mode/more-menu/index.js | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
index 802e9f9439811..7fe63a343960a 100644
--- a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
@@ -116,14 +116,14 @@ export default function MoreMenu( { showIconLabels } ) {
'\\'
) }
/>
-
-
+
+
+
- { title }
-
-
- { description }
-
-
+
+ { title }
+
+ { children }
+
+
);
}
@@ -104,6 +161,26 @@ export default function NewTemplate( {
const { createErrorNotice, createSuccessNotice } =
useDispatch( noticesStore );
const { setTemplate } = unlock( useDispatch( editSiteStore ) );
+
+ const { homeUrl } = useSelect( ( select ) => {
+ const {
+ getUnstableBase, // Site index.
+ } = select( coreStore );
+
+ return {
+ homeUrl: getUnstableBase()?.home,
+ };
+ }, [] );
+
+ const TEMPLATE_SHORT_DESCRIPTIONS = {
+ 'front-page': homeUrl,
+ date: sprintf(
+ // translators: %s: The homepage url.
+ __( 'E.g. %s' ),
+ homeUrl + '/' + new Date().getFullYear()
+ ),
+ };
+
async function createTemplate( template, isWPSuggestion = true ) {
if ( isCreatingTemplate ) {
return;
@@ -220,14 +297,25 @@ export default function NewTemplate( {
justify="center"
className="edit-site-add-new-template__template-list__contents"
>
+
+ { __(
+ 'Select what the new template should apply to:'
+ ) }
+
{ missingTemplates.map( ( template ) => {
- const { title, description, slug, onClick } =
- template;
+ const { title, slug, onClick } = template;
return (
onClick
? onClick( template )
@@ -238,15 +326,23 @@ export default function NewTemplate( {
} ) }
setModalContent(
modalContentMap.customGenericTemplate
)
}
- />
+ >
+
+ { __(
+ 'A custom template can be manually applied to any post or page.'
+ ) }
+
+
) }
{ modalContent === modalContentMap.customTemplate && (
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index c8c2ef9f54a07..b1c2b669e24ce 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -138,17 +138,39 @@
@include break-large() {
width: calc(100% - #{$grid-unit-80 * 2});
}
+
+ .edit-site-add-new-template__template-button,
+ .edit-site-add-new-template__custom-template-button {
+ svg {
+ fill: var(--wp-admin-theme-color);
+ }
+ }
+
+ .edit-site-add-new-template__custom-template-button {
+ .edit-site-add-new-template__template-name {
+ flex-grow: 1;
+ align-items: flex-start;
+ }
+ }
+
+ .edit-site-add-new-template__template-icon {
+ padding: $grid-unit-10;
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+ border-radius: 100%;
+ max-height: $grid-unit-50;
+ max-width: $grid-unit-50;
+ }
}
.edit-site-custom-template-modal__contents,
.edit-site-add-new-template__template-list__contents {
> .components-button {
- padding: $grid-unit-30;
+ padding: $grid-unit-40;
border-radius: $radius-block-ui;
display: flex;
flex-direction: column;
border: $border-width solid $gray-300;
- min-height: $grid-unit-80 * 3;
+ justify-content: center;
// Show the boundary of the button, in High Contrast Mode.
outline: 1px solid transparent;
@@ -183,6 +205,12 @@
}
}
}
+
+ .edit-site-add-new-template__custom-template-button,
+ .edit-site-add-new-template__template-list__prompt {
+ grid-column-start: 1;
+ grid-column-end: 4;
+ }
}
.edit-site-add-new-template__template-list__contents {
From bd973878c6daa871194bfb3e7197b4b999907f45 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 23 Jun 2023 23:32:45 +0900
Subject: [PATCH 25/37] Buttons Block: Fix for orientation-based block movers
(#51831)
---
packages/block-library/src/buttons/edit.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 869968e5951a8..78be70ed9dc35 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -36,7 +36,7 @@ const DEFAULT_BLOCK = {
};
function ButtonsEdit( { attributes, className } ) {
- const { fontSize, style } = attributes;
+ const { fontSize, layout, style } = attributes;
const blockProps = useBlockProps( {
className: classnames( className, {
'has-custom-font-size': fontSize || style?.typography?.fontSize,
@@ -59,8 +59,8 @@ function ButtonsEdit( { attributes, className } ) {
{ className: preferredStyle && `is-style-${ preferredStyle }` },
],
],
-
templateInsertUpdatesSelection: true,
+ orientation: layout?.orientation ?? 'horizontal',
} );
return ;
From a7c4b8f2ec5b21df1c9c7e244f969d801a29996b Mon Sep 17 00:00:00 2001
From: Lena Morita
Date: Sat, 24 Jun 2023 05:14:17 +0900
Subject: [PATCH 26/37] Button: Introduce `size` prop (#51842)
* Revert "Button: Add opt-in prop for larger `isSmall` size (#51012)"
This reverts commit 19bcabfcbbc483028d1a429d9abe6a0fd595d233.
# Conflicts:
# packages/components/CHANGELOG.md
* Add docs for `size` prop
Also fixes type duplicate prop name issues in NumberControl and FontSizePicker
* Add CSS
* Fixup
* Add TODO for deprecation
* Add test for back compat
* Fixup
* Add changelog
* Tweak description for "compact"
* Note that the `size` prop takes precedence
* Add test for prop priority
* Stop leaking `spinButtonSize` prop for styling
---
packages/base-styles/_variables.scss | 2 +-
packages/components/CHANGELOG.md | 1 +
packages/components/src/button/README.md | 15 +++++++++++
packages/components/src/button/index.tsx | 15 ++++++++---
packages/components/src/button/style.scss | 25 +++++++++---------
packages/components/src/button/test/index.tsx | 13 ++++++++++
packages/components/src/button/types.ts | 26 ++++++++++++-------
.../components/src/font-size-picker/index.tsx | 14 ++++++----
.../components/src/font-size-picker/styles.ts | 10 -------
.../components/src/number-control/index.tsx | 9 ++++---
.../styles/number-control-styles.ts | 24 ++++++-----------
11 files changed, 94 insertions(+), 60 deletions(-)
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 31f197ba64270..584c057ec1eca 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -48,7 +48,7 @@ $icon-size: 24px;
$button-size: 36px;
$button-size-next-default-40px: 40px; // transitionary variable for next default button size
$button-size-small: 24px;
-$button-size-small-next-default-32px: 32px; // transitionary variable for next small button size
+$button-size-compact: 32px;
$header-height: 60px;
$panel-header-height: $grid-unit-60;
$nav-sidebar-width: 360px;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 90a6d2d556f63..4c52a377f5b5e 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -7,6 +7,7 @@
- `SelectControl`: Added option to set hidden options. ([#51545](https://github.com/WordPress/gutenberg/pull/51545))
- `UnitControl`: Revamp support for changing unit by typing ([#39303](https://github.com/WordPress/gutenberg/pull/39303)).
- `Modal`: Update corner radius to be between buttons and the site view frame, in a 2-4-8 system. ([#51254](https://github.com/WordPress/gutenberg/pull/51254)).
+- `Button`: Introduce `size` prop with `default`, `compact`, and `small` variants ([#51842](https://github.com/WordPress/gutenberg/pull/51842)).
- `ItemGroup`: Update button focus state styles to be inline with other button focus states in the editor. ([#51576](https://github.com/WordPress/gutenberg/pull/51576)).
### Bug Fix
diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md
index 66bbae67ebcd5..5430b869485ea 100644
--- a/packages/components/src/button/README.md
+++ b/packages/components/src/button/README.md
@@ -198,6 +198,8 @@ Renders a pressed button style.
Decreases the size of the button.
+Deprecated in favor of the `size` prop. If both props are defined, the `size` prop will take precedence.
+
- Required: No
#### `label`: `string`
@@ -218,6 +220,19 @@ If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) com
- Required: No
+#### `size`: `'default'` | `'compact'` | `'small'`
+
+The size of the button.
+
+- `'default'`: For normal text-label buttons, unless it is a toggle button.
+- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
+- `'small'`: For icon buttons associated with more advanced or auxiliary features.
+
+If the deprecated `isSmall` prop is also defined, this prop will take precedence.
+
+- Required: No
+- Default: `'default'`
+
#### `target`: `string`
If provided with `href`, sets the `target` attribute to the `a`.
diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
index 24932ab06a9b6..cc91cf4642586 100644
--- a/packages/components/src/button/index.tsx
+++ b/packages/components/src/button/index.tsx
@@ -33,11 +33,18 @@ function useDeprecatedProps( {
isSecondary,
isTertiary,
isLink,
+ isSmall,
+ size,
variant,
...otherProps
}: ButtonProps & DeprecatedButtonProps ): ButtonProps {
+ let computedSize = size;
let computedVariant = variant;
+ if ( isSmall ) {
+ computedSize ??= 'small';
+ }
+
if ( isPrimary ) {
computedVariant ??= 'primary';
}
@@ -66,6 +73,7 @@ function useDeprecatedProps( {
return {
...otherProps,
+ size: computedSize,
variant: computedVariant,
};
}
@@ -76,8 +84,6 @@ export function UnforwardedButton(
) {
const {
__next40pxDefaultSize,
- __next32pxSmallSize,
- isSmall,
isPressed,
isBusy,
isDestructive,
@@ -91,6 +97,7 @@ export function UnforwardedButton(
shortcut,
label,
children,
+ size = 'default',
text,
variant,
__experimentalIsFocusable: isFocusable,
@@ -118,10 +125,10 @@ export function UnforwardedButton(
const classes = classnames( 'components-button', className, {
'is-next-40px-default-size': __next40pxDefaultSize,
- 'is-next-32px-small-size': __next32pxSmallSize,
'is-secondary': variant === 'secondary',
'is-primary': variant === 'primary',
- 'is-small': isSmall,
+ 'is-small': size === 'small',
+ 'is-compact': size === 'compact',
'is-tertiary': variant === 'tertiary',
'is-pressed': isPressed,
'is-busy': isBusy,
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index c93d7e2070c43..a450ef60b46af 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -257,25 +257,26 @@
/* stylelint-enable */
}
+ &.is-compact {
+ height: $button-size-compact;
+
+ &.has-icon:not(.has-text) {
+ padding: 0;
+ width: $button-size-compact;
+ min-width: $button-size-compact;
+ }
+ }
+
&.is-small {
- height: $button-size-small-next-default-32px;
+ height: $button-size-small;
line-height: 22px;
padding: 0 8px;
font-size: 11px;
&.has-icon:not(.has-text) {
padding: 0;
- width: $button-size-small-next-default-32px;
- min-width: $button-size-small-next-default-32px;
- }
-
- &:not(.is-next-32px-small-size) {
- height: $button-size-small;
-
- &.has-icon:not(.has-text) {
- width: $button-size-small;
- min-width: $button-size-small;
- }
+ width: $button-size-small;
+ min-width: $button-size-small;
}
}
diff --git a/packages/components/src/button/test/index.tsx b/packages/components/src/button/test/index.tsx
index 0219896781534..881a71484c18f 100644
--- a/packages/components/src/button/test/index.tsx
+++ b/packages/components/src/button/test/index.tsx
@@ -402,6 +402,19 @@ describe( 'Button', () => {
);
expect( console ).toHaveWarned();
} );
+
+ it( 'should not break when the legacy isSmall prop is passed', () => {
+ render( );
+ expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-small' );
+ } );
+
+ it( 'should prioritize the `size` prop over `isSmall`', () => {
+ render( );
+ expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+ 'is-small'
+ );
+ expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-compact' );
+ } );
} );
describe( 'static typing', () => {
diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts
index 85188476e5f37..c55b74c046157 100644
--- a/packages/components/src/button/types.ts
+++ b/packages/components/src/button/types.ts
@@ -25,15 +25,6 @@ type BaseButtonProps = {
* @default false
*/
__next40pxDefaultSize?: boolean;
- /**
- * Start opting into the larger `isSmall` button size that will become the
- * default small size in a future version.
- *
- * Only takes effect when the `isSmall` prop is `true`.
- *
- * @default false
- */
- __next32pxSmallSize?: boolean;
/**
* The button's children.
*/
@@ -74,8 +65,13 @@ type BaseButtonProps = {
* Renders a pressed button style.
*/
isPressed?: boolean;
+ // TODO: Deprecate officially (add console warning and move to DeprecatedButtonProps).
/**
* Decreases the size of the button.
+ *
+ * Deprecated in favor of the `size` prop. If both props are defined, the `size` prop will take precedence.
+ *
+ * @deprecated Use the `'small'` value on the `size` prop instead.
*/
isSmall?: boolean;
/**
@@ -92,6 +88,18 @@ type BaseButtonProps = {
* If provided, renders a Tooltip component for the button.
*/
showTooltip?: boolean;
+ /**
+ * The size of the button.
+ *
+ * - `'default'`: For normal text-label buttons, unless it is a toggle button.
+ * - `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
+ * - `'small'`: For icon buttons associated with more advanced or auxiliary features.
+ *
+ * If the deprecated `isSmall` prop is also defined, this prop will take precedence.
+ *
+ * @default 'default'
+ */
+ size?: 'default' | 'compact' | 'small';
/**
* If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.
*/
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index 74d8e54e8fd65..e454b3093bf6a 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -14,6 +14,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
/**
* Internal dependencies
*/
+import { Button } from '../button';
import RangeControl from '../range-control';
import { Flex, FlexItem } from '../flex';
import {
@@ -31,7 +32,6 @@ import {
HeaderLabel,
HeaderToggle,
Controls,
- ResetButton,
} from './styles';
import { Spacer } from '../spacer';
import FontSizePickerSelect from './font-size-picker-select';
@@ -268,17 +268,21 @@ const UnforwardedFontSizePicker = (
) }
{ withReset && (
- {
onChange?.( undefined );
} }
- isSmall
variant="secondary"
- size={ size }
+ __next40pxDefaultSize
+ size={
+ size !== '__unstable-large'
+ ? 'small'
+ : 'default'
+ }
>
{ __( 'Reset' ) }
-
+
) }
diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts
index 525c1be0c94b0..8ba0ce661c5eb 100644
--- a/packages/components/src/font-size-picker/styles.ts
+++ b/packages/components/src/font-size-picker/styles.ts
@@ -11,7 +11,6 @@ import Button from '../button';
import { HStack } from '../h-stack';
import { space } from '../ui/utils/space';
import { COLORS } from '../utils';
-import type { FontSizePickerProps } from './types';
export const Container = styled.fieldset`
border: 0;
@@ -44,12 +43,3 @@ export const Controls = styled.div< {
${ ( props ) =>
! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
`;
-
-export const ResetButton = styled( Button )< {
- size: FontSizePickerProps[ 'size' ];
-} >`
- &&& {
- height: ${ ( props ) =>
- props.size === '__unstable-large' ? '40px' : '30px' };
- }
-`;
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 0df307e4ee45c..b2ab417d18af2 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -16,7 +16,7 @@ import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
-import { Input, SpinButton } from './styles/number-control-styles';
+import { Input, SpinButton, styles } from './styles/number-control-styles';
import * as inputControlActionTypes from '../input-control/reducer/actions';
import { add, subtract, roundClamp } from '../utils/math';
import { ensureNumber, isValueEmpty } from '../utils/values';
@@ -24,6 +24,7 @@ import type { WordPressComponentProps } from '../ui/context/wordpress-component'
import type { NumberControlProps } from './types';
import { HStack } from '../h-stack';
import { Spacer } from '../spacer';
+import { useCx } from '../utils';
const noop = () => {};
@@ -78,6 +79,8 @@ function UnforwardedNumberControl(
const autoComplete = typeProp === 'number' ? 'off' : undefined;
const classes = classNames( 'components-number-control', className );
+ const cx = useCx();
+ const spinButtonClasses = cx( size === 'small' && styles.smallSpinButtons );
const spinValue = (
value: string | number | undefined,
@@ -236,6 +239,7 @@ function UnforwardedNumberControl(
diff --git a/packages/components/src/number-control/styles/number-control-styles.ts b/packages/components/src/number-control/styles/number-control-styles.ts
index dfc6171cf411b..c18c02c69b790 100644
--- a/packages/components/src/number-control/styles/number-control-styles.ts
+++ b/packages/components/src/number-control/styles/number-control-styles.ts
@@ -11,7 +11,6 @@ import InputControl from '../../input-control';
import { COLORS } from '../../utils';
import Button from '../../button';
import { space } from '../../ui/utils/space';
-import type { NumberControlProps } from '../types';
const htmlArrowStyles = ( { hideHTMLArrows }: { hideHTMLArrows: boolean } ) => {
if ( ! hideHTMLArrows ) {
@@ -35,23 +34,16 @@ export const Input = styled( InputControl )`
${ htmlArrowStyles };
`;
-const spinButtonSizeStyles = ( {
- size,
-}: Pick< NumberControlProps, 'size' > ) => {
- if ( size !== 'small' ) {
- return ``;
- }
-
- return css`
- width: ${ space( 5 ) };
- min-width: ${ space( 5 ) };
- height: ${ space( 5 ) };
- `;
-};
-
export const SpinButton = styled( Button )`
&&&&& {
color: ${ COLORS.ui.theme };
- ${ spinButtonSizeStyles }
}
`;
+
+const smallSpinButtons = css`
+ width: ${ space( 5 ) };
+ min-width: ${ space( 5 ) };
+ height: ${ space( 5 ) };
+`;
+
+export const styles = { smallSpinButtons };
From 000fc8ba30776edfdf46e47e36501387b93ea4c9 Mon Sep 17 00:00:00 2001
From: James Koster
Date: Fri, 23 Jun 2023 14:28:18 +0100
Subject: [PATCH 27/37] Color (#51847)
---
.../edit-site/src/components/sidebar-navigation-item/style.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
index 054ecdac1b5b1..d032bece17107 100644
--- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss
@@ -9,7 +9,7 @@
&:hover,
&:focus,
&[aria-current] {
- color: $white;
+ color: $gray-200;
background: $gray-800;
}
From b64aabbc7063973f24af33e1cdd8a02586c93ce2 Mon Sep 17 00:00:00 2001
From: Robert Anderson
Date: Mon, 26 Jun 2023 19:11:03 +1000
Subject: [PATCH 28/37] Only show Page Content Focus commands when in edit mode
(#51888)
---
.../hooks/commands/use-edit-mode-commands.js | 91 +++++++++++--------
1 file changed, 53 insertions(+), 38 deletions(-)
diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
index 7d6dcdbd05440..63e20b9c22c14 100644
--- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -30,51 +30,63 @@ import { unlock } from '../../lock-unlock';
const { useHistory } = unlock( routerPrivateApis );
-function useEditModeCommandLoader() {
- const { isLoaded, record: template } = useEditedEntityRecord();
- const { removeTemplate, revertTemplate, setHasPageContentFocus } =
- useDispatch( editSiteStore );
- const history = useHistory();
- const { isPage, hasPageContentFocus } = useSelect(
+function usePageContentFocusCommands() {
+ const { isPage, canvasMode, hasPageContentFocus } = useSelect(
( select ) => ( {
isPage: select( editSiteStore ).isPage(),
+ canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
} ),
[]
);
+ const { setHasPageContentFocus } = useDispatch( editSiteStore );
- if ( ! isLoaded ) {
- return { isLoading: true, commands: [] };
+ if ( ! isPage || canvasMode !== 'edit' ) {
+ return { isLoading: false, commands: [] };
}
const commands = [];
- if ( isPage ) {
- if ( hasPageContentFocus ) {
- commands.push( {
- name: 'core/switch-to-template-focus',
- label: __( 'Edit template' ),
- icon: layout,
- context: 'site-editor-edit',
- callback: ( { close } ) => {
- setHasPageContentFocus( false );
- close();
- },
- } );
- } else {
- commands.push( {
- name: 'core/switch-to-page-focus',
- label: __( 'Back to page' ),
- icon: page,
- context: 'site-editor-edit',
- callback: ( { close } ) => {
- setHasPageContentFocus( true );
- close();
- },
- } );
- }
+ if ( hasPageContentFocus ) {
+ commands.push( {
+ name: 'core/switch-to-template-focus',
+ label: __( 'Edit template' ),
+ icon: layout,
+ callback: ( { close } ) => {
+ setHasPageContentFocus( false );
+ close();
+ },
+ } );
+ } else {
+ commands.push( {
+ name: 'core/switch-to-page-focus',
+ label: __( 'Back to page' ),
+ icon: page,
+ callback: ( { close } ) => {
+ setHasPageContentFocus( true );
+ close();
+ },
+ } );
+ }
+
+ return { isLoading: false, commands };
+}
+
+function useManipulateDocumentCommands() {
+ const { isLoaded, record: template } = useEditedEntityRecord();
+ const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
+ const history = useHistory();
+ const hasPageContentFocus = useSelect(
+ ( select ) => select( editSiteStore ).hasPageContentFocus(),
+ []
+ );
+
+ if ( ! isLoaded ) {
+ return { isLoading: true, commands: [] };
}
+ const commands = [];
+
if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) {
const label =
template.type === 'wp_template'
@@ -100,7 +112,6 @@ function useEditModeCommandLoader() {
name: 'core/remove-template',
label,
icon: trash,
- context: 'site-editor-edit',
callback: ( { close } ) => {
removeTemplate( template );
// Navigate to the template list
@@ -118,13 +129,11 @@ function useEditModeCommandLoader() {
};
}
-function useEditUICommandLoader() {
+function useEditUICommands() {
const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } =
useDispatch( editSiteStore );
const { canvasMode, editorMode, activeSidebar } = useSelect(
( select ) => ( {
- isPage: select( editSiteStore ).isPage(),
- hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
editorMode: select( editSiteStore ).getEditorMode(),
activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
@@ -206,14 +215,20 @@ function useEditUICommandLoader() {
}
export function useEditModeCommands() {
+ useCommandLoader( {
+ name: 'core/edit-site/page-content-focus',
+ hook: usePageContentFocusCommands,
+ context: 'site-editor-edit',
+ } );
+
useCommandLoader( {
name: 'core/edit-site/manipulate-document',
- hook: useEditModeCommandLoader,
+ hook: useManipulateDocumentCommands,
context: 'site-editor-edit',
} );
useCommandLoader( {
name: 'core/edit-site/edit-ui',
- hook: useEditUICommandLoader,
+ hook: useEditUICommands,
} );
}
From da17fa85ddb0b13b741217fb2f3af6731ce7a625 Mon Sep 17 00:00:00 2001
From: Riad Benguella
Date: Mon, 26 Jun 2023 16:25:17 +0100
Subject: [PATCH 29/37] Add UI commands to the post editor (#51900)
Co-authored-by: ntsekouras
---
packages/edit-post/src/editor.js | 2 +
.../src/hooks/commands/use-common-commands.js | 103 ++++++++++++++++++
.../hooks/commands/use-edit-mode-commands.js | 2 +-
3 files changed, 106 insertions(+), 1 deletion(-)
create mode 100644 packages/edit-post/src/hooks/commands/use-common-commands.js
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
index 42a393c5fe324..6ec907bfe4b0b 100644
--- a/packages/edit-post/src/editor.js
+++ b/packages/edit-post/src/editor.js
@@ -25,6 +25,7 @@ import Layout from './components/layout';
import EditorInitialization from './components/editor-initialization';
import { store as editPostStore } from './store';
import { unlock } from './lock-unlock';
+import useCommonCommands from './hooks/commands/use-common-commands';
const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
const { getLayoutStyles } = unlock( blockEditorPrivateApis );
@@ -32,6 +33,7 @@ const { useCommands } = unlock( coreCommandsPrivateApis );
function Editor( { postId, postType, settings, initialEdits, ...props } ) {
useCommands();
+ useCommonCommands();
const {
hasFixedToolbar,
focusMode,
diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js
new file mode 100644
index 0000000000000..796e0665fc2fa
--- /dev/null
+++ b/packages/edit-post/src/hooks/commands/use-common-commands.js
@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+ code,
+ cog,
+ drawerLeft,
+ drawerRight,
+ blockDefault,
+} from '@wordpress/icons';
+import { useCommand } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../store';
+
+export default function useCommonCommands() {
+ const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } =
+ useDispatch( editPostStore );
+ const { editorMode, activeSidebar } = useSelect(
+ ( select ) => ( {
+ activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
+ editPostStore.name
+ ),
+ editorMode: select( editPostStore ).getEditorMode(),
+ } ),
+ []
+ );
+ const { toggle } = useDispatch( preferencesStore );
+
+ useCommand( {
+ name: 'core/open-settings-sidebar',
+ label: __( 'Toggle settings sidebar' ),
+ icon: isRTL() ? drawerLeft : drawerRight,
+ callback: ( { close } ) => {
+ close();
+ if ( activeSidebar === 'edit-post/document' ) {
+ closeGeneralSidebar();
+ } else {
+ openGeneralSidebar( 'edit-post/document' );
+ }
+ },
+ } );
+
+ useCommand( {
+ name: 'core/open-block-inspector',
+ label: __( 'Toggle block inspector' ),
+ icon: blockDefault,
+ callback: ( { close } ) => {
+ close();
+ if ( activeSidebar === 'edit-post/block' ) {
+ closeGeneralSidebar();
+ } else {
+ openGeneralSidebar( 'edit-post/block' );
+ }
+ },
+ } );
+
+ useCommand( {
+ name: 'core/toggle-distraction-free',
+ label: __( 'Toggle distraction free' ),
+ icon: cog,
+ callback: ( { close } ) => {
+ toggle( 'core/edit-post', 'distractionFree' );
+ close();
+ },
+ } );
+
+ useCommand( {
+ name: 'core/toggle-spotlight-mode',
+ label: __( 'Toggle spotlight mode' ),
+ icon: cog,
+ callback: ( { close } ) => {
+ toggle( 'core/edit-post', 'focusMode' );
+ close();
+ },
+ } );
+
+ useCommand( {
+ name: 'core/toggle-top-toolbar',
+ label: __( 'Toggle top toolbar' ),
+ icon: cog,
+ callback: ( { close } ) => {
+ toggle( 'core/edit-post', 'fixedToolbar' );
+ close();
+ },
+ } );
+
+ useCommand( {
+ name: 'core/toggle-code-editor',
+ label: __( 'Toggle code editor' ),
+ icon: code,
+ callback: ( { close } ) => {
+ switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+ close();
+ },
+ } );
+}
diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
index 63e20b9c22c14..2466bb2a706c4 100644
--- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -179,7 +179,7 @@ function useEditUICommands() {
} );
commands.push( {
- name: 'core/toggle-distraction-free-mode',
+ name: 'core/toggle-spotlight-mode',
label: __( 'Toggle spotlight mode' ),
icon: cog,
callback: ( { close } ) => {
From 4f0d57f129162b141902866a28a2d12dcf05a345 Mon Sep 17 00:00:00 2001
From: Marco Ciampini
Date: Mon, 26 Jun 2023 12:45:57 +0200
Subject: [PATCH 30/37] ZStack: fix component bounding box to match children
(#51836)
* ZStack: rewrite using CSS grid
* Use first-of-type instead of fist-child
* CHANGELOG
* Improve comment
* Apply styles once in the parent wrapper
* Avoid each child view from expanding to all available space
* Remove unnecessary wrapeprs in storybook exmaple
---
packages/components/CHANGELOG.md | 1 +
packages/components/src/z-stack/component.tsx | 6 ++-
.../components/src/z-stack/stories/index.tsx | 19 +++-----
packages/components/src/z-stack/styles.ts | 47 +++++++++----------
4 files changed, 34 insertions(+), 39 deletions(-)
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4c52a377f5b5e..2d2011eda1bd8 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -16,6 +16,7 @@
- `Button`: Remove unnecessary margin from dashicon ([#51395](https://github.com/WordPress/gutenberg/pull/51395)).
- `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)).
- `ConfirmDialog`: Ensure onConfirm isn't called an extra time when submitting one of the buttons using the keyboard ([#51730](https://github.com/WordPress/gutenberg/pull/51730)).
+- `ZStack`: ZStack: fix component bounding box to match children ([#51836](https://github.com/WordPress/gutenberg/pull/51836)).
### Internal
diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx
index 1cbcac56e4fb7..e087f8536e340 100644
--- a/packages/components/src/z-stack/component.tsx
+++ b/packages/components/src/z-stack/component.tsx
@@ -35,13 +35,14 @@ function UnconnectedZStack(
const clonedChildren = validChildren.map( ( child, index ) => {
const zIndex = isReversed ? childrenLastIndex - index : index;
- const offsetAmount = offset * index;
+ // Only when the component is layered, the offset needs to be multiplied by
+ // the item's index, so that items can correctly stack at the right distance
+ const offsetAmount = isLayered ? offset * index : offset;
const key = isValidElement( child ) ? child.key : index;
return (
{ clonedChildren }
diff --git a/packages/components/src/z-stack/stories/index.tsx b/packages/components/src/z-stack/stories/index.tsx
index b04e19962aed1..9b0b080378033 100644
--- a/packages/components/src/z-stack/stories/index.tsx
+++ b/packages/components/src/z-stack/stories/index.tsx
@@ -8,7 +8,6 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
* Internal dependencies
*/
import { Elevation } from '../../elevation';
-import { HStack } from '../../h-stack';
import { View } from '../../view';
import { ZStack } from '..';
@@ -55,18 +54,12 @@ const Avatar = ( {
const Template: ComponentStory< typeof ZStack > = ( args ) => {
return (
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
};
diff --git a/packages/components/src/z-stack/styles.ts b/packages/components/src/z-stack/styles.ts
index d0bf20d38b1f4..186f268e64366 100644
--- a/packages/components/src/z-stack/styles.ts
+++ b/packages/components/src/z-stack/styles.ts
@@ -4,36 +4,35 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
-/**
- * Internal dependencies
- */
-import { rtl } from '../utils';
-
-export const ZStackView = styled.div`
- display: flex;
- position: relative;
-`;
-
export const ZStackChildView = styled.div< {
- isLayered: boolean;
offsetAmount: number;
zIndex: number;
} >`
- ${ ( { isLayered, offsetAmount } ) =>
- isLayered
- ? css( rtl( { marginLeft: offsetAmount } )() )
- : css( rtl( { right: offsetAmount * -1 } )() ) }
+ &:not( :first-of-type ) {
+ ${ ( { offsetAmount } ) =>
+ css( {
+ marginInlineStart: offsetAmount,
+ } ) };
+ }
- ${ ( { isLayered } ) =>
- isLayered ? positionAbsolute : positionRelative }
-
- ${ ( { zIndex } ) => css( { zIndex } ) }
-`;
-
-const positionAbsolute = css`
- position: absolute;
+ ${ ( { zIndex } ) => css( { zIndex } ) };
`;
-const positionRelative = css`
+export const ZStackView = styled.div< {
+ isLayered: boolean;
+} >`
+ display: inline-grid;
+ grid-auto-flow: column;
position: relative;
+
+ & > ${ ZStackChildView } {
+ position: relative;
+ justify-self: start;
+
+ ${ ( { isLayered } ) =>
+ isLayered
+ ? // When `isLayered` is true, all items overlap in the same grid cell
+ css( { gridRowStart: 1, gridColumnStart: 1 } )
+ : undefined };
+ }
`;
From 9292d095a2c68a5401ea039ae0a936c08dec6412 Mon Sep 17 00:00:00 2001
From: Andrea Fercia
Date: Mon, 26 Jun 2023 00:23:38 +0200
Subject: [PATCH 31/37] Add view patterns plural label. (#51850)
---
lib/compat/wordpress-6.3/blocks.php | 1 +
1 file changed, 1 insertion(+)
diff --git a/lib/compat/wordpress-6.3/blocks.php b/lib/compat/wordpress-6.3/blocks.php
index 6902a258c5c3d..b338d0a246709 100644
--- a/lib/compat/wordpress-6.3/blocks.php
+++ b/lib/compat/wordpress-6.3/blocks.php
@@ -47,6 +47,7 @@ function gutenberg_rename_reusable_block_cpt_to_pattern( $args, $post_type ) {
$args['labels']['new_item'] = __( 'New Pattern' );
$args['labels']['edit_item'] = __( 'Edit Pattern' );
$args['labels']['view_item'] = __( 'View Pattern' );
+ $args['labels']['view_items'] = __( 'View Patterns' );
$args['labels']['all_items'] = __( 'All Patterns' );
$args['labels']['search_items'] = __( 'Search Patterns' );
$args['labels']['not_found'] = __( 'No Patterns found.' );
From c3283d6438e978945e769c5c0b1b49c2232a3c1a Mon Sep 17 00:00:00 2001
From: Jonny Harris
Date: Sun, 25 Jun 2023 00:10:49 +0100
Subject: [PATCH 32/37] Fix css styles in block.jsons. (#51866)
---
packages/block-library/src/avatar/block.json | 2 +-
packages/block-library/src/query-pagination-numbers/block.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/block-library/src/avatar/block.json b/packages/block-library/src/avatar/block.json
index 652a9a04cdebe..12e81d68aa767 100644
--- a/packages/block-library/src/avatar/block.json
+++ b/packages/block-library/src/avatar/block.json
@@ -48,6 +48,6 @@
"__experimentalDuotone": "img"
}
},
- "editorStyle": "wp-block-avatar",
+ "editorStyle": "wp-block-avatar-editor",
"style": "wp-block-avatar"
}
diff --git a/packages/block-library/src/query-pagination-numbers/block.json b/packages/block-library/src/query-pagination-numbers/block.json
index a6263ec131279..f00b2993a75f6 100644
--- a/packages/block-library/src/query-pagination-numbers/block.json
+++ b/packages/block-library/src/query-pagination-numbers/block.json
@@ -32,5 +32,5 @@
}
}
},
- "editorStyle": "query-pagination-numbers-editor"
+ "editorStyle": "wp-block-query-pagination-numbers-editor"
}
From 1a140db5ad992222f1493693a5752963e50cd3ba Mon Sep 17 00:00:00 2001
From: James Koster
Date: Fri, 23 Jun 2023 14:38:34 +0100
Subject: [PATCH 33/37] Update active item appearance in Library (#51848)
* Color
* Use aria-current
---
.../sidebar-navigation-screen-library/category-item.js | 2 +-
.../components/sidebar-navigation-screen-library/style.scss | 4 ----
2 files changed, 1 insertion(+), 5 deletions(-)
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
index 288f92d8ef5dd..2ea9205b6fca7 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/category-item.js
@@ -35,7 +35,7 @@ export default function CategoryItem( {
{ ...linkInfo }
icon={ icon }
suffix={ { count } }
- className={ isActive ? 'is-active-category' : undefined }
+ aria-current={ isActive ? 'true' : undefined }
>
{ label }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
index 302faa17bc738..efb8b7537588d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-library/style.scss
@@ -1,7 +1,3 @@
.edit-site-sidebar-navigation-screen-library__group {
margin-bottom: $grid-unit-30;
}
-
-.edit-site-sidebar-navigation-item.is-active-category {
- background: $gray-800;
-}
From bd853d53032a571c717a479556add0e015b545f3 Mon Sep 17 00:00:00 2001
From: Dave Smith
Date: Fri, 23 Jun 2023 11:15:46 +0100
Subject: [PATCH 34/37] Fix Rename in Navigation on Browse Mode (#51791)
* Ensure edits are passed to save
* Ensure empty strings are invalid
* Force break of long strings in menu titles
---
.../index.js | 2 +-
.../rename-modal.js | 13 ++++++++++++-
.../use-navigation-menu-handlers.js | 6 +++++-
.../index.js | 4 +++-
.../components/sidebar-navigation-screen/style.scss | 2 ++
5 files changed, 23 insertions(+), 4 deletions(-)
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
index 6fae7b0926198..6bce0f356f740 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
@@ -60,7 +60,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
useNavigationMenuHandlers();
const _handleDelete = () => handleDelete( navigationMenu );
- const _handleSave = () => handleSave( navigationMenu );
+ const _handleSave = ( edits ) => handleSave( navigationMenu, edits );
const _handleDuplicate = () => handleDuplicate( navigationMenu );
if ( isLoading ) {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
index 99f674ba8bee3..668179755ec35 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
@@ -11,9 +11,16 @@ import {
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
+const notEmptyString = ( testString ) => testString?.trim()?.length > 0;
+
export default function RenameModal( { menuTitle, onClose, onSave } ) {
const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle );
+ const titleHasChanged = editedMenuTitle !== menuTitle;
+
+ const isEditedMenuTitleValid =
+ titleHasChanged && notEmptyString( editedMenuTitle );
+
return (