From b58af59c40111e661e1841288ce68ef442b28300 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 1 Nov 2021 09:25:51 +1000 Subject: [PATCH 01/14] Fix font family skip serialization check (#36073) --- packages/block-editor/src/hooks/font-family.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js index 1ee11f6514b113..193896fadf8628 100644 --- a/packages/block-editor/src/hooks/font-family.js +++ b/packages/block-editor/src/hooks/font-family.js @@ -58,7 +58,7 @@ function addSaveProps( props, blockType, attributes ) { if ( hasBlockSupport( blockType, - '__experimentalSkipTypographySerialization' + 'typography.__experimentalSkipSerialization' ) ) { return props; From 954d61a14a42820881223e76bc6dd827ed6e1611 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 1 Nov 2021 12:44:53 +1300 Subject: [PATCH 02/14] Gallery block: replace gallery experimental setting with a check for use_balanceTags (#34979) Co-authored-by: Glen Davies --- lib/experiments-page.php | 17 ++++------------- .../specs/editor/blocks/gallery.test.js | 4 ++-- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index ef9f17dea1057c..bd4ca968073f8a 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -51,17 +51,6 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-navigation', ) ); - add_settings_field( - 'gutenberg-gallery-refactor', - __( 'Gallery block experiment', 'gutenberg' ), - 'gutenberg_display_experiment_field', - 'gutenberg-experiments', - 'gutenberg_experiments_section', - array( - 'label' => __( 'Test a new gallery block that uses nested image blocks (Warning: The new gallery is not compatible with WordPress mobile apps prior to version 18.2. If you use the mobile app, please update to the latest version to avoid content loss.)', 'gutenberg' ), - 'id' => 'gutenberg-gallery-refactor', - ) - ); register_setting( 'gutenberg-experiments', 'gutenberg-experiments' @@ -108,9 +97,11 @@ function gutenberg_display_experiment_section() { * @return array Filtered editor settings. */ function gutenberg_experiments_editor_settings( $settings ) { - $experiments = get_option( 'gutenberg-experiments' ); + // The refactored gallery currently can't be run on sites with use_balanceTags option set. + // This bypass needs to remain in place until this is resolved and a patch released. + // https://core.trac.wordpress.org/ticket/54130. $experiments_settings = array( - '__unstableGalleryWithImageBlocks' => isset( $experiments['gutenberg-gallery-refactor'] ), + '__unstableGalleryWithImageBlocks' => (int) get_option( 'use_balanceTags' ) !== 1, ); return array_merge( $settings, $experiments_settings ); } diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js index e44e7ddf17b5e1..50a10288626c41 100644 --- a/packages/e2e-tests/specs/editor/blocks/gallery.test.js +++ b/packages/e2e-tests/specs/editor/blocks/gallery.test.js @@ -47,7 +47,7 @@ describe( 'Gallery', () => { const filename = await upload( '.wp-block-gallery input[type="file"]' ); const regex = new RegExp( - `\\s*
  • <\\/figure><\\/li><\\/ul><\\/figure>\\s*` + `\\s*
    \\s*
    \\"\\"<\/figure>\\s*<\/figure>\\s*` ); expect( await getEditedPostContent() ).toMatch( regex ); } ); @@ -71,7 +71,7 @@ describe( 'Gallery', () => { await upload( '.wp-block-gallery input[type="file"]' ); const figureElement = await page.waitForSelector( - '.blocks-gallery-item figure' + '.wp-block-gallery .wp-block-image' ); await figureElement.click(); From ff6cfe0c0a631f37ca9e1e6cbc66aefdf7536b82 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 1 Nov 2021 01:52:57 +0100 Subject: [PATCH 03/14] Move and rename the site editor menu item (#36064) * Move and rename the site editor menu item * Replace toplevel_page_ with appearance_page_ Replace toplevel_page_ with appearance_page_, remove menu order filter. --- lib/client-assets.php | 2 +- lib/full-site-editing/edit-site-page.php | 2 +- lib/full-site-editing/full-site-editing.php | 37 ++------------------- lib/init.php | 9 +++-- packages/e2e-tests/experimental-features.js | 2 +- packages/edit-site/src/style.scss | 2 +- 6 files changed, 10 insertions(+), 44 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 2f8d3ed48fa810..8aaceab181905c 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -774,7 +774,7 @@ function gutenberg_extend_block_editor_styles_html() { echo ""; } -add_action( 'admin_footer-toplevel_page_gutenberg-edit-site', 'gutenberg_extend_block_editor_styles_html' ); +add_action( 'admin_footer-appearance_page_gutenberg-edit-site', 'gutenberg_extend_block_editor_styles_html' ); add_action( 'admin_footer-post.php', 'gutenberg_extend_block_editor_styles_html' ); add_action( 'admin_footer-post-new.php', 'gutenberg_extend_block_editor_styles_html' ); add_action( 'admin_footer-widgets.php', 'gutenberg_extend_block_editor_styles_html' ); diff --git a/lib/full-site-editing/edit-site-page.php b/lib/full-site-editing/edit-site-page.php index cceec4d96ba947..f532c37e19d7ee 100644 --- a/lib/full-site-editing/edit-site-page.php +++ b/lib/full-site-editing/edit-site-page.php @@ -28,7 +28,7 @@ class="edit-site" * @return bool True for Site Editor pages, false otherwise. */ function gutenberg_is_edit_site_page( $page ) { - return 'toplevel_page_gutenberg-edit-site' === $page; + return 'appearance_page_gutenberg-edit-site' === $page; } /** diff --git a/lib/full-site-editing/full-site-editing.php b/lib/full-site-editing/full-site-editing.php index 21bebe654d1713..f97337f8226c77 100644 --- a/lib/full-site-editing/full-site-editing.php +++ b/lib/full-site-editing/full-site-editing.php @@ -75,7 +75,7 @@ function gutenberg_adminbar_items( $wp_admin_bar ) { array( 'id' => 'site-editor', 'title' => __( 'Edit site', 'gutenberg' ), - 'href' => admin_url( 'admin.php?page=gutenberg-edit-site' ), + 'href' => admin_url( 'themes.php?page=gutenberg-edit-site' ), ) ); } @@ -83,39 +83,6 @@ function gutenberg_adminbar_items( $wp_admin_bar ) { add_action( 'admin_bar_menu', 'gutenberg_adminbar_items', 50 ); -/** - * Activates the 'menu_order' filter and then hooks into 'menu_order' - */ -add_filter( 'custom_menu_order', '__return_true' ); -add_filter( 'menu_order', 'gutenberg_menu_order' ); - -/** - * Filters WordPress default menu order - * - * @param array $menu_order Menu Order. - */ -function gutenberg_menu_order( $menu_order ) { - if ( ! gutenberg_is_fse_theme() ) { - return $menu_order; - } - - $new_positions = array( - // Position the site editor before the appearance menu. - 'gutenberg-edit-site' => array_search( 'themes.php', $menu_order, true ), - ); - - // Traverse through the new positions and move - // the items if found in the original menu_positions. - foreach ( $new_positions as $value => $new_index ) { - $current_index = array_search( $value, $menu_order, true ); - if ( $current_index ) { - $out = array_splice( $menu_order, $current_index, 1 ); - array_splice( $menu_order, $new_index, 0, $out ); - } - } - return $menu_order; -} - /** * Tells the script loader to load the scripts and styles of custom block on site editor screen. * @@ -123,7 +90,7 @@ function gutenberg_menu_order( $menu_order ) { * @return bool Filtered decision about loading block assets. */ function gutenberg_site_editor_load_block_editor_scripts_and_styles( $is_block_editor_screen ) { - return ( is_callable( 'get_current_screen' ) && get_current_screen() && 'toplevel_page_gutenberg-edit-site' === get_current_screen()->base ) + return ( is_callable( 'get_current_screen' ) && get_current_screen() && 'appearance_page_gutenberg-edit-site' === get_current_screen()->base ) ? true : $is_block_editor_screen; } diff --git a/lib/init.php b/lib/init.php index 4d4df00fe0878d..c2fcd430c2ac47 100644 --- a/lib/init.php +++ b/lib/init.php @@ -95,17 +95,16 @@ function gutenberg_menu() { */ function gutenberg_site_editor_menu() { if ( gutenberg_experimental_is_site_editor_available() ) { - add_menu_page( - __( 'Site Editor (beta)', 'gutenberg' ), + add_theme_page( + __( 'Editor (beta)', 'gutenberg' ), sprintf( /* translators: %s: "beta" label. */ - __( 'Site Editor %s', 'gutenberg' ), + __( 'Editor %s', 'gutenberg' ), '' . __( 'beta', 'gutenberg' ) . '' ), 'edit_theme_options', 'gutenberg-edit-site', - 'gutenberg_edit_site_page', - 'dashicons-layout' + 'gutenberg_edit_site_page' ); } } diff --git a/packages/e2e-tests/experimental-features.js b/packages/e2e-tests/experimental-features.js index 7478c161a1d039..0976b2c4086037 100644 --- a/packages/e2e-tests/experimental-features.js +++ b/packages/e2e-tests/experimental-features.js @@ -108,7 +108,7 @@ export const siteEditor = { page: 'gutenberg-edit-site', ...query, } ).slice( 1 ); - await visitAdminPage( 'admin.php', query ); + await visitAdminPage( 'themes.php', query ); await page.waitForSelector( '.edit-site-visual-editor iframe' ); }, diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 32441bc766affb..97e2a28ea400c7 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -21,7 +21,7 @@ html.wp-toolbar { background: $white; } -body.toplevel_page_gutenberg-edit-site { +body.appearance_page_gutenberg-edit-site { @include wp-admin-reset(".edit-site"); } From 7546fcedb1cfd5b89699c7572a03a8e4c0323c37 Mon Sep 17 00:00:00 2001 From: Gary Pendergast Date: Mon, 1 Nov 2021 13:02:07 +1100 Subject: [PATCH 04/14] Embed: Add Wolfram Cloud as an embed provider (#35656) --- packages/block-library/src/embed/icons.js | 6 ++++++ packages/block-library/src/embed/variations.js | 9 +++++++++ 2 files changed, 15 insertions(+) diff --git a/packages/block-library/src/embed/icons.js b/packages/block-library/src/embed/icons.js index 2f39a61dbcea6d..650b7c0bd3a909 100644 --- a/packages/block-library/src/embed/icons.js +++ b/packages/block-library/src/embed/icons.js @@ -147,3 +147,9 @@ export const embedPinterestIcon = ( ); + +export const embedWolframIcon = ( + + + +); diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js index 681c687874cfa9..0700e0177cdcfd 100644 --- a/packages/block-library/src/embed/variations.js +++ b/packages/block-library/src/embed/variations.js @@ -25,6 +25,7 @@ import { embedAnimotoIcon, embedDailymotionIcon, embedPinterestIcon, + embedWolframIcon, } from './icons'; /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ @@ -341,6 +342,14 @@ const variations = [ ], attributes: { providerNameSlug: 'pinterest' }, }, + { + name: 'wolfram-cloud', + title: 'Wolfram Cloud', + icon: embedWolframIcon, + description: __( 'Embed Wolfram Cloud notebook content.' ), + patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ], + attributes: { providerNameSlug: 'wolfram-cloud', responsive: true }, + }, ]; /** From 51975bfd15d3278e690c092f810ce250bf59ee22 Mon Sep 17 00:00:00 2001 From: Alex Stine Date: Sun, 31 Oct 2021 22:19:23 -0400 Subject: [PATCH 05/14] Add alexstine as code owner for post-title (#36056) * Add alexstine as code owner for post-title. * Path edit. --- .github/CODEOWNERS | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 8b6ad6b35ffe1b..ee07ca3e73e21b 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -35,6 +35,7 @@ /packages/blocks /packages/edit-post /packages/editor +/packages/editor/src/components/post-title @alexstine /packages/list-reusable-blocks /packages/shortcode /packages/block-directory From 816660ed251feef60ae162e4fa50a3b18a292468 Mon Sep 17 00:00:00 2001 From: Ramon Date: Mon, 1 Nov 2021 14:33:19 +1100 Subject: [PATCH 06/14] Typo (#36097) --- packages/editor/src/components/entities-saved-states/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index 50f92da12d8420..35a754b6df00ad 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -19,7 +19,7 @@ import { close as closeIcon } from '@wordpress/icons'; */ import EntityTypeList from './entity-type-list'; -const TRANSLATED_SITE_PROTPERTIES = { +const TRANSLATED_SITE_PROPERTIES = { title: __( 'Title' ), description: __( 'Tagline' ), site_logo: __( 'Logo' ), @@ -49,7 +49,7 @@ export default function EntitiesSavedStates( { close } ) { siteEditsAsEntities.push( { kind: 'root', name: 'site', - title: TRANSLATED_SITE_PROTPERTIES[ property ] || property, + title: TRANSLATED_SITE_PROPERTIES[ property ] || property, property, } ); } From 86dcf7c71e45ae022785942c4d56d3da520d3325 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Mon, 1 Nov 2021 16:53:00 +1100 Subject: [PATCH 07/14] Mark FSE blocks as non experimental (#35979) * Fix duplicate function declaration error * Mark blocks used by Twenty Twenty-two as stable * Don't mark Post Comments as non-experimental --- packages/block-library/src/index.js | 167 ++++++++++++------------ packages/customize-widgets/src/index.js | 10 +- packages/edit-widgets/src/index.js | 4 +- tools/webpack/blocks.js | 12 +- 4 files changed, 97 insertions(+), 96 deletions(-) diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index acc997d899ef2b..c1f7c4770c2f47 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -12,74 +12,41 @@ import { /** * Internal dependencies */ -import * as paragraph from './paragraph'; -import * as image from './image'; -import * as heading from './heading'; -import * as quote from './quote'; -import * as gallery from './gallery'; import * as archives from './archives'; import * as audio from './audio'; -import * as buttons from './buttons'; import * as button from './button'; +import * as buttons from './buttons'; import * as calendar from './calendar'; import * as categories from './categories'; +import * as classic from './freeform'; import * as code from './code'; -import * as columns from './columns'; import * as column from './column'; +import * as columns from './columns'; +import * as commentTemplate from './comment-template'; +import * as commentsQueryLoop from './comments-query-loop'; import * as cover from './cover'; import * as embed from './embed'; import * as file from './file'; -import * as html from './html'; -import * as mediaText from './media-text'; -import * as navigation from './navigation'; -import * as navigationLink from './navigation-link'; -import * as navigationSubmenu from './navigation-submenu'; +import * as gallery from './gallery'; +import * as group from './group'; +import * as heading from './heading'; import * as homeLink from './home-link'; +import * as html from './html'; +import * as image from './image'; import * as latestComments from './latest-comments'; import * as latestPosts from './latest-posts'; -import * as logInOut from './loginout'; import * as list from './list'; +import * as logInOut from './loginout'; +import * as mediaText from './media-text'; import * as missing from './missing'; import * as more from './more'; +import * as navigation from './navigation'; +import * as navigationLink from './navigation-link'; +import * as navigationSubmenu from './navigation-submenu'; import * as nextpage from './nextpage'; import * as pattern from './pattern'; import * as pageList from './page-list'; -import * as preformatted from './preformatted'; -import * as pullquote from './pullquote'; -import * as reusableBlock from './block'; -import * as rss from './rss'; -import * as search from './search'; -import * as group from './group'; -import * as separator from './separator'; -import * as shortcode from './shortcode'; -import * as spacer from './spacer'; -import * as table from './table'; -// import * as tableOfContents from './table-of-contents'; -import * as textColumns from './text-columns'; -import * as verse from './verse'; -import * as video from './video'; -import * as tagCloud from './tag-cloud'; -import * as classic from './freeform'; -import * as socialLinks from './social-links'; -import * as socialLink from './social-link'; - -// Full Site Editing Blocks -import * as commentsQueryLoop from './comments-query-loop'; -import * as commentTemplate from './comment-template'; -import * as siteLogo from './site-logo'; -import * as siteTagline from './site-tagline'; -import * as siteTitle from './site-title'; -import * as templatePart from './template-part'; -import * as query from './query'; -import * as postTemplate from './post-template'; -import * as queryTitle from './query-title'; -import * as queryPagination from './query-pagination'; -import * as queryPaginationNext from './query-pagination-next'; -import * as queryPaginationNumbers from './query-pagination-numbers'; -import * as queryPaginationPrevious from './query-pagination-previous'; -import * as postNavigationLink from './post-navigation-link'; -import * as postTitle from './post-title'; -import * as postContent from './post-content'; +import * as paragraph from './paragraph'; import * as postAuthor from './post-author'; import * as postComment from './post-comment'; import * as postCommentAuthor from './post-comment-author'; @@ -92,11 +59,42 @@ import * as postComments from './post-comments'; import * as postCommentsCount from './post-comments-count'; import * as postCommentsForm from './post-comments-form'; import * as postCommentsLink from './post-comments-link'; +import * as postContent from './post-content'; import * as postDate from './post-date'; import * as postExcerpt from './post-excerpt'; import * as postFeaturedImage from './post-featured-image'; +import * as postNavigationLink from './post-navigation-link'; +import * as postTemplate from './post-template'; import * as postTerms from './post-terms'; +import * as postTitle from './post-title'; +import * as preformatted from './preformatted'; +import * as pullquote from './pullquote'; +import * as query from './query'; +import * as queryPagination from './query-pagination'; +import * as queryPaginationNext from './query-pagination-next'; +import * as queryPaginationNumbers from './query-pagination-numbers'; +import * as queryPaginationPrevious from './query-pagination-previous'; +import * as queryTitle from './query-title'; +import * as quote from './quote'; +import * as reusableBlock from './block'; +import * as rss from './rss'; +import * as search from './search'; +import * as separator from './separator'; +import * as shortcode from './shortcode'; +import * as siteLogo from './site-logo'; +import * as siteTagline from './site-tagline'; +import * as siteTitle from './site-title'; +import * as socialLink from './social-link'; +import * as socialLinks from './social-links'; +import * as spacer from './spacer'; +import * as table from './table'; +// import * as tableOfContents from './table-of-contents'; +import * as tagCloud from './tag-cloud'; +import * as templatePart from './template-part'; import * as termDescription from './term-description'; +import * as textColumns from './text-columns'; +import * as verse from './verse'; +import * as video from './video'; /** * Function to register an individual block. @@ -133,70 +131,69 @@ export const __experimentalGetCoreBlocks = () => [ quote, // Register all remaining core blocks. - shortcode, archives, audio, button, buttons, calendar, categories, + window.wp && window.wp.oldEditor ? classic : null, // Only add the classic block in WP Context code, - columns, column, + columns, + commentTemplate, + commentsQueryLoop, cover, embed, file, group, - window.wp && window.wp.oldEditor ? classic : null, // Only add the classic block in WP Context html, - mediaText, latestComments, latestPosts, + logInOut, + mediaText, missing, more, + navigation, + navigationLink, + navigationSubmenu, nextpage, pageList, + pattern, + postAuthor, + postContent, + postDate, + postExcerpt, + postFeaturedImage, + postTemplate, + postTerms, + postTitle, preformatted, pullquote, + query, + queryPagination, + queryPaginationNext, + queryPaginationNumbers, + queryPaginationPrevious, + queryTitle, + reusableBlock, rss, search, separator, - reusableBlock, - socialLinks, + shortcode, + siteLogo, + siteTagline, + siteTitle, socialLink, + socialLinks, spacer, table, // tableOfContents, tagCloud, + templatePart, textColumns, verse, video, - - // Theme blocks - commentsQueryLoop, - commentTemplate, - - siteLogo, - siteTagline, - siteTitle, - - query, - postTemplate, - queryTitle, - queryPagination, - queryPaginationNext, - queryPaginationNumbers, - queryPaginationPrevious, - - postTitle, - postContent, - postDate, - postExcerpt, - postFeaturedImage, - postTerms, - - logInOut, - pattern, ]; /** @@ -239,16 +236,12 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env.GUTENBERG_PHASE === 2 ? ( { enableFSEBlocks } = {} ) => { [ - navigation, - navigationLink, + // Experimental blocks. homeLink, - navigationSubmenu, - // Register Full Site Editing Blocks. + // Full Site Editing blocks. ...( enableFSEBlocks ? [ - templatePart, - postAuthor, postComment, postCommentAuthor, postCommentAuthorAvatar, diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js index fe79a434cda2fc..086c38db416a41 100644 --- a/packages/customize-widgets/src/index.js +++ b/packages/customize-widgets/src/index.js @@ -29,7 +29,12 @@ import './filters'; const { wp } = window; -const DISABLED_BLOCKS = [ 'core/more', 'core/block', 'core/freeform' ]; +const DISABLED_BLOCKS = [ + 'core/more', + 'core/block', + 'core/freeform', + 'core/template-part', +]; const ENABLE_EXPERIMENTAL_FSE_BLOCKS = false; /** @@ -50,7 +55,8 @@ export function initialize( editorName, blockEditorSettings ) { DISABLED_BLOCKS.includes( block.name ) || block.name.startsWith( 'core/post' ) || block.name.startsWith( 'core/query' ) || - block.name.startsWith( 'core/site' ) + block.name.startsWith( 'core/site' ) || + block.name.startsWith( 'core/navigation' ) ); } ); registerCoreBlocks( coreBlocks ); diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js index 7a5eba3532de79..1aa709889c9e13 100644 --- a/packages/edit-widgets/src/index.js +++ b/packages/edit-widgets/src/index.js @@ -38,6 +38,7 @@ import { const disabledBlocks = [ 'core/more', 'core/freeform', + 'core/template-part', ...( ALLOW_REUSABLE_BLOCKS ? [] : [ 'core/block' ] ), ]; @@ -72,7 +73,8 @@ export function initialize( id, settings ) { disabledBlocks.includes( block.name ) || block.name.startsWith( 'core/post' ) || block.name.startsWith( 'core/query' ) || - block.name.startsWith( 'core/site' ) + block.name.startsWith( 'core/site' ) || + block.name.startsWith( 'core/navigation' ) ); } ); diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index 7cf7d8f11e8e28..136ee4b08b8369 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -114,12 +114,12 @@ module.exports = { // Within content, search for any function definitions. For // each, replace every other reference to it in the file. return ( - content - .match( /^function [^\(]+/gm ) - .reduce( ( result, functionName ) => { - // Trim leading "function " prefix from match. - functionName = functionName.slice( 9 ); - + Array.from( + content.matchAll( + /^\s*function ([^\(]+)/gm + ) + ) + .reduce( ( result, [ , functionName ] ) => { // Prepend the Gutenberg prefix, substituting any // other core prefix (e.g. "wp_"). return result.replace( From 0b609cfa4523582d43f2ae83aed331ac0800f070 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 1 Nov 2021 16:20:17 +0800 Subject: [PATCH 08/14] Add delete nav menu button to nav block (#35981) * Add a delete button to the navigation block inspector * Style delete button * Force delete menus --- .../src/navigation/edit/index.js | 14 +++- .../edit/navigation-menu-delete-control.js | 81 +++++++++++++++++++ .../block-library/src/navigation/editor.scss | 5 ++ 3 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 packages/block-library/src/navigation/edit/navigation-menu-delete-control.js diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index ea8b7f7dd84775..089b462cc2701c 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -43,6 +43,7 @@ import NavigationInnerBlocks from './inner-blocks'; import NavigationMenuSelector from './navigation-menu-selector'; import NavigationMenuNameControl from './navigation-menu-name-control'; import UnsavedInnerBlocks from './unsaved-inner-blocks'; +import NavigationMenuDeleteControl from './navigation-menu-delete-control'; function getComputedStyle( node ) { return node.ownerDocument.defaultView.getComputedStyle( node ); @@ -112,7 +113,7 @@ function Navigation( { [ clientId ] ); const hasExistingNavItems = !! innerBlocks.length; - const { selectBlock } = useDispatch( blockEditorStore ); + const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore ); const [ isPlaceholderShown, setIsPlaceholderShown ] = useState( ! hasExistingNavItems @@ -298,8 +299,17 @@ function Navigation( { { listViewModal } { isEntityAvailable && ( - + + { + replaceInnerBlocks( clientId, [] ); + setAttributes( { + navigationMenuId: undefined, + } ); + setIsPlaceholderShown( true ); + } } + /> ) } { hasSubmenuIndicatorSetting && ( diff --git a/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js b/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js new file mode 100644 index 00000000000000..b9594c7d620d0d --- /dev/null +++ b/packages/block-library/src/navigation/edit/navigation-menu-delete-control.js @@ -0,0 +1,81 @@ +/** + * WordPress dependencies + */ +import { Button, Flex, FlexItem, Modal } from '@wordpress/components'; +import { + store as coreStore, + useEntityId, + useEntityProp, +} from '@wordpress/core-data'; +import { useDispatch } from '@wordpress/data'; +import { useState } from '@wordpress/element'; +import { __, sprintf } from '@wordpress/i18n'; + +export default function NavigationMenuDeleteControl( { onDelete } ) { + const [ isConfirmModalVisible, setIsConfirmModalVisible ] = useState( + false + ); + const id = useEntityId( 'postType', 'wp_navigation' ); + const [ title ] = useEntityProp( 'postType', 'wp_navigation', 'title' ); + const { deleteEntityRecord } = useDispatch( coreStore ); + + return ( + <> + + { isConfirmModalVisible && ( + setIsConfirmModalVisible( false ) } + > +

    + { __( + 'Are you sure you want to delete this navigation menu?' + ) } +

    + + + + + + + + +     + ) } + + ); +} diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 60d65922fcbcd0..0e18fd0a065742 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -529,3 +529,8 @@ body.editor-styles-wrapper margin-top: 0; } } + +.wp-block-navigation-delete-menu-button { + width: 100%; + justify-content: center; +} From 8709795d43cfbed9a2d35d65e0a2696b867fb75c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 1 Nov 2021 20:10:45 +1100 Subject: [PATCH 09/14] Try single placeholder for Navigation block (#36023) * Try single placeholder for Navigation block * Fix extra space caused by responsive container * Separate menus from classic menus and add labels. * Add popover prop. * Don't render responsive wrapper with placeholder. * Fix all pages button type logic. * Consolidate loading states and improve nesting. --- .../src/navigation/edit/index.js | 38 +-- .../placeholder/create-inner-blocks-step.js | 152 ----------- .../src/navigation/edit/placeholder/index.js | 242 +++++++++++++++--- .../select-navigation-menu-step.js | 85 ------ 4 files changed, 230 insertions(+), 287 deletions(-) delete mode 100644 packages/block-library/src/navigation/edit/placeholder/create-inner-blocks-step.js delete mode 100644 packages/block-library/src/navigation/edit/placeholder/select-navigation-menu-step.js diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 089b462cc2701c..6fa66ea1a1dcbe 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -425,23 +425,27 @@ function Navigation( { } /> ) } - - { isEntityAvailable && ( - - ) } - + { ! isPlaceholderShown && ( + + { isEntityAvailable && ( + + ) } + + ) } diff --git a/packages/block-library/src/navigation/edit/placeholder/create-inner-blocks-step.js b/packages/block-library/src/navigation/edit/placeholder/create-inner-blocks-step.js deleted file mode 100644 index 33f36c8ecd2a99..00000000000000 --- a/packages/block-library/src/navigation/edit/placeholder/create-inner-blocks-step.js +++ /dev/null @@ -1,152 +0,0 @@ -/** - * WordPress dependencies - */ -import { createBlock } from '@wordpress/blocks'; -import { - Placeholder, - Button, - DropdownMenu, - MenuGroup, - MenuItem, - Spinner, -} from '@wordpress/components'; - -import { - forwardRef, - useCallback, - useState, - useEffect, -} from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { navigation, chevronDown, Icon } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import useNavigationEntities from '../../use-navigation-entities'; -import PlaceholderPreview from './placeholder-preview'; -import menuItemsToBlocks from '../../menu-items-to-blocks'; - -function CreateInnerBlocksStep( { onFinish }, ref ) { - const [ selectedMenu, setSelectedMenu ] = useState(); - - const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false ); - - const { - isResolvingPages, - menus, - isResolvingMenus, - menuItems, - hasResolvedMenuItems, - hasPages, - hasMenus, - } = useNavigationEntities( selectedMenu ); - - const isLoading = isResolvingPages || isResolvingMenus; - - const createFromMenu = useCallback( () => { - const { innerBlocks: blocks } = menuItemsToBlocks( menuItems ); - onFinish( blocks ); - }, [ menuItems, menuItemsToBlocks, onFinish ] ); - - const onCreateFromMenu = () => { - // If we have menu items, create the block right away. - if ( hasResolvedMenuItems ) { - createFromMenu(); - return; - } - - // Otherwise, create the block when resolution finishes. - setIsCreatingFromMenu( true ); - }; - - const onCreateEmptyMenu = () => { - onFinish( [] ); - }; - - const onCreateAllPages = () => { - const block = [ createBlock( 'core/page-list' ) ]; - onFinish( block ); - }; - - useEffect( () => { - // If the user selected a menu but we had to wait for menu items to - // finish resolving, then create the block once resolution finishes. - if ( isCreatingFromMenu && hasResolvedMenuItems ) { - createFromMenu(); - setIsCreatingFromMenu( false ); - } - }, [ isCreatingFromMenu, hasResolvedMenuItems ] ); - - const toggleProps = { - variant: 'primary', - className: 'wp-block-navigation-placeholder__actions__dropdown', - }; - return ( - - - -
    - { isLoading && ( -
    - -
    - ) } - { ! isLoading && ( -
    -
    - { __( 'Navigation' ) } -
    - { hasMenus ? ( - - { ( { onClose } ) => ( - - { menus.map( ( menu ) => { - return ( - { - setSelectedMenu( - menu.id - ); - onCreateFromMenu(); - } } - onClose={ onClose } - key={ menu.id } - > - { menu.name } - - ); - } ) } - - ) } - - ) : undefined } - { hasPages ? ( - - ) : undefined } - -
    - ) } -
    -     - ); -} - -export default forwardRef( CreateInnerBlocksStep ); diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js index 1306f24ad812e2..9c19c88e309a16 100644 --- a/packages/block-library/src/navigation/edit/placeholder/index.js +++ b/packages/block-library/src/navigation/edit/placeholder/index.js @@ -1,32 +1,107 @@ /** * WordPress dependencies */ -import { serialize } from '@wordpress/blocks'; +import { serialize, createBlock } from '@wordpress/blocks'; +import { + Placeholder, + Button, + DropdownMenu, + MenuGroup, + MenuItem, +} from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { useDispatch } from '@wordpress/data'; -import { useCallback, useState } from '@wordpress/element'; +import { useCallback, useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; - -const PLACEHOLDER_STEPS = { - selectNavigationPost: 1, - createInnerBlocks: 2, -}; +import { navigation, chevronDown, Icon } from '@wordpress/icons'; /** * Internal dependencies */ -import SelectNavigationMenuStep from './select-navigation-menu-step'; -import CreateInnerBlocksStep from './create-inner-blocks-step'; -export default function Placeholder( { +import useNavigationEntities from '../../use-navigation-entities'; +import PlaceholderPreview from './placeholder-preview'; +import menuItemsToBlocks from '../../menu-items-to-blocks'; +import NavigationMenuNameModal from '../navigation-menu-name-modal'; +import useNavigationMenu from '../../use-navigation-menu'; + +const ExistingMenusDropdown = ( { + canSwitchNavigationMenu, + navigationMenus, + setSelectedMenu, + onFinish, + menus, + onCreateFromMenu, +} ) => { + const toggleProps = { + variant: 'primary', + className: 'wp-block-navigation-placeholder__actions__dropdown', + }; + return ( + + { ( { onClose } ) => ( + <> + + { canSwitchNavigationMenu && + navigationMenus.map( ( menu ) => { + return ( + { + setSelectedMenu( menu.id ); + onFinish( menu ); + } } + onClose={ onClose } + key={ menu.id } + > + { menu.title.rendered } + + ); + } ) } + + + { menus.map( ( menu ) => { + return ( + { + setSelectedMenu( menu.id ); + onCreateFromMenu( menu.name ); + } } + onClose={ onClose } + key={ menu.id } + > + { menu.name } + + ); + } ) } + + + ) } + + ); +}; + +export default function NavigationPlaceholder( { onFinish, canSwitchNavigationMenu, hasResolvedNavigationMenu, } ) { - const [ step, setStep ] = useState( - PLACEHOLDER_STEPS.selectNavigationPost + const [ selectedMenu, setSelectedMenu ] = useState(); + + const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false ); + + const [ menuName, setMenuName ] = useState( '' ); + + const [ isNewMenuModalVisible, setIsNewMenuModalVisible ] = useState( + false ); - const [ navigationMenuTitle, setNavigationMenuTitle ] = useState( '' ); + + const [ createEmpty, setCreateEmpty ] = useState( false ); + const { saveEntityRecord } = useDispatch( coreStore ); // This callback uses data from the two placeholder steps and only creates @@ -50,30 +125,131 @@ export default function Placeholder( { [ serialize, saveEntityRecord ] ); + const onFinishMenuCreation = async ( navigationMenuTitle, blocks ) => { + const navigationMenu = await createNavigationMenu( + navigationMenuTitle, + blocks + ); + onFinish( navigationMenu ); + }; + + const { + isResolvingPages, + menus, + isResolvingMenus, + menuItems, + hasResolvedMenuItems, + hasPages, + hasMenus, + } = useNavigationEntities( selectedMenu ); + + const isStillLoading = isResolvingPages || isResolvingMenus; + + const createFromMenu = useCallback( + ( name ) => { + const { innerBlocks: blocks } = menuItemsToBlocks( menuItems ); + onFinishMenuCreation( name, blocks ); + }, + [ menuItems, menuItemsToBlocks, onFinish ] + ); + + const onCreateFromMenu = ( name ) => { + // If we have menu items, create the block right away. + if ( hasResolvedMenuItems ) { + createFromMenu( name ); + return; + } + + // Otherwise, create the block when resolution finishes. + setIsCreatingFromMenu( true ); + // Store the name to use later. + setMenuName( name ); + }; + + const onCreateEmptyMenu = ( name ) => { + onFinishMenuCreation( name, [] ); + }; + + const onCreateAllPages = ( name ) => { + const block = [ createBlock( 'core/page-list' ) ]; + onFinishMenuCreation( name, block ); + setIsNewMenuModalVisible( true ); + }; + + useEffect( () => { + // If the user selected a menu but we had to wait for menu items to + // finish resolving, then create the block once resolution finishes. + if ( isCreatingFromMenu && hasResolvedMenuItems ) { + createFromMenu( menuName ); + setIsCreatingFromMenu( false ); + } + }, [ isCreatingFromMenu, hasResolvedMenuItems, menuName ] ); + + const { navigationMenus } = useNavigationMenu(); + return ( <> - { step === PLACEHOLDER_STEPS.selectNavigationPost && ( - { - setNavigationMenuTitle( newTitle ); - setStep( PLACEHOLDER_STEPS.createInnerBlocks ); - } } - onSelectExisting={ ( navigationMenu ) => { - onFinish( navigationMenu ); - } } - canSwitchNavigationMenu={ canSwitchNavigationMenu } - hasResolvedNavigationMenu={ hasResolvedNavigationMenu } - /> + { ( ! hasResolvedNavigationMenu || isStillLoading ) && ( + + ) } + { hasResolvedNavigationMenu && ! isStillLoading && ( + + +
    +
    +
    + { ' ' } + { __( 'Navigation' ) } +
    + { hasMenus || navigationMenus.length ? ( + + ) : undefined } + { hasPages ? ( + + ) : undefined } + +
    +
    +     ) } - { step === PLACEHOLDER_STEPS.createInnerBlocks && ( - { - const navigationMenu = await createNavigationMenu( - navigationMenuTitle, - blocks - ); - onFinish( navigationMenu ); + { isNewMenuModalVisible && ( + { + setIsNewMenuModalVisible( false ); } } + onFinish={ + createEmpty ? onCreateEmptyMenu : onCreateAllPages + } /> ) } diff --git a/packages/block-library/src/navigation/edit/placeholder/select-navigation-menu-step.js b/packages/block-library/src/navigation/edit/placeholder/select-navigation-menu-step.js deleted file mode 100644 index 1d8c468577c4ac..00000000000000 --- a/packages/block-library/src/navigation/edit/placeholder/select-navigation-menu-step.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; -import { Button, Dropdown, Placeholder } from '@wordpress/components'; -import { navigation as navigationIcon } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import PlaceholderPreview from './placeholder-preview'; -import NavigationMenuSelector from '../navigation-menu-selector'; -import NavigationMenuNameModal from '../navigation-menu-name-modal'; - -export default function SelectNavigationMenuStep( { - canSwitchNavigationMenu, - hasResolvedNavigationMenu, - onCreateNew, - onSelectExisting, -} ) { - const [ isNewMenuModalVisible, setIsNewMenuModalVisible ] = useState( - false - ); - - return ( - <> - { ! hasResolvedNavigationMenu && } - { hasResolvedNavigationMenu && ( - - { canSwitchNavigationMenu && ( - ( - - ) } - renderContent={ ( { onClose } ) => ( - - ) } - /> - ) } - - - ) } - { isNewMenuModalVisible && ( - { - setIsNewMenuModalVisible( false ); - } } - onFinish={ onCreateNew } - /> - ) } - - ); -} From 883d9a83282ce0a53a46b1e31542676e7c29a51a Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Mon, 1 Nov 2021 12:24:06 +0100 Subject: [PATCH 10/14] Fix dropdown indicator. (#36106) * Fix dropdown indicator. * Update packages/block-library/src/navigation/editor.scss Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> * Polish comment. Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --- packages/block-library/src/navigation/editor.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 0e18fd0a065742..b06efa6512b815 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -20,6 +20,15 @@ } } +// The following rule affects the positioning of the dropdown arrow indicator. +// On the frontend, this element is inline, which makes it look correct. In the editor, +// the label is block, which causes the dropdown indicator to wrap onto a new line. +// Therefore we explicitly set it to inline even in the block editor. +.wp-block-navigation-item__label { + display: inline; +} + + /** * Submenus. */ From 7d035365587e40ca61b931386d9f68632b121f1d Mon Sep 17 00:00:00 2001 From: Jb Audras Date: Mon, 1 Nov 2021 12:40:08 +0100 Subject: [PATCH 11/14] Fix a small typo in the Getting started docs (#36109) Thanks @alokstha1 for spotting this. https://wordpress.slack.com/archives/C02RP4WU5/p1635759441069000?thread_ts=1635757869.068600&cid=C02RP4WU5 --- docs/getting-started/devenv/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started/devenv/README.md b/docs/getting-started/devenv/README.md index 73e82fcdb24188..7859f50045804d 100644 --- a/docs/getting-started/devenv/README.md +++ b/docs/getting-started/devenv/README.md @@ -114,7 +114,7 @@ There are several ways to run WordPress locally on your own computer, or you cou The WordPress [wp-env package](https://www.npmjs.com/package/@wordpress/env) lets you set up a local WordPress environment for building and testing plugins and themes, without any additional configuration. -The `wp-env` tool uses Docker to create a virtual machine to that runs the WordPress site. There are instructions available for installing Docker on [Windows 10 Pro](https://docs.docker.com/docker-for-windows/install/), [other versions of Windows 10](https://docs.docker.com/docker-for-windows/wsl/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/v17.12/install/linux/docker-ce/ubuntu/#install-using-the-convenience-script). If using Ubuntu, see our additional notes for [help installing Docker on Ubuntu](/docs/getting-started/devenv/docker-ubuntu.md). +The `wp-env` tool uses Docker to create a virtual machine that runs the WordPress site. There are instructions available for installing Docker on [Windows 10 Pro](https://docs.docker.com/docker-for-windows/install/), [other versions of Windows 10](https://docs.docker.com/docker-for-windows/wsl/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/v17.12/install/linux/docker-ce/ubuntu/#install-using-the-convenience-script). If using Ubuntu, see our additional notes for [help installing Docker on Ubuntu](/docs/getting-started/devenv/docker-ubuntu.md). After you have installed Docker, go ahead and install the `wp-env` tool. This command will install the tool globally, which means you can run it from any directory: From f2df34c88997ba7f87186bdd6ef40cc60c52146b Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Mon, 1 Nov 2021 12:57:56 +0100 Subject: [PATCH 12/14] Try: Show drag slot instead of hiding the item being dragged. (#33950) * Try: Show drag slot instead of hiding the item being dragged. * Try max-height, and polish. * Remove max-height again. * Hide subsequent multi selected blocks. * Allow multiple sequential drag slots. --- .../src/components/block-draggable/style.scss | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss index 618e17dc2fa959..03ecec53945ba1 100644 --- a/packages/block-editor/src/components/block-draggable/style.scss +++ b/packages/block-editor/src/components/block-draggable/style.scss @@ -45,8 +45,23 @@ } } -// This hides the block being dragged. -// The effect is that the block being dragged appears to be "lifted". -.is-dragging { - display: none !important; +// This creates a "slot" where the block you're dragging appeared. +// We use !important as one of the rules are meant to be overriden. +.block-editor-block-list__layout .is-dragging { + background-color: currentColor !important; + opacity: 0.05 !important; + border-radius: $radius-block-ui !important; + + // Disabling pointer events during the drag event is necessary, + // lest the block might affect your drag operation. + pointer-events: none !important; + + // Hide the multi selection indicator when dragging. + &::selection { + background: transparent !important; + } + + &::after { + content: none !important; + } } From d21da6a6209cb32fff05308260a14e80decb587d Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Mon, 1 Nov 2021 14:53:58 +0200 Subject: [PATCH 13/14] [Patterns]: Add a flag to hide patterns from UI (#36108) * [Patterns]: Add a flag to hide patterns from UI * rename flag --- packages/block-editor/src/store/selectors.js | 8 +- .../block-editor/src/store/test/selectors.js | 79 +++++++++++++++++++ 2 files changed, 84 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index fa00663d276ba4..0aec0c67911396 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1901,9 +1901,11 @@ const getAllAllowedPatterns = createSelector( ( state ) => { const patterns = state.settings.__experimentalBlockPatterns; const { allowedBlockTypes } = getSettings( state ); - const parsedPatterns = patterns.map( ( { name } ) => - __experimentalGetParsedPattern( state, name ) - ); + const parsedPatterns = patterns + .filter( ( { inserter = true } ) => !! inserter ) + .map( ( { name } ) => + __experimentalGetParsedPattern( state, name ) + ); const allowedPatterns = parsedPatterns.filter( ( { blocks } ) => checkAllowListRecursive( blocks, allowedBlockTypes ) ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index a0de9315e41018..3563dd8c92b22b 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -71,6 +71,7 @@ const { getLowestCommonAncestorWithSelectedBlock, __experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames, __experimentalGetAllowedPatterns, + __experimentalGetParsedPattern, __experimentalGetPatternsByBlockTypes, __unstableGetClientIdWithClientIdsTree, __unstableGetClientIdsTree, @@ -3330,6 +3331,13 @@ describe( 'selectors', () => { content: '', }, + { + name: 'pattern-c', + title: 'pattern hidden from UI', + inserter: false, + content: + '', + }, ], }, }; @@ -3349,6 +3357,77 @@ describe( 'selectors', () => { __experimentalGetAllowedPatterns( state, 'block2' ) ).toHaveLength( 0 ); } ); + it( 'should return empty array if only patterns hidden from UI exist', () => { + expect( + __experimentalGetAllowedPatterns( { + blocks: { byClientId: {} }, + blockListSettings: {}, + settings: { + __experimentalBlockPatterns: [ + { + name: 'pattern-c', + title: 'pattern hidden from UI', + inserter: false, + content: + '', + }, + ], + }, + } ) + ).toHaveLength( 0 ); + } ); + } ); + describe( '__experimentalGetParsedPattern', () => { + const state = { + settings: { + __experimentalBlockPatterns: [ + { + name: 'pattern-a', + title: 'pattern with a', + content: ``, + }, + { + name: 'pattern-hidden-from-ui', + title: 'pattern hidden from UI', + inserter: false, + content: + '', + }, + ], + }, + }; + it( 'should return proper results when pattern does not exist', () => { + expect( + __experimentalGetParsedPattern( state, 'not there' ) + ).toBeNull(); + } ); + it( 'should return existing pattern properly parsed', () => { + const { name, blocks } = __experimentalGetParsedPattern( + state, + 'pattern-a' + ); + expect( name ).toEqual( 'pattern-a' ); + expect( blocks ).toHaveLength( 1 ); + expect( blocks[ 0 ] ).toEqual( + expect.objectContaining( { + name: 'core/test-block-a', + } ) + ); + } ); + it( 'should return hidden from UI pattern when requested', () => { + const { name, blocks, inserter } = __experimentalGetParsedPattern( + state, + 'pattern-hidden-from-ui' + ); + expect( name ).toEqual( 'pattern-hidden-from-ui' ); + expect( inserter ).toBeFalsy(); + expect( blocks ).toHaveLength( 2 ); + expect( blocks[ 0 ] ).toEqual( + expect.objectContaining( { + name: 'core/test-block-a', + } ) + ); + } ); } ); describe( '__experimentalGetPatternsByBlockTypes', () => { const state = { From 955c4871560f7a062781b0195e817f0bdac4a147 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 1 Nov 2021 15:13:29 +0100 Subject: [PATCH 14/14] Fix inserter with block pattern categories (#36116) --- .../components/inserter/block-patterns-tab.js | 61 +++++++++++-------- 1 file changed, 36 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js index d052e4f552f93c..da47047db4179c 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js @@ -6,7 +6,7 @@ import { fromPairs } from 'lodash'; /** * WordPress dependencies */ -import { useMemo, useCallback, useEffect } from '@wordpress/element'; +import { useMemo, useCallback } from '@wordpress/element'; import { _x } from '@wordpress/i18n'; import { useAsyncList } from '@wordpress/compose'; @@ -28,43 +28,54 @@ function BlockPatternsCategory( { rootClientId ); - // Remove any empty categories - const populatedCategories = useMemo( - () => - allCategories - .filter( ( category ) => - allPatterns.some( ( pattern ) => - pattern.categories?.includes( category.name ) - ) - ) - .sort( ( { name: currentName }, { name: nextName } ) => { - if ( ! [ currentName, nextName ].includes( 'featured' ) ) { - return 0; - } - return currentName === 'featured' ? -1 : 1; - } ), - [ allPatterns, allCategories ] + const hasRegisteredCategory = useCallback( + ( pattern ) => { + if ( ! pattern.categories || ! pattern.categories.length ) { + return false; + } + + return pattern.categories.some( ( cat ) => + allCategories.some( ( category ) => category.name === cat ) + ); + }, + [ allCategories ] ); - const patternCategory = selectedCategory - ? selectedCategory - : populatedCategories[ 0 ]; + // Remove any empty categories + const populatedCategories = useMemo( () => { + const categories = allCategories + .filter( ( category ) => + allPatterns.some( ( pattern ) => + pattern.categories?.includes( category.name ) + ) + ) + .sort( ( { name: currentName }, { name: nextName } ) => { + if ( ! [ currentName, nextName ].includes( 'featured' ) ) { + return 0; + } + return currentName === 'featured' ? -1 : 1; + } ); - useEffect( () => { if ( allPatterns.some( - ( pattern ) => getPatternIndex( pattern ) === Infinity + ( pattern ) => ! hasRegisteredCategory( pattern ) ) && - ! populatedCategories.find( + ! categories.find( ( category ) => category.name === 'uncategorized' ) ) { - populatedCategories.push( { + categories.push( { name: 'uncategorized', label: _x( 'Uncategorized' ), } ); } - }, [ populatedCategories, allPatterns ] ); + + return categories; + }, [ allPatterns, allCategories ] ); + + const patternCategory = selectedCategory + ? selectedCategory + : populatedCategories[ 0 ]; const getPatternIndex = useCallback( ( pattern ) => {