From ca2257fbf5184ee8a09778c467277e122d4b5506 Mon Sep 17 00:00:00 2001 From: Sarah Norris <1645628+mikachan@users.noreply.github.com> Date: Mon, 2 Oct 2023 18:08:22 +0100 Subject: [PATCH] Cherry-picked commits for WordPress 6.4 Beta 2 (#54914) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix the install of system fonts from a font collection (#54713) * Fix set upload dir test (#54762) * Site Editor: Prevent unintended actions on the classic theme (#54422) * Add action and selector to track access to Patterns page * Add a URL parameter to check if the Patterns page was accessed directly * Revert lib changes * Fix critical error in the Post Editor * Explicitly add `! isBlockBasedTheme` with `isTemplatePartsMode` * Fix critical error in the Post Editor * Patterns: Fix back navigation after pattern creation (#54852) * Patterns: Fix category control width in site editor (#54853) * Patterns: Allow non-user patterns under Standard filter (#54756) * Performance Tests: Separate page setup from test (#53808) # Conflicts: # test/performance/specs/post-editor.spec.js * Performance Tests: Support legacy selector for expanded elements (#54690) * Paragraph: Make 'aria-label' consistent with other blocks (#54687) * Paragraph: Make 'aria-label' consistent with other blocks * Update tests * Try using BC labels in performance tests * Move lightbox render function to filter (#54670) * syntax refactor repace strpos with str_contains (#54832) * Font Library: avoid deprected error in test (#54802) * fix deprecated call * removing unwanted line * Fix the ShortcutProvider usage (#54851) Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> * Image: Ensure `false` values are preserved in memory when defined in `theme.json` (#54639) * Modify conditional when parsing config * Only drop the value if it's undefined. --------- Co-authored-by: Michal Czaplinski * Use "Not synced" in place of "Standard" nomenclature for patterns (#54839) * Standard -> Not synced * Fix broken test --------- Co-authored-by: Glen Davies * Format Library: Try to fix highlight popover jumping (#54736) * Move mime-type collection generation to a function that can be tested… (#54844) * Move mime-type collection generation to a function that can be tested. Refactored to use that function. * linting changes * Add unit tests to mime type getter * Fixed linting errors * test the entire output array and replace assertTrue by assertEquals * fixing docs --------- Co-authored-by: Matias Benedetto * Ensure lightbox toggle is shown if block-level setting exists (#54878) * Block Editor: Update strings in blocks 'RenameModal' component (#54887) * Footnotes: Add aria-label to return links (#54843) * Add aria-label to footnotes front-end links. * Add visual output. Fix PHPCS errors. * Remove visual changes, fix in follow-up. * Font Library: Changed the OTF mime type expected value to be what PHP returns (#54886) * Changed the OTF mime type expected value to be what PHP returns * add unit test for otf file installation --------- Co-authored-by: madhusudhand * Image: Fix layout shift when lightbox is opened and closed (#53026) * Replace overflow: hidden with JavaScript callback to prevent scrolling * Disable scroll callback on mobile; add comments; fix scrim styles The page jumps around when trying to override the scroll behavior on mobile, so I disabled it altogether. I've also added comments to clarify this and other decisions made around the scroll handling. While testing, I realized that the scrim was completely opaque during the zoom animation, which does not match the design, so I added a new animation specifically for the scrim to fix that. * Add handling for horizontally oriented pages * Move close button so that it's further from scrollbar on desktop * Fix call to handleScroll() and add touch callback to new render method * Improve lightbox experience on mobile To ensure pinch to zoom works as expected when the lightbox is open on mobile, I added logic to disable the scroll override when touch is detected. Without this, the scroll override kicks in whenever one tries to pinch to zoom, and it breaks the experience. I also revised the styles for the scrim to make it opaque, as having content visible outside of the lightbox is distracting when pinching to zoom on a mobile device, and I think having a consistent lightbox across devices will make for the best user experience. * Fix spacing * Add touch directives to block supports * Fix spacing in block supports * Rename attribute for clarity * Update comment * Update comments * Fix spacing --------- Co-authored-by: Ricardo Artemio Morales * Font Library: move font uploads to a new tab (#54655) * move font uploads to a new tab in the modal * fix invalid success message and revert the dropzone to modal * add success notice for font uploads * make supported file formats message dynamic based on allowed extensions * update hint text and clear successful message with a fresh upload * Block custom CSS: Fix incorrect CSS when multiple root selectors (#53602) * Block custom CSS: Fix incorrect CSS when multiple root selectors * Fix PHP lint error * Use `scope_selector` and `append_to_selector` method and update unit test * Use `scopeSelector` and `appendToSelector` function and update JS unit test * Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Update packages/block-editor/src/components/global-styles/test/use-global-styles-output.js Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Update packages/block-editor/src/components/global-styles/utils.js Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * re-trigger CI --------- Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Add new e2e test for creating a pattern (#54855) * Use list role instead of listbox for patterns (#54884) * Popover: Fix the styles for components that use emotion within popovers (#54912) # Conflicts: # packages/components/CHANGELOG.md * Footnotes: use core’s meta revisioning if available (#52988) # Conflicts: # packages/block-library/src/footnotes/index.php * Remove base url from link control search results (#54553) * Expose baseURL setting on Post and Site Editors via block settings * Strip baseURL from rendered search results * Only fetch baseURL once in top level component * Simplify implementation to utilise URL parse functions * Improve comment wording to avoid referencing undefined var * Remove superfluous conditional * Decode URL prior to operations * Refactor for readability * Fix where url is not defined * Revert change to filter util * Ensure that filterURLForDisplay always receives a string as an arg * Make e2e test locator less strict * Prefer pipe * Force remove trailing slash * [Site Editor]: Update copy of using the default template in a page (#54728) * Remove overflow: hidden from the entity title h1 in the site editor sidebar (#54769) * Site Editor: Avoid same key warnings in template parts area listings (#54863) * TemplateAreas use template part clientId as key * HomeTemplateDetails use template part clientId as key * Cleanup useSelect hook * Fix ToolSelector popover variant (#54840) * Font Library: refactor endpoint permissions (#54829) * break the checking of user permission and file write permissions * return error 500 if the request to the install fonts endpoint needs write permissions and wordpress doens't have write permission on the server * do not ask file write permission on uninstall endpoint * Standardize the output of install and uninstall fonts endpoints Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com> Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com> * Handle standardized output from install and uninstall endpoints in the frontend Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com> Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com> * Update the install and unintall fonts endpoints unit tests for the new standardized output format Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com> Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com> * fix the refersh call for the library Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com> Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com> --------- Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com> Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com> * Don’t use TypeScript files in scripts package (#54856) * Fix Search Block not updating in Nav block (#54823) * Avoid setState in render * Attempt at test coverage * Improve tests and make them work * Remove word-wrap property (#54866) --------- Co-authored-by: Matias Benedetto Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: Bart Kalisz Co-authored-by: George Mamadashvili Co-authored-by: Artemio Morales Co-authored-by: Riad Benguella Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Co-authored-by: Michal Czaplinski Co-authored-by: Rich Tabor Co-authored-by: Glen Davies Co-authored-by: Jason Crist Co-authored-by: Alex Stine Co-authored-by: madhusudhand Co-authored-by: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com> Co-authored-by: Ricardo Artemio Morales Co-authored-by: Kai Hao Co-authored-by: Adam Silverstein Co-authored-by: Dave Smith Co-authored-by: Nik Tsekouras Co-authored-by: Ramon Co-authored-by: Jason Crist <146530+pbking@users.noreply.github.com> Co-authored-by: Jeff Ong <5375500+jffng@users.noreply.github.com> Co-authored-by: Pascal Birchler --- lib/block-supports/behaviors.php | 4 +- lib/class-wp-theme-json-gutenberg.php | 20 +- lib/compat/plugin/footnotes.php | 250 +++++++ .../font-library/class-wp-font-collection.php | 2 +- .../class-wp-font-family-utils.php | 5 +- .../font-library/class-wp-font-family.php | 2 +- .../font-library/class-wp-font-library.php | 30 +- .../class-wp-rest-font-library-controller.php | 133 +++- lib/load.php | 1 + .../src/components/global-styles/hooks.js | 2 +- .../test/use-global-styles-output.js | 39 + .../global-styles/use-global-styles-output.js | 32 +- .../src/components/global-styles/utils.js | 21 + .../components/link-control/search-item.js | 57 +- .../src/components/tool-selector/index.js | 2 +- .../block-editor/src/hooks/block-rename-ui.js | 24 +- .../block-library/src/footnotes/index.php | 192 +---- packages/block-library/src/image/image.js | 2 +- packages/block-library/src/image/index.php | 11 +- packages/block-library/src/image/style.scss | 8 +- packages/block-library/src/image/view.js | 181 +++-- .../src/navigation-link/style.scss | 1 - packages/block-library/src/paragraph/edit.js | 2 +- packages/block-library/src/search/edit.js | 26 +- packages/components/CHANGELOG.md | 1 + packages/components/src/popover/index.tsx | 6 +- .../src/site-editor-navigation-commands.js | 15 +- .../src/lighthouse/index.ts | 13 +- .../src/metrics/index.ts | 181 ++++- .../e2e-test-utils-playwright/src/test.ts | 4 +- .../editor/various/inserting-blocks.test.js | 2 +- .../various/keyboard-navigable-blocks.test.js | 4 +- .../editor/various/pattern-blocks.test.js | 14 +- .../specs/widgets/editing-widgets.test.js | 6 +- .../src/components/add-new-pattern/index.js | 13 +- .../collection-font-details.js | 2 +- .../font-library-modal/context.js | 74 +- .../font-library-modal/font-collection.js | 53 +- .../global-styles/font-library-modal/index.js | 22 +- .../font-library-modal/installed-fonts.js | 42 +- .../font-library-modal/local-fonts.js | 88 ++- .../font-library-modal/style.scss | 19 +- .../font-library-modal/upload-fonts.js | 20 + .../font-library-modal/utils/fonts-outline.js | 7 +- .../utils/get-notice-from-response.js | 62 ++ .../font-library-modal/utils/index.js | 4 + .../src/components/page-patterns/grid.js | 2 +- .../components/page-patterns/patterns-list.js | 2 +- .../components/page-patterns/use-patterns.js | 10 +- .../components/page-template-parts/index.js | 15 +- .../page-panels/reset-default-template.js | 2 +- .../template-panel/pattern-categories.js | 34 +- .../template-panel/template-areas.js | 2 +- .../index.js | 29 +- .../home-template-details.js | 62 +- .../index.js | 16 +- .../sidebar-navigation-screen/style.scss | 1 - .../format-library/src/text-color/inline.js | 13 +- .../src/components/shortcut-provider.js | 6 +- ...ywright.config.ts => playwright.config.js} | 0 .../{global-setup.ts => global-setup.js} | 8 +- phpunit/class-wp-theme-json-test.php | 28 +- phpunit/tests/data/fonts/gilbert-color.otf | Bin 0 -> 626352 bytes .../font-library/wpFontFamily/install.php | 28 + .../wpFontLibrary/getMimeTypes.php | 90 +++ .../wpFontLibrary/setUploadDir.php | 10 +- .../wpRestFontLibraryController/base.php | 2 +- .../installFonts.php | 161 +++-- .../uninstallFonts.php | 5 +- test/e2e/specs/editor/blocks/columns.spec.js | 4 +- test/e2e/specs/editor/blocks/cover.spec.js | 2 +- .../blocks/navigation-list-view.spec.js | 4 +- test/e2e/specs/editor/blocks/quote.spec.js | 2 +- test/e2e/specs/editor/blocks/search.spec.js | 94 +++ .../editor/plugins/block-variations.spec.js | 2 +- .../specs/editor/plugins/hooks-api.spec.js | 2 +- .../editor/various/block-deletion.spec.js | 8 +- .../editor/various/block-locking.spec.js | 2 +- .../editor/various/content-only-lock.spec.js | 4 +- .../editor/various/draggable-blocks.spec.js | 16 +- .../specs/editor/various/footnotes.spec.js | 26 +- .../specs/editor/various/list-view.spec.js | 2 +- .../various/multi-block-selection.spec.js | 34 +- .../various/toolbar-roving-tabindex.spec.js | 4 +- .../specs/editor/various/writing-flow.spec.js | 14 +- test/e2e/specs/site-editor/pages.spec.js | 2 +- test/e2e/specs/site-editor/patterns.spec.js | 115 +++ .../specs/widgets/customizing-widgets.spec.js | 28 +- test/performance/fixtures/index.js | 1 + test/performance/fixtures/perf-utils.ts | 181 +++++ .../specs/front-end-block-theme.spec.js | 32 +- .../specs/front-end-classic-theme.spec.js | 27 +- test/performance/specs/post-editor.spec.js | 672 ++++++++++-------- test/performance/specs/site-editor.spec.js | 276 ++++--- test/performance/utils.js | 138 ---- 95 files changed, 2623 insertions(+), 1294 deletions(-) create mode 100644 lib/compat/plugin/footnotes.php create mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js create mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js rename packages/scripts/config/{playwright.config.ts => playwright.config.js} (100%) rename packages/scripts/config/playwright/{global-setup.ts => global-setup.js} (82%) create mode 100644 phpunit/tests/data/fonts/gilbert-color.otf create mode 100644 phpunit/tests/fonts/font-library/wpFontLibrary/getMimeTypes.php create mode 100644 test/e2e/specs/editor/blocks/search.spec.js create mode 100644 test/e2e/specs/site-editor/patterns.spec.js create mode 100644 test/performance/fixtures/index.js create mode 100644 test/performance/fixtures/perf-utils.ts diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index cf668ed22d887..6f442d7b0d2d7 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -233,7 +233,9 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { data-wp-bind--aria-modal="context.core.image.lightboxEnabled" data-wp-effect="effects.core.image.initLightbox" data-wp-on--keydown="actions.core.image.handleKeydown" - data-wp-on--mousewheel="actions.core.image.hideLightbox" + data-wp-on--touchstart="actions.core.image.handleTouchStart" + data-wp-on--touchmove="actions.core.image.handleTouchMove" + data-wp-on--touchend="actions.core.image.handleTouchEnd" data-wp-on--click="actions.core.image.hideLightbox" > + + `.${ ext }` + ).join( ',' ) } + multiple={ true } + onChange={ onFilesUpload } + render={ ( { openFileDialog } ) => ( + + ) } + /> + { notice && ( + + + + { notice.message } + + ) } - /> + + + { sprintf( + /* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */ + __( + 'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.' + ), + supportedFormats + ) } + + ); } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss index 663aef94ab7e6..86cac4244dea9 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss +++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss @@ -92,11 +92,24 @@ align-items: center; display: flex; justify-content: center; - height: 100px; + height: 250px; width: 100%; background-color: #f0f0f0; } +.font-library-modal__local-fonts { + margin: 0 auto; + width: 80%; + + .font-library-modal__upload-area__text { + color: #6e6e6e; + } + + .font-library-modal__upload-area__notice { + margin: 0; + } +} + .font-library-modal__font-name { font-weight: bold; } @@ -137,3 +150,7 @@ max-width: 350px; } } + +.font-library-modal__font-collection__notice { + margin: 0; +} diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js new file mode 100644 index 0000000000000..effc4a2a5227c --- /dev/null +++ b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { __experimentalSpacer as Spacer } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import LocalFonts from './local-fonts'; + +function UploadFonts() { + return ( + <> + + + + ); +} + +export default UploadFonts; diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js index 0414681a432ad..bef9353e94350 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/fonts-outline.js @@ -15,7 +15,8 @@ export function getFontsOutline( fonts ) { } export function isFontFontFaceInOutline( slug, face, outline ) { - return ( - outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ] || false - ); + if ( ! face ) { + return !! outline[ slug ]; + } + return !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ]; } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js new file mode 100644 index 0000000000000..b22bd0afe2324 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js @@ -0,0 +1,62 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +export function getNoticeFromInstallResponse( response ) { + const { errors = [], successes = [] } = response; + // Everything failed. + if ( errors.length && ! successes.length ) { + return { + type: 'error', + message: __( 'Error installing the fonts.' ), + }; + } + + // Eveerything succeeded. + if ( ! errors.length && successes.length ) { + return { + type: 'success', + message: __( 'Fonts were installed successfully.' ), + }; + } + + // Some succeeded, some failed. + if ( errors.length && successes.length ) { + return { + type: 'warning', + message: __( + 'Some fonts were installed successfully and some failed.' + ), + }; + } +} + +export function getNoticeFromUninstallResponse( response ) { + const { errors = [], successes = [] } = response; + // Everything failed. + if ( errors.length && ! successes.length ) { + return { + type: 'error', + message: __( 'Error uninstalling the fonts.' ), + }; + } + + // Everything succeeded. + if ( ! errors.length && successes.length ) { + return { + type: 'success', + message: __( 'Fonts were uninstalled successfully.' ), + }; + } + + // Some succeeded, some failed. + if ( errors.length && successes.length ) { + return { + type: 'warning', + message: __( + 'Some fonts were uninstalled successfully and some failed.' + ), + }; + } +} diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index 49e7e7e4684ee..7afa0f7aee17a 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -109,6 +109,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) { } export function getDisplaySrcFromFontFace( input, urlPrefix ) { + if ( ! input ) { + return; + } + let src; if ( Array.isArray( input ) ) { src = input[ 0 ]; diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js index 32fa6ebe55b39..59a8cc431567f 100644 --- a/packages/edit-site/src/components/page-patterns/grid.js +++ b/packages/edit-site/src/components/page-patterns/grid.js @@ -9,7 +9,7 @@ export default function Grid( { categoryId, items, ...props } ) { } return ( -