From d1f5b8646364ae1384256b51523670c2d86455a9 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Wed, 3 May 2023 15:17:07 -0400 Subject: [PATCH 01/67] Remove extraneous "Link" copy from PanelBody components (#50186) * Remove extraneous "Link" from PanelBodys * Update navigation.spec.js --- packages/block-library/src/comment-author-name/edit.js | 2 +- packages/block-library/src/comment-edit-link/edit.js | 2 +- packages/block-library/src/navigation-link/edit.js | 2 +- packages/block-library/src/navigation-submenu/edit.js | 2 +- packages/block-library/src/post-author-name/edit.js | 2 +- packages/block-library/src/post-title/edit.js | 2 +- packages/block-library/src/read-more/edit.js | 2 +- packages/block-library/src/site-title/edit/index.js | 2 +- packages/block-library/src/social-links/edit.js | 2 +- test/e2e/specs/editor/blocks/navigation.spec.js | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/comment-author-name/edit.js b/packages/block-library/src/comment-author-name/edit.js index 82e0c6b100ce7..629ff185394c5 100644 --- a/packages/block-library/src/comment-author-name/edit.js +++ b/packages/block-library/src/comment-author-name/edit.js @@ -70,7 +70,7 @@ export default function Edit( { const inspectorControls = ( - + - + { /* Warning, this duplicated in packages/block-library/src/navigation-submenu/edit.js */ } - + { /* Warning, this duplicated in packages/block-library/src/navigation-link/edit.js */ } - + - + - + - + - + - + { name: 'Settings', } ) .getByRole( 'heading', { - name: 'Link Settings', + name: 'Settings', } ) ).toBeVisible(); From 2f94fa478f165c696638e68e7f79307ab2d4f6d4 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 3 May 2023 21:53:41 +0100 Subject: [PATCH 02/67] Save Button: Fix the label in the disabled state (#50284) --- .../src/editor/site-editor.ts | 2 +- .../src/components/save-button/index.js | 22 ++++++++++++------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts index b4c4ae1338d81..840dc9f23ebe2 100644 --- a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts +++ b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts @@ -17,6 +17,6 @@ export async function saveSiteEditorEntities( this: Editor ) { 'role=region[name="Save panel"i] >> role=button[name="Save"i]' ); await this.page.waitForSelector( - 'role=region[name="Editor top bar"i] >> role=button[name="Save"i][disabled]' + 'role=region[name="Editor top bar"i] >> role=button[name="Saved"i][disabled]' ); } diff --git a/packages/edit-site/src/components/save-button/index.js b/packages/edit-site/src/components/save-button/index.js index 4e4c6dfd35f65..0d78e32307797 100644 --- a/packages/edit-site/src/components/save-button/index.js +++ b/packages/edit-site/src/components/save-button/index.js @@ -37,14 +37,20 @@ export default function SaveButton( { const activateSaveEnabled = isPreviewingTheme() || isDirty; const disabled = isSaving || ! activateSaveEnabled; - let label; - if ( isPreviewingTheme() && isDirty ) { - label = __( 'Activate & Save' ); - } else if ( isPreviewingTheme() ) { - label = __( 'Activate' ); - } else { - label = __( 'Save' ); - } + const getLabel = () => { + if ( disabled ) { + return __( 'Saved' ); + } + + if ( isPreviewingTheme() && isDirty ) { + return __( 'Activate & Save' ); + } else if ( isPreviewingTheme() ) { + return __( 'Activate' ); + } + + return __( 'Save' ); + }; + const label = getLabel(); return ( ; -}; -``` - -Many components also include styles which will need to be output in order to appear correctly. Within WordPress, you can [add the `wp-components` stylesheet as a dependency of your plugin's stylesheet](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters). In other projects, you can link to the `build-style/style.css` file directly. diff --git a/storybook/main.js b/storybook/main.js index a0f5c333bb0d8..fa59c739ea3d5 100644 --- a/storybook/main.js +++ b/storybook/main.js @@ -4,6 +4,7 @@ const stories = [ '../packages/components/src/**/stories/*.@(js|tsx|mdx)', '../packages/icons/src/**/stories/*.@(js|tsx|mdx)', '../packages/edit-site/src/**/stories/*.@(js|tsx|mdx)', + '../packages/components/README.mdx', ].filter( Boolean ); module.exports = { @@ -14,7 +15,7 @@ module.exports = { addons: [ { name: '@storybook/addon-docs', - options: { configureJSX: true }, + options: { configureJSX: true, transcludeMarkdown: true }, }, '@storybook/addon-controls', '@storybook/addon-viewport', diff --git a/storybook/stories/docs/components/contributing.story.mdx b/storybook/stories/docs/components/contributing.story.mdx new file mode 100644 index 0000000000000..1ffd0c49d4020 --- /dev/null +++ b/storybook/stories/docs/components/contributing.story.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import Contributing from '@wordpress/components/CONTRIBUTING.md'; + + + + diff --git a/storybook/stories/docs/components/readme.story.mdx b/storybook/stories/docs/components/readme.story.mdx new file mode 100644 index 0000000000000..7996188ffb50b --- /dev/null +++ b/storybook/stories/docs/components/readme.story.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import Readme from '@wordpress/components/README.md'; + + + + diff --git a/storybook/stories/docs/introduction.story.mdx b/storybook/stories/docs/introduction.story.mdx index f353cf7c7e0ab..46079eafe47b4 100644 --- a/storybook/stories/docs/introduction.story.mdx +++ b/storybook/stories/docs/introduction.story.mdx @@ -7,7 +7,7 @@ import { InlineIcon } from './inline-icon'; ## Welcome! -The WordPress Gutenberg project uses Storybook to view and work with the UI components developed in the WordPress package [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components). +The WordPress Gutenberg project uses Storybook to view and work with the UI components developed in WordPress packages, especially [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components). On this interactive site you can browse individual components, their controls, options, and settings in isolation. You can also modify controls and arguments and see the changes right away. From 27ed5ccc512333f2c5ea2af243c11b7ccc94c9ec Mon Sep 17 00:00:00 2001 From: Siobhan Bamber Date: Thu, 4 May 2023 17:54:18 +0100 Subject: [PATCH 32/67] [RNMobile] Extend non-cached endpoints on Android (#50216) These changes introduce a new filter that can dynamically extend the list of endpoints that shouldn't be cached. --- packages/react-native-editor/src/api-fetch-setup.js | 10 ++++++++-- .../src/test/api-fetch-setup.test.js | 13 +++++++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/react-native-editor/src/api-fetch-setup.js b/packages/react-native-editor/src/api-fetch-setup.js index 661bff038aff3..9885f2c55c90f 100644 --- a/packages/react-native-editor/src/api-fetch-setup.js +++ b/packages/react-native-editor/src/api-fetch-setup.js @@ -84,8 +84,14 @@ export const isPathSupported = ( path, method ) => { ); }; -export const shouldEnableCaching = ( path ) => - ! DISABLED_CACHING_ENDPOINTS.some( ( pattern ) => pattern.test( path ) ); +export const shouldEnableCaching = ( path ) => { + const disabledEndpoints = applyFilters( + 'native.disabled_caching_endpoints', + DISABLED_CACHING_ENDPOINTS + ); + + return ! disabledEndpoints.some( ( pattern ) => pattern.test( path ) ); +}; export default () => { apiFetch.setFetchHandler( ( options ) => fetchHandler( options ) ); diff --git a/packages/react-native-editor/src/test/api-fetch-setup.test.js b/packages/react-native-editor/src/test/api-fetch-setup.test.js index 3c42d511853e8..efa31751ff742 100644 --- a/packages/react-native-editor/src/test/api-fetch-setup.test.js +++ b/packages/react-native-editor/src/test/api-fetch-setup.test.js @@ -93,4 +93,17 @@ describe( 'shouldEnableCaching', () => { expect( shouldEnableCaching( path ) ).toBe( false ); } ); } ); + + it( 'does not enable caching for endpoints provided to filter', () => { + addFilter( + 'native.disabled_caching_endpoints', + 'gutenberg-mobile', + ( endpoints ) => { + return [ ...endpoints, /wp\/v2\/categories/i ]; + } + ); + + // Filter was used to stop caching an endpoint from `enabledCachingPaths` array. + expect( shouldEnableCaching( 'wp/v2/categories' ) ).toBe( false ); + } ); } ); From ce8d9a25f1d8c9f8f181afe814e0cc74afea8fa2 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 4 May 2023 18:09:01 +0100 Subject: [PATCH 33/67] Remove white background on Site Editor 'Frame' (#48970) --- packages/edit-site/src/components/block-editor/style.scss | 1 - packages/edit-site/src/components/layout/style.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index e50faca23edef..6bcdc727d55fb 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -29,7 +29,6 @@ .edit-site-visual-editor__editor-canvas { height: 100%; - background: $white; } &.is-focus-mode { diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index de106e98ee399..4bcab85d80062 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -108,7 +108,6 @@ & > div { color: $gray-900; - background: $white; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8); } From e57b6875a272a732b6ab54a388ca79e5d8780d3a Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 4 May 2023 18:46:34 +0100 Subject: [PATCH 34/67] Update has-text has-icon button spacing (#50277) --- packages/components/CHANGELOG.md | 2 ++ packages/components/src/button/style.scss | 8 +++----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c3709134f187e..dd6b93cfd66db 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,12 +3,14 @@ ## Unreleased - `CheckboxControl`, `CustomGradientPicker`, `FormToggle`, : Refactor and correct the focus style for consistency ([#50127](https://github.com/WordPress/gutenberg/pull/50127)). +- `Button`, update spacing values in `has-text has-icon` buttons. ([#50277](https://github.com/WordPress/gutenberg/pull/50277)). - `Button`, remove custom padding applied to `tertiary` variant. ([#50276](https://github.com/WordPress/gutenberg/pull/50276)). ### Breaking Changes - `onDragStart` in `` is now a synchronous function to allow setting additional data for `event.dataTransfer` ([#49673](https://github.com/WordPress/gutenberg/pull/49673)). + ### Internal - `NavigableContainer`: Convert to TypeScript ([#49377](https://github.com/WordPress/gutenberg/pull/49377)). diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index d7fe58d03775f..f59d5d8d7bd20 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -292,11 +292,9 @@ &.has-text { justify-content: start; - padding-right: 12px; - } - - &.has-text svg { - margin-right: $grid-unit-10; + padding-right: $grid-unit-15; + padding-left: $grid-unit-10; + gap: $grid-unit-05; } &.has-text .dashicon { From fd64307db86fb95702b0c9515e449ebb3a46555d Mon Sep 17 00:00:00 2001 From: Marcelo Serpa <81248+fullofcaffeine@users.noreply.github.com> Date: Thu, 4 May 2023 12:15:11 -0600 Subject: [PATCH 35/67] (e2e)(template-parts) Add E2E test for editing the title of a new custom template part (#50195) * Add (regression) E2E test for editing the title of a new custom template part * Small formatting improvement * Add jsdoc to the `editTemplateTitle` helper function * Add improvements after code review * Remove activateTheme call, it is not needed --- .../various/post-editor-template-mode.spec.js | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js index f9a7aa8970d3e..c7aed497dc25c 100644 --- a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js +++ b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js @@ -102,6 +102,32 @@ test.describe( 'Post Editor Template mode', () => { ).toBeVisible(); } ); + test( 'Allow editing the title of a new custom template', async ( { + page, + postEditorTemplateMode, + } ) => { + async function editTemplateTitle( newTitle ) { + await page + .getByRole( 'button', { name: 'Template Options' } ) + .click(); + + await page + .getByRole( 'textbox', { name: 'Title' } ) + .fill( newTitle ); + + const editorContent = page.getByLabel( 'Editor Content' ); + await editorContent.click(); + } + + await postEditorTemplateMode.createPostAndSaveDraft(); + await postEditorTemplateMode.createNewTemplate( 'Foobar' ); + await editTemplateTitle( 'Barfoo' ); + + await expect( + page.getByRole( 'button', { name: 'Template Options' } ) + ).toHaveText( 'Barfoo' ); + } ); + test.describe( 'Delete Post Template Confirmation Dialog', () => { test.beforeAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'twentytwentyone' ); From 516201e9fb59c9a52372a037ed91c0d189a9a3f8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 4 May 2023 23:55:04 +0100 Subject: [PATCH 36/67] Theme Previews: Fix refactor (#50354) --- lib/compat/wordpress-6.3/theme-previews.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/compat/wordpress-6.3/theme-previews.php b/lib/compat/wordpress-6.3/theme-previews.php index f73b9b7705b6b..e73c13daa7cfb 100644 --- a/lib/compat/wordpress-6.3/theme-previews.php +++ b/lib/compat/wordpress-6.3/theme-previews.php @@ -20,10 +20,10 @@ function gutenberg_get_theme_preview_path( $current_stylesheet = null ) { $preview_stylesheet = ! empty( $_GET['theme_preview'] ) ? $_GET['theme_preview'] : null; $wp_theme = wp_get_theme( $preview_stylesheet ); if ( ! is_wp_error( $wp_theme->errors() ) ) { - if ( current_filter() === 'stylesheet' ) { - $theme_path = $wp_theme->get_stylesheet(); - } elseif ( current_filter() === 'template' ) { + if ( current_filter() === 'template' ) { $theme_path = $wp_theme->get_template(); + } else { + $theme_path = $wp_theme->get_stylesheet(); } return sanitize_text_field( $theme_path ); @@ -104,7 +104,7 @@ function addLivePreviewButton() { * Adds a nonce for the theme activation link. */ function block_theme_activate_nonce() { - $nonce_handle = 'switch-theme_' . gutenberg_theme_preview_stylesheet(); + $nonce_handle = 'switch-theme_' . gutenberg_get_theme_preview_path(); ?>