From eee1345531f06333fbd714c546811e466c4639a3 Mon Sep 17 00:00:00 2001 From: Kelly Hoffman Date: Thu, 17 Jun 2021 02:23:26 -0700 Subject: [PATCH 01/24] Block categories: Clean these up by moving several blocks from Design to Theme (#32568) * navigation: update category from Design to Theme * loginout: update category from Design to Theme * query: update category from Design to Theme * post title: update category from Design to Theme * post content: update category from Design to Theme * post date: update category from Design to Theme * post excerpt: update category from Design to Theme * post featured image: update category from Design to Theme * post author: update category from Design to Theme * post comment: update category from Design to Theme * post comments: update category from Design to Theme * post comments count: update category from Design to Theme * post comments form: update category from Design to Theme * post comments link: update category from Design to Theme * term description: update category from Design to Theme * nextpage: update category from Design to Theme * break: undo category change * post navigation link: update category from Design to Theme --- packages/block-library/src/loginout/block.json | 2 +- packages/block-library/src/navigation/block.json | 2 +- packages/block-library/src/post-author/block.json | 2 +- packages/block-library/src/post-comment/block.json | 2 +- packages/block-library/src/post-comments-count/block.json | 2 +- packages/block-library/src/post-comments-form/block.json | 2 +- packages/block-library/src/post-comments-link/block.json | 2 +- packages/block-library/src/post-comments/block.json | 2 +- packages/block-library/src/post-content/block.json | 2 +- packages/block-library/src/post-date/block.json | 2 +- packages/block-library/src/post-excerpt/block.json | 2 +- packages/block-library/src/post-featured-image/block.json | 2 +- packages/block-library/src/post-navigation-link/block.json | 2 +- packages/block-library/src/post-title/block.json | 2 +- packages/block-library/src/query/block.json | 2 +- packages/block-library/src/term-description/block.json | 2 +- 16 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json index dfb40f7a066378..fa4dd5883c5079 100644 --- a/packages/block-library/src/loginout/block.json +++ b/packages/block-library/src/loginout/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/loginout", "title": "Login/out", - "category": "design", + "category": "theme", "description": "Show login & logout links.", "keywords": [ "login", "logout", "form" ], "textdomain": "default", diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index bb9a24dab353c4..28ea05470ae708 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/navigation", "title": "Navigation", - "category": "design", + "category": "theme", "description": "A collection of blocks that allow visitors to get around your site.", "keywords": [ "menu", diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json index 894c2fae772d4e..f82c5662abeae9 100644 --- a/packages/block-library/src/post-author/block.json +++ b/packages/block-library/src/post-author/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-author", "title": "Post Author", - "category": "design", + "category": "theme", "description": "Add the author of this post.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/post-comment/block.json b/packages/block-library/src/post-comment/block.json index 12b1c6a484b1eb..695b56df4288bd 100644 --- a/packages/block-library/src/post-comment/block.json +++ b/packages/block-library/src/post-comment/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-comment", "title": "Post Comment", - "category": "design", + "category": "theme", "description": "Post comment.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json index 90e7b30bedc6b9..7aded93b0fad06 100644 --- a/packages/block-library/src/post-comments-count/block.json +++ b/packages/block-library/src/post-comments-count/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-comments-count", "title": "Post Comments Count", - "category": "design", + "category": "theme", "description": "Display a post's comments count.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json index f0e20a32841d82..38a14829358f09 100644 --- a/packages/block-library/src/post-comments-form/block.json +++ b/packages/block-library/src/post-comments-form/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-comments-form", "title": "Post Comments Form", - "category": "design", + "category": "theme", "description": "Display a post's comments form.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json index cbabeda389c935..b1b82647251822 100644 --- a/packages/block-library/src/post-comments-link/block.json +++ b/packages/block-library/src/post-comments-link/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-comments-link", "title": "Post Comments Link", - "category": "design", + "category": "theme", "description": "Displays the link to the current post comments.", "textdomain": "default", "usesContext": [ "postType", "postId" ], diff --git a/packages/block-library/src/post-comments/block.json b/packages/block-library/src/post-comments/block.json index 4853bbf750ce1d..733c64c67189f8 100644 --- a/packages/block-library/src/post-comments/block.json +++ b/packages/block-library/src/post-comments/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-comments", "title": "Post Comments", - "category": "design", + "category": "theme", "description": "Display a post's comments.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json index a5152350f57535..b8dc5feb15b35a 100644 --- a/packages/block-library/src/post-content/block.json +++ b/packages/block-library/src/post-content/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-content", "title": "Post Content", - "category": "design", + "category": "theme", "description": "Displays the contents of a post or page.", "textdomain": "default", "usesContext": [ "postId", "postType", "queryId" ], diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json index f03aa33404043a..260e5f1c2a31ff 100644 --- a/packages/block-library/src/post-date/block.json +++ b/packages/block-library/src/post-date/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-date", "title": "Post Date", - "category": "design", + "category": "theme", "description": "Add the date of this post.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json index fe465eb15a048b..9010f9f486235f 100644 --- a/packages/block-library/src/post-excerpt/block.json +++ b/packages/block-library/src/post-excerpt/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-excerpt", "title": "Post Excerpt", - "category": "design", + "category": "theme", "description": "Display a post's excerpt.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index e334fe437eee74..a5ab8d6cfd8ce8 100644 --- a/packages/block-library/src/post-featured-image/block.json +++ b/packages/block-library/src/post-featured-image/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-featured-image", "title": "Post Featured Image", - "category": "design", + "category": "theme", "description": "Display a post's featured image.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json index ce6240c839f89a..84763669362cbf 100644 --- a/packages/block-library/src/post-navigation-link/block.json +++ b/packages/block-library/src/post-navigation-link/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-navigation-link", "title": "Post Navigation Link", - "category": "design", + "category": "theme", "description": "Displays the next or previous post link that is adjacent to the current post.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index 621ef676e426da..b20985442e01af 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/post-title", "title": "Post Title", - "category": "design", + "category": "theme", "description": "Displays the title of a post, page, or any other content-type.", "textdomain": "default", "usesContext": [ "postId", "postType", "queryId" ], diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index a08dbc2e1326e7..eb0003e93f4581 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/query", "title": "Query Loop", - "category": "design", + "category": "theme", "description": "Displays a list of posts as a result of a query.", "textdomain": "default", "attributes": { diff --git a/packages/block-library/src/term-description/block.json b/packages/block-library/src/term-description/block.json index e54b59978a395f..1f2da2be430574 100644 --- a/packages/block-library/src/term-description/block.json +++ b/packages/block-library/src/term-description/block.json @@ -2,7 +2,7 @@ "apiVersion": 2, "name": "core/term-description", "title": "Term Description", - "category": "design", + "category": "theme", "description": "Display the description of categories, tags and custom taxonomies when viewing an archive.", "textdomain": "default", "attributes": { From 15f2b3f2c9b39c15139b171dd1d0c8c74efdd7e7 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 16 Jun 2021 04:46:14 +0400 Subject: [PATCH 02/24] Widget Editor: Hide some settings from the "Options" menu on small screens (#32690) --- .../src/components/more-menu/index.js | 63 ++++++++++--------- 1 file changed, 35 insertions(+), 28 deletions(-) diff --git a/packages/edit-widgets/src/components/more-menu/index.js b/packages/edit-widgets/src/components/more-menu/index.js index 2c93b5589232ba..97ce294c41b0d5 100644 --- a/packages/edit-widgets/src/components/more-menu/index.js +++ b/packages/edit-widgets/src/components/more-menu/index.js @@ -12,6 +12,7 @@ import { __, _x } from '@wordpress/i18n'; import { external, moreVertical } from '@wordpress/icons'; import { displayShortcut } from '@wordpress/keycodes'; import { useShortcut } from '@wordpress/keyboard-shortcuts'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -43,6 +44,8 @@ export default function MoreMenu() { } ); + const isLargeViewport = useViewportMatch( 'medium' ); + return ( <> { () => ( <> - - - + { isLargeViewport && ( + + + + ) } { @@ -117,19 +122,21 @@ export default function MoreMenu() { 'Contain text cursor inside block deactivated' ) } /> - + { isLargeViewport && ( + + ) } ) } From 136fd9741276663274e0c159170b0305181bdeb8 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 16 Jun 2021 08:09:56 +0800 Subject: [PATCH 03/24] Fix insertion point displaying when there are no inserter items (#32576) --- packages/block-editor/src/store/selectors.js | 12 ++++++- .../block-editor/src/store/test/selectors.js | 31 +++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index de8dd02b2c0e4e..bb310ccfab2db5 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1215,7 +1215,17 @@ export function getBlockInsertionPoint( state ) { * @return {?boolean} Whether the insertion point is visible or not. */ export function isBlockInsertionPointVisible( state ) { - return state.insertionPoint !== null; + const insertionPoint = state.insertionPoint; + + if ( ! state.insertionPoint ) { + return false; + } + + if ( getTemplateLock( state, insertionPoint.rootClientId ) ) { + return false; + } + + return true; } /** diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 0e67cc0f1d5515..40194fad3c5c6b 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -2255,12 +2255,43 @@ describe( 'selectors', () => { expect( isBlockInsertionPointVisible( state ) ).toBe( false ); } ); + it( 'should return false if the rootClientId has a truthy template lock', () => { + const state = { + insertionPoint: { + rootClientId: 'testClientId', + index: 5, + }, + blockListSettings: { + testClientId: { + templateLock: 'all', + }, + }, + }; + + expect( isBlockInsertionPointVisible( state ) ).toBe( false ); + } ); + + it( 'should return false if the rootClientId is undefined, and the settings has a template lock', () => { + const state = { + insertionPoint: { + rootClientId: undefined, + index: 5, + }, + settings: { + templateLock: 'all', + }, + }; + + expect( isBlockInsertionPointVisible( state ) ).toBe( false ); + } ); + it( 'should return true if assigned insertion point', () => { const state = { insertionPoint: { rootClientId: undefined, index: 5, }, + settings: {}, }; expect( isBlockInsertionPointVisible( state ) ).toBe( true ); From 336b39db23db0a9e7d98cc1d617d3d066f5a6736 Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Wed, 16 Jun 2021 15:04:25 +1000 Subject: [PATCH 04/24] Widgets: Don't delete a widget if it is moved to a different area (#32608) --- lib/class-wp-rest-widgets-controller.php | 43 +++++++++++++++++++--- packages/edit-widgets/src/store/actions.js | 21 +++++++---- 2 files changed, 52 insertions(+), 12 deletions(-) diff --git a/lib/class-wp-rest-widgets-controller.php b/lib/class-wp-rest-widgets-controller.php index 03e16a7a6a75de..84256c9eb3d428 100644 --- a/lib/class-wp-rest-widgets-controller.php +++ b/lib/class-wp-rest-widgets-controller.php @@ -281,10 +281,14 @@ public function delete_item_permissions_check( $request ) { // phpcs:ignore Vari * * @since 5.6.0 * + * @global array $wp_registered_widget_updates The registered widget update functions. + * * @param WP_REST_Request $request Full details about the request. * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure. */ public function delete_item( $request ) { + global $wp_registered_widget_updates; + $widget_id = $request['id']; $sidebar_id = wp_find_widgets_sidebar( $widget_id ); @@ -299,17 +303,46 @@ public function delete_item( $request ) { $request['context'] = 'edit'; if ( $request['force'] ) { - $prepared = $this->prepare_item_for_response( compact( 'widget_id', 'sidebar_id' ), $request ); + $response = $this->prepare_item_for_response( compact( 'widget_id', 'sidebar_id' ), $request ); + + $parsed_id = wp_parse_widget_id( $widget_id ); + $id_base = $parsed_id['id_base']; + + $original_post = $_POST; + $original_request = $_REQUEST; + + $_POST = array( + 'sidebar' => $sidebar_id, + "widget-$id_base" => array(), + 'the-widget-id' => $widget_id, + 'delete_widget' => '1', + ); + $_REQUEST = $_POST; + + $callback = $wp_registered_widget_updates[ $id_base ]['callback']; + $params = $wp_registered_widget_updates[ $id_base ]['params']; + + if ( is_callable( $callback ) ) { + ob_start(); + call_user_func_array( $callback, $params ); + ob_end_clean(); + } + + $_POST = $original_post; + $_REQUEST = $original_request; + wp_assign_widget_to_sidebar( $widget_id, '' ); - $prepared->set_data( + + $response->set_data( array( 'deleted' => true, - 'previous' => $prepared->get_data(), + 'previous' => $response->get_data(), ) ); } else { wp_assign_widget_to_sidebar( $widget_id, 'wp_inactive_widgets' ); - $prepared = $this->prepare_item_for_response( + + $response = $this->prepare_item_for_response( array( 'sidebar_id' => 'wp_inactive_widgets', 'widget_id' => $widget_id, @@ -318,7 +351,7 @@ public function delete_item( $request ) { ); } - return $prepared; + return $response; } /** diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js index 179723a85488e2..1ba1b03d8abf94 100644 --- a/packages/edit-widgets/src/store/actions.js +++ b/packages/edit-widgets/src/store/actions.js @@ -120,13 +120,20 @@ export function* saveWidgetArea( widgetAreaId ) { return true; } ); - // Get all widgets that have been deleted - const deletedWidgets = areaWidgets.filter( - ( { id } ) => - ! widgetsBlocks.some( - ( widgetBlock ) => getWidgetIdFromBlock( widgetBlock ) === id - ) - ); + // Determine which widgets have been deleted. We can tell if a widget is + // deleted and not just moved to a different area by looking to see if + // getWidgetAreaForWidgetId() finds something. + const deletedWidgets = []; + for ( const widget of areaWidgets ) { + const widgetsNewArea = yield select( + editWidgetsStoreName, + 'getWidgetAreaForWidgetId', + widget.id + ); + if ( ! widgetsNewArea ) { + deletedWidgets.push( widget ); + } + } const batchMeta = []; const batchTasks = []; From 9991315556d4735616d6ac384b23aa0a60547dd4 Mon Sep 17 00:00:00 2001 From: Matias Ventura Date: Wed, 16 Jun 2021 09:54:12 +0200 Subject: [PATCH 05/24] Add helpful text to Query Loop block (#32694) * Update and expand block descriptions for Query and Post Template. * Add helpful text explaining the different intricate parts of a WP query. The goal is to introduce users to some of the more obscure concepts that come with WordPress, making the Query block a paving stone for more advanced usage of the software. --- packages/block-library/src/post-template/block.json | 2 +- packages/block-library/src/query/block.json | 2 +- .../src/query/edit/query-inspector-controls.js | 10 ++++++++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index e4d5de82815147..7ac5910941d76f 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -4,7 +4,7 @@ "title": "Post Template", "category": "design", "parent": [ "core/query" ], - "description": "Post Template.", + "description": "Contains the block elements used to render a post, like the title, date, featured image, content or excerpt, and more.", "textdomain": "default", "usesContext": [ "queryId", diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json index eb0003e93f4581..f7e74cf3c33298 100644 --- a/packages/block-library/src/query/block.json +++ b/packages/block-library/src/query/block.json @@ -3,7 +3,7 @@ "name": "core/query", "title": "Query Loop", "category": "theme", - "description": "Displays a list of posts as a result of a query.", + "description": "An advanced block that allows displaying post types based on different query parameters and visual configurations.", "textdomain": "default", "attributes": { "queryId": { diff --git a/packages/block-library/src/query/edit/query-inspector-controls.js b/packages/block-library/src/query/edit/query-inspector-controls.js index 315b18d499dc62..c4dd6947221030 100644 --- a/packages/block-library/src/query/edit/query-inspector-controls.js +++ b/packages/block-library/src/query/edit/query-inspector-controls.js @@ -178,9 +178,9 @@ export default function QueryInspectorControls( { setQuery( { inherit: !! value } ) } @@ -191,6 +191,9 @@ export default function QueryInspectorControls( { value={ postType } label={ __( 'Post Type' ) } onChange={ onPostTypeChange } + help={ __( + 'WordPress contains different types of content and they are divided into collections called "Post Types". By default there are a few different ones such as blog posts and pages, but plugins could add more.' + ) } /> ) } { displayLayout?.type === 'flex' && ( @@ -230,6 +233,9 @@ export default function QueryInspectorControls( { options={ stickyOptions } value={ sticky } onChange={ ( value ) => setQuery( { sticky: value } ) } + help={ __( + 'Blog posts can be "stickied", a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.' + ) } /> ) } From 7dca2c4a5d590f60285a6868dd1771cdfb34052d Mon Sep 17 00:00:00 2001 From: Aaron Jorbin Date: Wed, 16 Jun 2021 05:34:30 -0400 Subject: [PATCH 06/24] Prevent duplicate template queries (#32700) When passing args to WP_Query::__construct method (in this case, but creating a new WP_Query, this one internally executes the WP_Query::get_posts method and stores the result in the WP_Query::posts property. When calling the WP_Query::get_posts again, the same SQL query gets executed, and the result is again stored in the WP_Query::posts property. Originally done in WordPress Core in https://core.trac.wordpress.org/changeset/51144 for https://core.trac.wordpress.org/ticket/53176 with props to jorbin and david.binda. --- lib/full-site-editing/block-templates.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/full-site-editing/block-templates.php b/lib/full-site-editing/block-templates.php index b96235ae1bf2f5..86b044f5010d3f 100644 --- a/lib/full-site-editing/block-templates.php +++ b/lib/full-site-editing/block-templates.php @@ -333,7 +333,7 @@ function gutenberg_get_block_templates( $query = array(), $template_type = 'wp_t $template_query = new WP_Query( $wp_query_args ); $query_result = array(); - foreach ( $template_query->get_posts() as $post ) { + foreach ( $template_query->posts as $post ) { $template = _gutenberg_build_template_result_from_post( $post ); if ( ! is_wp_error( $template ) ) { @@ -392,7 +392,7 @@ function gutenberg_get_block_template( $id, $template_type = 'wp_template' ) { ), ); $template_query = new WP_Query( $wp_query_args ); - $posts = $template_query->get_posts(); + $posts = $template_query->posts; if ( count( $posts ) > 0 ) { $template = _gutenberg_build_template_result_from_post( $posts[0] ); @@ -477,7 +477,7 @@ function gutenberg_filter_wp_template_unique_post_slug( $override_slug, $slug, $ ), ); $check_query = new WP_Query( $check_query_args ); - $posts = $check_query->get_posts(); + $posts = $check_query->posts; if ( count( $posts ) > 0 ) { $suffix = 2; @@ -487,7 +487,7 @@ function gutenberg_filter_wp_template_unique_post_slug( $override_slug, $slug, $ $query_args['post_name__in'] = array( $alt_post_name ); $query = new WP_Query( $query_args ); $suffix++; - } while ( count( $query->get_posts() ) > 0 ); + } while ( count( $query->posts ) > 0 ); $override_slug = $alt_post_name; } From 8e48dc4346543ca1f3e791b8962dde47afa2619e Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Tue, 15 Jun 2021 23:44:59 +0400 Subject: [PATCH 07/24] Template Mode: Translate delete template confirmation message (#32647) --- .../src/components/header/template-title/delete-template.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js index d87246d758c417..3737403929e781 100644 --- a/packages/edit-post/src/components/header/template-title/delete-template.js +++ b/packages/edit-post/src/components/header/template-title/delete-template.js @@ -53,9 +53,11 @@ export default function DeleteTemplate() { if ( // eslint-disable-next-line no-alert window.confirm( - /* translators: %1$s: template name */ sprintf( - 'Are you sure you want to delete the %s template? It may be used by other pages or posts.', + /* translators: %s: template name */ + __( + 'Are you sure you want to delete the %s template? It may be used by other pages or posts.' + ), templateTitle ) ) From deae5d47a65739f0914ccbcfce6955729fdff155 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 16 Jun 2021 15:36:03 +0100 Subject: [PATCH 08/24] Avoid generic function names for page list block internal functions (#32736) --- packages/block-library/src/page-list/index.php | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index a0cadde487d571..5ee409feddcd60 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -92,7 +92,7 @@ function block_core_page_list_build_css_font_sizes( $context ) { * * @return string List markup. */ -function render_nested_page_list( $nested_pages ) { +function block_core_page_list_render_nested_page_list( $nested_pages ) { if ( empty( $nested_pages ) ) { return; } @@ -109,7 +109,7 @@ function render_nested_page_list( $nested_pages ) { ) . ''; if ( isset( $page['children'] ) ) { $markup .= ''; - $markup .= '
    ' . render_nested_page_list( $page['children'] ) . '
'; + $markup .= '
    ' . block_core_page_list_render_nested_page_list( $page['children'] ) . '
'; } $markup .= ''; } @@ -124,13 +124,13 @@ function render_nested_page_list( $nested_pages ) { * * @return array The nested array of pages. */ -function nest_pages( $current_level, $children ) { +function block_core_page_list_nest_pages( $current_level, $children ) { if ( empty( $current_level ) ) { return; } foreach ( (array) $current_level as $key => $current ) { if ( isset( $children[ $key ] ) ) { - $current_level[ $key ]['children'] = nest_pages( $children[ $key ], $children ); + $current_level[ $key ]['children'] = block_core_page_list_nest_pages( $children[ $key ], $children ); } } return $current_level; @@ -180,11 +180,11 @@ function render_block_core_page_list( $attributes, $content, $block ) { } } - $nested_pages = nest_pages( $top_level_pages, $pages_with_children ); + $nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children ); $wrapper_markup = '
    %2$s
'; - $items_markup = render_nested_page_list( $nested_pages ); + $items_markup = block_core_page_list_render_nested_page_list( $nested_pages ); $colors = block_core_page_list_build_css_colors( $block->context ); $font_sizes = block_core_page_list_build_css_font_sizes( $block->context ); From 53db0197f79a27c500ad96092d6e3e3e6d89aa28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Wed, 16 Jun 2021 19:42:09 +0200 Subject: [PATCH 09/24] Revert fix/slug-to-classname (#32742) Co-authored-by: Bernie Reiter --- packages/block-editor/README.md | 2 +- .../src/components/colors/test/utils.js | 16 ++++++++-- .../src/components/colors/utils.js | 11 ++----- .../src/components/font-sizes/test/utils.js | 32 +++++++++++++++++++ .../src/components/font-sizes/utils.js | 10 ++---- .../editor/global-styles-renderer.js | 9 +----- 6 files changed, 53 insertions(+), 27 deletions(-) create mode 100644 packages/block-editor/src/components/font-sizes/test/utils.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index a8a19f6f830211..b4eb9c473ceb52 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -382,7 +382,7 @@ _Parameters_ _Returns_ -- `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug and ending with '-font-size'. +- `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'. # **getFontSizeObjectByValue** diff --git a/packages/block-editor/src/components/colors/test/utils.js b/packages/block-editor/src/components/colors/test/utils.js index 6e97a8518be494..30443c359776aa 100644 --- a/packages/block-editor/src/components/colors/test/utils.js +++ b/packages/block-editor/src/components/colors/test/utils.js @@ -109,10 +109,22 @@ describe( 'color utils', () => { ).toBeUndefined(); } ); - it( 'should return a class name with the color slug without spaces', () => { + it( 'should return a class name with the color slug in kebab case', () => { expect( getColorClassName( 'background', 'Light Purple veryDark' ) - ).toBe( 'has-Light-Purple-veryDark-background' ); + ).toBe( 'has-light-purple-very-dark-background' ); + } ); + + it( 'should return the correct class name if the color slug is not a string', () => { + expect( getColorClassName( 'background', 123456 ) ).toBe( + 'has-123456-background' + ); + } ); + + it( 'should return the correct class name if the color slug contains special characters', () => { + expect( getColorClassName( 'background', '#abcdef' ) ).toBe( + 'has-abcdef-background' + ); } ); } ); } ); diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js index 00dcd5ea5b1f0f..903d7033eedee9 100644 --- a/packages/block-editor/src/components/colors/utils.js +++ b/packages/block-editor/src/components/colors/utils.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { find, map } from 'lodash'; +import { find, kebabCase, map } from 'lodash'; import tinycolor from 'tinycolor2'; /** @@ -60,14 +60,7 @@ export function getColorClassName( colorContextName, colorSlug ) { return undefined; } - // We don't want to use kebabCase from lodash here - // see https://github.com/WordPress/gutenberg/issues/32347 - // However, we need to make sure the generated class - // doesn't contain spaces. - return `has-${ colorSlug.replace( - /\s+/g, - '-' - ) }-${ colorContextName.replace( /\s+/g, '-' ) }`; + return `has-${ kebabCase( colorSlug ) }-${ colorContextName }`; } /** diff --git a/packages/block-editor/src/components/font-sizes/test/utils.js b/packages/block-editor/src/components/font-sizes/test/utils.js new file mode 100644 index 00000000000000..1a431bce828110 --- /dev/null +++ b/packages/block-editor/src/components/font-sizes/test/utils.js @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import { logged } from '@wordpress/deprecated'; + +/** + * Internal dependencies + */ +import { getFontSizeClass } from '../utils'; + +describe( 'getFontSizeClass()', () => { + afterEach( () => { + for ( const key in logged ) { + delete logged[ key ]; + } + } ); + + it( 'Should return the correct font size class when given a string', () => { + const fontSizeClass = getFontSizeClass( '14px' ); + expect( fontSizeClass ).toBe( 'has-14-px-font-size' ); + } ); + + it( 'Should return the correct font size class when given a number', () => { + const fontSizeClass = getFontSizeClass( 16 ); + expect( fontSizeClass ).toBe( 'has-16-font-size' ); + } ); + + it( 'Should return the correct font size class when the given font size contains special characters', () => { + const fontSizeClass = getFontSizeClass( '#abcdef' ); + expect( fontSizeClass ).toBe( 'has-abcdef-font-size' ); + } ); +} ); diff --git a/packages/block-editor/src/components/font-sizes/utils.js b/packages/block-editor/src/components/font-sizes/utils.js index 8284dbe981abda..8604e9f287788a 100644 --- a/packages/block-editor/src/components/font-sizes/utils.js +++ b/packages/block-editor/src/components/font-sizes/utils.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { find } from 'lodash'; +import { find, kebabCase } from 'lodash'; /** * Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. @@ -55,16 +55,12 @@ export function getFontSizeObjectByValue( fontSizes, value ) { * @param {string} fontSizeSlug Slug of the fontSize. * * @return {string} String with the class corresponding to the fontSize passed. - * The class is generated by appending 'has-' followed by fontSizeSlug and ending with '-font-size'. + * The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'. */ export function getFontSizeClass( fontSizeSlug ) { if ( ! fontSizeSlug ) { return; } - // We don't want to use kebabCase from lodash here - // see https://github.com/WordPress/gutenberg/issues/32347 - // However, we need to make sure the generated class - // doesn't contain spaces. - return `has-${ fontSizeSlug.replace( /\s+/g, '-' ) }-font-size`; + return `has-${ kebabCase( fontSizeSlug ) }-font-size`; } diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 490ecff6a41f7f..d3da00be43bae1 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -89,14 +89,7 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) { if ( presetByOrigin[ origin ] ) { presetByOrigin[ origin ].forEach( ( { slug } ) => { classes.forEach( ( { classSuffix, propertyName } ) => { - // We don't want to use kebabCase from lodash here - // see https://github.com/WordPress/gutenberg/issues/32347 - // However, we need to make sure the generated class - // doesn't contain spaces. - const classSelectorToUse = `.has-${ slug.replace( - /\s+/g, - '-' - ) }-${ classSuffix }`; + const classSelectorToUse = `.has-${ slug }-${ classSuffix }`; const selectorToUse = `${ blockSelector }${ classSelectorToUse }`; const value = `var(--wp--preset--${ cssVarInfix }--${ slug })`; declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`; From 88d4f8c0ed88e5e4243fd2690bcf7a1e2115148f Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 17 Jun 2021 00:53:26 -0700 Subject: [PATCH 10/24] Fix apparent overflow in Customizer caused by widgets editor (#32749) --- packages/customize-widgets/src/controls/style.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/customize-widgets/src/controls/style.scss b/packages/customize-widgets/src/controls/style.scss index 57bc56d9fcbbf3..6911971a69126b 100644 --- a/packages/customize-widgets/src/controls/style.scss +++ b/packages/customize-widgets/src/controls/style.scss @@ -1,9 +1,11 @@ // Additional ids and class names are used in the selector for // added specificity. #customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section { - // Override the default 'overflow' to allow the - // editor toolbars to be sticky. - overflow: unset; + // Override the `overflow` to allow the editor toolbars to be sticky. + // Applied with `.open` to keep overflow hidden in outer customize panes. + &.open { + overflow: unset; + } // Make the entire sidebar background white. min-height: 100%; From 381012c0fc636473f215d4f21ddfd40a45c9be9d Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 17 Jun 2021 15:54:15 +0800 Subject: [PATCH 11/24] Register shortcuts for navigating regions (#32757) --- .../components/keyboard-shortcuts/index.js | 32 +++++++++++++++++++ .../src/components/layout/interface.js | 17 ++++++++++ 2 files changed, 49 insertions(+) diff --git a/packages/edit-widgets/src/components/keyboard-shortcuts/index.js b/packages/edit-widgets/src/components/keyboard-shortcuts/index.js index 8147a5b1d45583..c410c992458548 100644 --- a/packages/edit-widgets/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-widgets/src/components/keyboard-shortcuts/index.js @@ -91,6 +91,38 @@ function KeyboardShortcutsRegister() { character: 'h', }, } ); + + registerShortcut( { + name: 'core/edit-widgets/next-region', + category: 'global', + description: __( 'Navigate to the next part of the editor.' ), + keyCombination: { + modifier: 'ctrl', + character: '`', + }, + aliases: [ + { + modifier: 'access', + character: 'n', + }, + ], + } ); + + registerShortcut( { + name: 'core/edit-widgets/previous-region', + category: 'global', + description: __( 'Navigate to the previous part of the editor.' ), + keyCombination: { + modifier: 'ctrlShift', + character: '`', + }, + aliases: [ + { + modifier: 'access', + character: 'p', + }, + ], + } ); }, [ registerShortcut ] ); return null; diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js index cb5d7a805aa2b5..6cf1df2b5d3cb4 100644 --- a/packages/edit-widgets/src/components/layout/interface.js +++ b/packages/edit-widgets/src/components/layout/interface.js @@ -19,6 +19,7 @@ import { store as interfaceStore, } from '@wordpress/interface'; import { __ } from '@wordpress/i18n'; +import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies @@ -51,6 +52,8 @@ function Interface( { blockEditorSettings } ) { hasBlockBreadCrumbsEnabled, hasSidebarEnabled, isInserterOpened, + previousShortcut, + nextShortcut, } = useSelect( ( select ) => ( { hasSidebarEnabled: !! select( @@ -60,6 +63,16 @@ function Interface( { blockEditorSettings } ) { hasBlockBreadCrumbsEnabled: select( editWidgetsStore ).__unstableIsFeatureActive( 'showBlockBreadcrumbs' ), + previousShortcut: select( + keyboardShortcutsStore + ).getAllShortcutRawKeyCombinations( + 'core/edit-widgets/previous-region' + ), + nextShortcut: select( + keyboardShortcutsStore + ).getAllShortcutRawKeyCombinations( + 'core/edit-widgets/next-region' + ), } ), [] ); @@ -127,6 +140,10 @@ function Interface( { blockEditorSettings } ) { ) } + shortcuts={ { + previous: previousShortcut, + next: nextShortcut, + } } /> ); } From af75d6ab3343b84ad6100502f0089da8549858fb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 17 Jun 2021 16:21:12 +0100 Subject: [PATCH 12/24] Add an API to define the default template used for the template mode (#32771) --- .../post-editor-template-mode.test.js.snap | 14 +++- .../components/sidebar/template/actions.js | 83 +++++++++++++------ 2 files changed, 69 insertions(+), 28 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/post-editor-template-mode.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/post-editor-template-mode.test.js.snap index 641ad5cc979217..469047fa627266 100644 --- a/packages/e2e-tests/specs/experiments/__snapshots__/post-editor-template-mode.test.js.snap +++ b/packages/e2e-tests/specs/experiments/__snapshots__/post-editor-template-mode.test.js.snap @@ -1,19 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Post Editor Template mode Allow creating custom block templates in classic themes 1`] = ` -"

gutenberg

+"Skip to content +

gutenberg

+ +

Just another WordPress site

-

Just another WordPress site

-

Another FSE Post

+ +
+

Another FSE Post

+

Hello World

-
+
+

Just a random paragraph added to the template

diff --git a/packages/edit-post/src/components/sidebar/template/actions.js b/packages/edit-post/src/components/sidebar/template/actions.js index 968ead9b810012..d2f2d3f9960781 100644 --- a/packages/edit-post/src/components/sidebar/template/actions.js +++ b/packages/edit-post/src/components/sidebar/template/actions.js @@ -28,22 +28,27 @@ import { createBlock, serialize } from '@wordpress/blocks'; function PostTemplateActions() { const [ isModalOpen, setIsModalOpen ] = useState( false ); const [ title, setTitle ] = useState( '' ); - const { template, supportsTemplateMode } = useSelect( ( select ) => { - const { getCurrentPostType } = select( editorStore ); - const { getPostType } = select( coreStore ); - const { getEditedPostTemplate } = select( editPostStore ); + const { template, supportsTemplateMode, defaultTemplate } = useSelect( + ( select ) => { + const { getCurrentPostType, getEditorSettings } = select( + editorStore + ); + const { getPostType } = select( coreStore ); + const { getEditedPostTemplate } = select( editPostStore ); - const isViewable = - getPostType( getCurrentPostType() )?.viewable ?? false; - const _supportsTemplateMode = - select( editorStore ).getEditorSettings().supportsTemplateMode && - isViewable; + const isViewable = + getPostType( getCurrentPostType() )?.viewable ?? false; + const _supportsTemplateMode = + getEditorSettings().supportsTemplateMode && isViewable; - return { - template: _supportsTemplateMode && getEditedPostTemplate(), - supportsTemplateMode: _supportsTemplateMode, - }; - }, [] ); + return { + template: _supportsTemplateMode && getEditedPostTemplate(), + supportsTemplateMode: _supportsTemplateMode, + defaultTemplate: getEditorSettings().defaultBlockTemplate, + }; + }, + [] + ); const { __unstableSwitchToTemplateMode } = useDispatch( editPostStore ); if ( ! supportsTemplateMode ) { @@ -79,20 +84,50 @@ function PostTemplateActions() { onSubmit={ ( event ) => { event.preventDefault(); const defaultTitle = __( 'Custom Template' ); - const templateContent = [ - createBlock( 'core/site-title' ), - createBlock( 'core/site-tagline' ), - createBlock( 'core/separator' ), - createBlock( 'core/post-title' ), - createBlock( 'core/post-content', { - layout: { inherit: true }, - } ), - ]; + const newTemplateContent = + defaultTemplate ?? + serialize( [ + createBlock( + 'core/group', + { + tagName: 'header', + layout: { inherit: true }, + }, + [ + createBlock( 'core/site-title' ), + createBlock( 'core/site-tagline' ), + ] + ), + createBlock( 'core/separator' ), + createBlock( + 'core/group', + { + tagName: 'main', + }, + [ + createBlock( + 'core/group', + { + layout: { inherit: true }, + }, + [ + createBlock( + 'core/post-title' + ), + ] + ), + createBlock( 'core/post-content', { + layout: { inherit: true }, + } ), + ] + ), + ] ); + __unstableSwitchToTemplateMode( { slug: 'wp-custom-template-' + kebabCase( title ?? defaultTitle ), - content: serialize( templateContent ), + content: newTemplateContent, title: title ?? defaultTitle, } ); setIsModalOpen( false ); From f55eb92412f243a9e0cec6d6675f6927242bd811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= Date: Fri, 18 Jun 2021 10:20:59 +0200 Subject: [PATCH 13/24] Generate classes and custom properties for global styles in the same way the post editor does (#32766) --- lib/class-wp-theme-json-gutenberg.php | 6 +- lib/utils.php | 74 +++++++++++++++++++ .../editor/global-styles-renderer.js | 12 ++- phpunit/class-gutenberg-utils-test.php | 28 +++++++ 4 files changed, 114 insertions(+), 6 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index c6aca62d36023c..679e404258e1a9 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -714,11 +714,11 @@ private static function compute_preset_classes( $settings, $selector ) { foreach ( $preset['classes'] as $class ) { foreach ( $preset_by_slug as $slug => $value ) { $stylesheet .= self::to_ruleset( - self::append_to_selector( $selector, '.has-' . $slug . '-' . $class['class_suffix'] ), + self::append_to_selector( $selector, '.has-' . gutenberg_experimental_to_kebab_case( $slug ) . '-' . $class['class_suffix'] ), array( array( 'name' => $class['property_name'], - 'value' => 'var(--wp--preset--' . $preset['css_var_infix'] . "--$slug) !important", + 'value' => 'var(--wp--preset--' . $preset['css_var_infix'] . '--' . gutenberg_experimental_to_kebab_case( $slug ) . ') !important', ), ) ); @@ -752,7 +752,7 @@ private static function compute_preset_vars( $settings ) { $preset_by_slug = self::get_merged_preset_by_slug( $preset_per_origin, $preset['value_key'] ); foreach ( $preset_by_slug as $slug => $value ) { $declarations[] = array( - 'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . $slug, + 'name' => '--wp--preset--' . $preset['css_var_infix'] . '--' . gutenberg_experimental_to_kebab_case( $slug ), 'value' => $value, ); } diff --git a/lib/utils.php b/lib/utils.php index 8e2f18051e6f3d..12ee435e88f5b0 100644 --- a/lib/utils.php +++ b/lib/utils.php @@ -63,3 +63,77 @@ function gutenberg_experimental_set( &$array, $path, $value = null ) { } $array[ $path[ $i ] ] = $value; } + +/** + * This function is trying to replicate what + * lodash's kebabCase (JS library) does in the client. + * + * The reason we need this function is that we do some processing + * in both the client and the server (e.g.: we generate + * preset classes from preset slugs) that needs to + * create the same output. + * + * We can't remove or update the client's library due to backward compatibility + * (some of the output of lodash's kebabCaseare saved in the post content). + * We have to make the server behave like the client. + * + * @link https://github.com/lodash/lodash/blob/4.17/dist/lodash.js#L14369 + * @link https://github.com/lodash/lodash/blob/4.17/dist/lodash.js#L278 + * @link https://github.com/lodash-php/lodash-php/blob/master/src/String/kebabCase.php + * @link https://github.com/lodash-php/lodash-php/blob/master/src/internal/unicodeWords.php + * + * @param string $string The string to kebab-case. + * + * @return string kebab-cased-string. + */ +function gutenberg_experimental_to_kebab_case( $string ) { + //phpcs:disable WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase + // ignore the camelCase names for variables so the names are the same as lodash + // so comparing and porting new changes is easier. + + /* + * Some notable things we've removed compared to the lodash version are: + * + * - non-alphanumeric characters: rsAstralRange, rsEmoji, etc + * - the groups that processed the apostrophe, as it's removed before passing the string to preg_match: rsApos, rsOptContrLower, and rsOptContrUpper + * + */ + + /** Used to compose unicode character classes. */ + $rsLowerRange = 'a-z\\xdf-\\xf6\\xf8-\\xff'; + $rsNonCharRange = '\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf'; + $rsPunctuationRange = '\\x{2000}-\\x{206f}'; + $rsSpaceRange = ' \\t\\x0b\\f\\xa0\\x{feff}\\n\\r\\x{2028}\\x{2029}\\x{1680}\\x{180e}\\x{2000}\\x{2001}\\x{2002}\\x{2003}\\x{2004}\\x{2005}\\x{2006}\\x{2007}\\x{2008}\\x{2009}\\x{200a}\\x{202f}\\x{205f}\\x{3000}'; + $rsUpperRange = 'A-Z\\xc0-\\xd6\\xd8-\\xde'; + $rsBreakRange = $rsNonCharRange . $rsPunctuationRange . $rsSpaceRange; + + /** Used to compose unicode capture groups. */ + $rsBreak = '[' . $rsBreakRange . ']'; + $rsDigits = '\\d+'; // The last lodash version in GitHub uses a single digit here and expands it when in use. + $rsLower = '[' . $rsLowerRange . ']'; + $rsMisc = '[^' . $rsBreakRange . $rsDigits . $rsLowerRange . $rsUpperRange . ']'; + $rsUpper = '[' . $rsUpperRange . ']'; + + /** Used to compose unicode regexes. */ + $rsMiscLower = '(?:' . $rsLower . '|' . $rsMisc . ')'; + $rsMiscUpper = '(?:' . $rsUpper . '|' . $rsMisc . ')'; + $rsOrdLower = '\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])'; + $rsOrdUpper = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])'; + + $regexp = '/' . implode( + '|', + array( + $rsUpper . '?' . $rsLower . '+' . '(?=' . implode( '|', array( $rsBreak, $rsUpper, '$' ) ) . ')', + $rsMiscUpper . '+' . '(?=' . implode( '|', array( $rsBreak, $rsUpper . $rsMiscLower, '$' ) ) . ')', + $rsUpper . '?' . $rsMiscLower . '+', + $rsUpper . '+', + $rsOrdUpper, + $rsOrdLower, + $rsDigits, + ) + ) . '/u'; + + preg_match_all( $regexp, str_replace( "'", '', $string ), $matches ); + return strtolower( implode( '-', $matches[0] ) ); + //phpcs:enable WordPress.NamingConventions.ValidVariableName.VariableNotSnakeCase +} diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index d3da00be43bae1..1b781374d2755d 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -57,7 +57,9 @@ function getPresetsDeclarations( blockPresets = {} ) { if ( presetByOrigin[ origin ] ) { presetByOrigin[ origin ].forEach( ( value ) => { declarations.push( - `--wp--preset--${ cssVarInfix }--${ value.slug }: ${ value[ valueKey ] }` + `--wp--preset--${ cssVarInfix }--${ kebabCase( + value.slug + ) }: ${ value[ valueKey ] }` ); } ); } @@ -89,9 +91,13 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) { if ( presetByOrigin[ origin ] ) { presetByOrigin[ origin ].forEach( ( { slug } ) => { classes.forEach( ( { classSuffix, propertyName } ) => { - const classSelectorToUse = `.has-${ slug }-${ classSuffix }`; + const classSelectorToUse = `.has-${ kebabCase( + slug + ) }-${ classSuffix }`; const selectorToUse = `${ blockSelector }${ classSelectorToUse }`; - const value = `var(--wp--preset--${ cssVarInfix }--${ slug })`; + const value = `var(--wp--preset--${ cssVarInfix }--${ kebabCase( + slug + ) })`; declarations += `${ selectorToUse }{${ propertyName }: ${ value } !important;}`; } ); } ); diff --git a/phpunit/class-gutenberg-utils-test.php b/phpunit/class-gutenberg-utils-test.php index 52a117ef536063..ccfc252a38e8c9 100644 --- a/phpunit/class-gutenberg-utils-test.php +++ b/phpunit/class-gutenberg-utils-test.php @@ -121,4 +121,32 @@ public function test_invalid_parameters_set() { array( 'a' => 2 ) ); } + + public function test_gutenberg_experimental_to_kebab_case() { + $this->assertEquals( 'white', gutenberg_experimental_to_kebab_case( 'white' ) ); + $this->assertEquals( 'white-black', gutenberg_experimental_to_kebab_case( 'white+black' ) ); + $this->assertEquals( 'white-black', gutenberg_experimental_to_kebab_case( 'white:black' ) ); + $this->assertEquals( 'white-black', gutenberg_experimental_to_kebab_case( 'white*black' ) ); + $this->assertEquals( 'white-black', gutenberg_experimental_to_kebab_case( 'white.black' ) ); + $this->assertEquals( 'white-black', gutenberg_experimental_to_kebab_case( 'white black' ) ); + $this->assertEquals( 'white-black', gutenberg_experimental_to_kebab_case( 'white black' ) ); + $this->assertEquals( 'white-to-black', gutenberg_experimental_to_kebab_case( 'white-to-black' ) ); + $this->assertEquals( 'white-2-white', gutenberg_experimental_to_kebab_case( 'white2white' ) ); + $this->assertEquals( 'white-2nd', gutenberg_experimental_to_kebab_case( 'white2nd' ) ); + $this->assertEquals( 'white-2-ndcolor', gutenberg_experimental_to_kebab_case( 'white2ndcolor' ) ); + $this->assertEquals( 'white-2nd-color', gutenberg_experimental_to_kebab_case( 'white2ndColor' ) ); + $this->assertEquals( 'white-2nd-color', gutenberg_experimental_to_kebab_case( 'white2nd_color' ) ); + $this->assertEquals( 'white-23-color', gutenberg_experimental_to_kebab_case( 'white23color' ) ); + $this->assertEquals( 'white-23', gutenberg_experimental_to_kebab_case( 'white23' ) ); + $this->assertEquals( '23-color', gutenberg_experimental_to_kebab_case( '23color' ) ); + $this->assertEquals( 'white-4th', gutenberg_experimental_to_kebab_case( 'white4th' ) ); + $this->assertEquals( 'font-2-xl', gutenberg_experimental_to_kebab_case( 'font2xl' ) ); + $this->assertEquals( 'white-to-white', gutenberg_experimental_to_kebab_case( 'whiteToWhite' ) ); + $this->assertEquals( 'white-t-owhite', gutenberg_experimental_to_kebab_case( 'whiteTOwhite' ) ); + $this->assertEquals( 'whit-eto-white', gutenberg_experimental_to_kebab_case( 'WHITEtoWHITE' ) ); + $this->assertEquals( '42', gutenberg_experimental_to_kebab_case( 42 ) ); + $this->assertEquals( 'ive-done', gutenberg_experimental_to_kebab_case( "i've done" ) ); + $this->assertEquals( 'ffffff', gutenberg_experimental_to_kebab_case( '#ffffff' ) ); + $this->assertEquals( 'ffffff', gutenberg_experimental_to_kebab_case( '$ffffff' ) ); + } } From b4dddc28a1e1e5d2bd2be19e7599ee596025076f Mon Sep 17 00:00:00 2001 From: Robert Anderson Date: Fri, 18 Jun 2021 18:26:46 +1000 Subject: [PATCH 14/24] Remove @wordpress/editor as a dependency from @wordpress/block-library when GUTENBERG_PHASE is 1 (#32801) --- package-lock.json | 1 - packages/block-library/package.json | 1 - packages/block-library/src/calendar/edit.js | 24 +++++++++++++-------- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index a6961d1e495acc..362747ddc9998a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13112,7 +13112,6 @@ "@wordpress/date": "file:packages/date", "@wordpress/deprecated": "file:packages/deprecated", "@wordpress/dom": "file:packages/dom", - "@wordpress/editor": "file:packages/editor", "@wordpress/element": "file:packages/element", "@wordpress/escape-html": "file:packages/escape-html", "@wordpress/hooks": "file:packages/hooks", diff --git a/packages/block-library/package.json b/packages/block-library/package.json index b41e8647a1d94a..b6a8215a90f102 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -46,7 +46,6 @@ "@wordpress/date": "file:../date", "@wordpress/deprecated": "file:../deprecated", "@wordpress/dom": "file:../dom", - "@wordpress/editor": "file:../editor", "@wordpress/element": "file:../element", "@wordpress/escape-html": "file:../escape-html", "@wordpress/hooks": "file:../hooks", diff --git a/packages/block-library/src/calendar/edit.js b/packages/block-library/src/calendar/edit.js index 567705f3d15082..ef2e96bfb1b9cd 100644 --- a/packages/block-library/src/calendar/edit.js +++ b/packages/block-library/src/calendar/edit.js @@ -11,7 +11,6 @@ import { Disabled } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import ServerSideRender from '@wordpress/server-side-render'; import { useBlockProps } from '@wordpress/block-editor'; -import { store as editorStore } from '@wordpress/editor'; const getYearMonth = memoize( ( date ) => { if ( ! date ) { @@ -26,15 +25,22 @@ const getYearMonth = memoize( ( date ) => { export default function CalendarEdit( { attributes } ) { const date = useSelect( ( select ) => { - const { getEditedPostAttribute } = select( editorStore ); + // FIXME: @wordpress/block-library should not depend on @wordpress/editor. + // Blocks can be loaded into a *non-post* block editor. + // eslint-disable-next-line @wordpress/data-no-store-string-literals + const editorSelectors = select( 'core/editor' ); + let _date; + if ( editorSelectors ) { + const postType = editorSelectors.getEditedPostAttribute( 'type' ); + // Dates are used to overwrite year and month used on the calendar. + // This overwrite should only happen for 'post' post types. + // For other post types the calendar always displays the current month. + if ( postType === 'post' ) { + _date = editorSelectors.getEditedPostAttribute( 'date' ); + } + } - const postType = getEditedPostAttribute( 'type' ); - // Dates are used to overwrite year and month used on the calendar. - // This overwrite should only happen for 'post' post types. - // For other post types the calendar always displays the current month. - return postType === 'post' - ? getEditedPostAttribute( 'date' ) - : undefined; + return _date; }, [] ); return ( From c30a0163f35ca5649b5b43cb490a353a65a29be1 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 18 Jun 2021 11:36:03 +0300 Subject: [PATCH 15/24] Remove `gutenberg` domain from Post Template block (#32804) --- packages/block-library/src/post-template/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-template/index.php b/packages/block-library/src/post-template/index.php index 88e029946c8308..dd69fda45fe7f3 100644 --- a/packages/block-library/src/post-template/index.php +++ b/packages/block-library/src/post-template/index.php @@ -103,7 +103,7 @@ function register_block_core_post_template() { function render_legacy_query_loop_block( $attributes, $content, $block ) { trigger_error( /* translators: %1$s: Block type */ - sprintf( __( 'Block %1$s has been renamed to Post Template. %1$s will be supported until WordPress version 5.9.', 'gutenberg' ), $block->name ), + sprintf( __( 'Block %1$s has been renamed to Post Template. %1$s will be supported until WordPress version 5.9.' ), $block->name ), headers_sent() || WP_DEBUG ? E_USER_WARNING : E_USER_NOTICE ); return render_block_core_post_template( $attributes, $content, $block ); From c888366435441a6f89ecbec4a035c0596c0767ac Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 18 Jun 2021 19:24:03 +0800 Subject: [PATCH 16/24] Clear event listeners on unmount in Tooltip component (#32729) --- packages/components/src/tooltip/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js index 8b850123a2eb7c..0adfc7fb08c7e5 100644 --- a/packages/components/src/tooltip/index.js +++ b/packages/components/src/tooltip/index.js @@ -169,6 +169,7 @@ function Tooltip( { children, position, text, shortcut } ) { }; const clearOnUnmount = () => { delayedSetIsOver.cancel(); + document.removeEventListener( 'mouseup', cancelIsMouseDown ); }; useEffect( () => clearOnUnmount, [] ); From 0df7451c95a159afe1ce54f30f5146bf6d560428 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 18 Jun 2021 13:22:57 +0100 Subject: [PATCH 17/24] Do not allow users to create templates with blank titles (#32809) --- .../edit-post/src/components/sidebar/template/actions.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/template/actions.js b/packages/edit-post/src/components/sidebar/template/actions.js index d2f2d3f9960781..eb136ebed8b7b6 100644 --- a/packages/edit-post/src/components/sidebar/template/actions.js +++ b/packages/edit-post/src/components/sidebar/template/actions.js @@ -55,6 +55,8 @@ function PostTemplateActions() { return null; } + const defaultTitle = __( 'Custom Template' ); + return ( <>
@@ -83,7 +85,6 @@ function PostTemplateActions() {
{ event.preventDefault(); - const defaultTitle = __( 'Custom Template' ); const newTemplateContent = defaultTemplate ?? serialize( [ @@ -126,9 +127,9 @@ function PostTemplateActions() { __unstableSwitchToTemplateMode( { slug: 'wp-custom-template-' + - kebabCase( title ?? defaultTitle ), + kebabCase( title || defaultTitle ), content: newTemplateContent, - title: title ?? defaultTitle, + title: title || defaultTitle, } ); setIsModalOpen( false ); } } @@ -139,6 +140,7 @@ function PostTemplateActions() { label={ __( 'Name' ) } value={ title } onChange={ setTitle } + placeholder={ defaultTitle } help={ __( 'Describe the purpose of the template, e.g. "Full Width". Custom templates can be applied to any post or page.' ) } From 56603640dc0b08891169d75020ef6e3029638f1d Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 18 Jun 2021 20:24:38 +0800 Subject: [PATCH 18/24] Remove classic block in widgets editor (#32800) --- packages/customize-widgets/src/index.js | 2 +- packages/edit-widgets/src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/customize-widgets/src/index.js b/packages/customize-widgets/src/index.js index 3a725ccdda2ba6..475629450f8609 100644 --- a/packages/customize-widgets/src/index.js +++ b/packages/customize-widgets/src/index.js @@ -30,7 +30,7 @@ const { wp } = window; */ export function initialize( editorName, blockEditorSettings ) { const coreBlocks = __experimentalGetCoreBlocks().filter( - ( block ) => ! [ 'core/more' ].includes( block.name ) + ( block ) => ! [ 'core/more', 'core/freeform' ].includes( block.name ) ); registerCoreBlocks( coreBlocks ); registerLegacyWidgetBlock(); diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js index b69edb7b2fc132..f2e98fc62b5a2c 100644 --- a/packages/edit-widgets/src/index.js +++ b/packages/edit-widgets/src/index.js @@ -33,7 +33,7 @@ import Layout from './components/layout'; */ export function initialize( id, settings ) { const coreBlocks = __experimentalGetCoreBlocks().filter( - ( block ) => ! [ 'core/more' ].includes( block.name ) + ( block ) => ! [ 'core/more', 'core/freeform' ].includes( block.name ) ); registerCoreBlocks( coreBlocks ); registerLegacyWidgetBlock(); From 5fb330143f172985d5e4e2560be3d68154472da0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 18 Jun 2021 22:09:21 +0100 Subject: [PATCH 19/24] Allow left/right/center alignments when a layout is defined (#32810) --- packages/block-library/src/group/edit.js | 2 +- packages/block-library/src/post-content/edit.js | 2 +- packages/block-library/src/query/edit/index.js | 2 +- packages/block-library/src/template-part/edit/inner-blocks.js | 2 +- packages/edit-post/src/components/visual-editor/index.js | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 4814c173afe7a8..cc7a14c7cf7712 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -34,7 +34,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { if ( themeSupportsLayout ) { const alignments = contentSize || wideSize - ? [ 'wide', 'full' ] + ? [ 'wide', 'full', 'left', 'center', 'right' ] : [ 'left', 'center', 'right' ]; return { type: 'default', diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index 9283b120057b36..537181c6b8cd83 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -51,7 +51,7 @@ function EditableContent( { layout, context = {} } ) { if ( themeSupportsLayout ) { const alignments = contentSize || wideSize - ? [ 'wide', 'full' ] + ? [ 'wide', 'full', 'left', 'center', 'right' ] : [ 'left', 'center', 'right' ]; return { type: 'default', diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index 637f05c18a1be5..44bd64a9988d5a 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -49,7 +49,7 @@ export function QueryContent( { attributes, setAttributes } ) { if ( themeSupportsLayout ) { const alignments = contentSize || wideSize - ? [ 'wide', 'full' ] + ? [ 'wide', 'full', 'left', 'center', 'right' ] : [ 'left', 'center', 'right' ]; return { type: 'default', diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js index ae25b10bf401a9..48a85a69227ff1 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -29,7 +29,7 @@ export default function TemplatePartInnerBlocks( { if ( themeSupportsLayout ) { const alignments = contentSize || wideSize - ? [ 'wide', 'full' ] + ? [ 'wide', 'full', 'left', 'center', 'right' ] : [ 'left', 'center', 'right' ]; return { type: 'default', diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index f4b89f28679179..9e7fab084badef 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -178,7 +178,7 @@ export default function VisualEditor( { styles } ) { if ( themeSupportsLayout ) { const alignments = contentSize || wideSize - ? [ 'wide', 'full' ] + ? [ 'wide', 'full', 'left', 'center', 'right' ] : [ 'left', 'center', 'right' ]; return { type: 'default', From 9840161608240a0b325cfef7707ab5f6830d463d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 21 Jun 2021 13:33:39 +1000 Subject: [PATCH 20/24] Fix widgets background when loading theme styles (#32683) * Fix widgets background when loading theme styles * Adjust for dark background colors. * Fix heading hover styles * Fix theme styles in legacy widget preview * Remove theme colour from editor background * Remove border styling as not needed anymore * Add toggle and fix background styles * Fix padding issue * Add back interface background color * Fix legacy widget select padding * Fix theme style bleed * Fix space around widget area heading * Move .editor-styles-wrapper to the widget area * Create temp canvas only if no canvas exists; inserter fix * Add theme styles for older versions of WP Co-authored-by: Robert Anderson --- lib/widgets-page.php | 47 ++++++++++++++++++- .../src/components/editor-styles/index.js | 24 ++++++++-- .../src/blocks/widget-area/edit/index.js | 22 +++++---- .../src/blocks/widget-area/editor.scss | 12 ++++- .../src/components/more-menu/index.js | 7 +++ .../index.js | 31 ++++++++---- packages/edit-widgets/src/store/defaults.js | 1 + packages/edit-widgets/src/style.scss | 2 +- .../src/blocks/legacy-widget/editor.scss | 7 +++ .../src/blocks/legacy-widget/index.php | 1 - 10 files changed, 128 insertions(+), 26 deletions(-) diff --git a/lib/widgets-page.php b/lib/widgets-page.php index 1a4089eea66fd7..66857b031fcfc2 100644 --- a/lib/widgets-page.php +++ b/lib/widgets-page.php @@ -20,6 +20,50 @@ class="blocks-widgets-container" 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }', + '__unstableType' => 'core', + ), + ); + if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) { + foreach ( $editor_styles as $style ) { + if ( preg_match( '~^(https?:)?//~', $style ) ) { + $response = wp_remote_get( $style ); + if ( ! is_wp_error( $response ) ) { + $styles[] = array( + 'css' => wp_remote_retrieve_body( $response ), + '__unstableType' => 'theme', + ); + } + } else { + $file = get_theme_file_path( $style ); + if ( is_file( $file ) ) { + $styles[] = array( + 'css' => file_get_contents( $file ), + 'baseURL' => get_theme_file_uri( $style ), + '__unstableType' => 'theme', + ); + } + } + } + } + + return $styles; +} + /** * Initialize the Gutenberg widgets page. * @@ -37,7 +81,8 @@ function gutenberg_widgets_init( $hook ) { $widgets_editor_context = new WP_Block_Editor_Context(); $settings = array_merge( gutenberg_get_default_block_editor_settings(), - gutenberg_get_legacy_widget_settings() + gutenberg_get_legacy_widget_settings(), + array( 'styles' => gutenberg_get_block_editor_theme_styles() ) ); // This purposefully does not rely on apply_filters( 'block_editor_settings', $settings, null ); diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js index f254715e0d0ac1..413be503890296 100644 --- a/packages/block-editor/src/components/editor-styles/index.js +++ b/packages/block-editor/src/components/editor-styles/index.js @@ -27,9 +27,27 @@ function useDarkThemeBodyClassName( styles ) { const canvas = ownerDocument.querySelector( EDITOR_STYLES_SELECTOR ); - const backgroundColor = defaultView - .getComputedStyle( canvas, null ) - .getPropertyValue( 'background-color' ); + + let backgroundColor; + + if ( ! canvas ) { + // The real .editor-styles-wrapper element might not exist in the + // DOM, so calculate the background color by creating a fake + // wrapper. + const tempCanvas = ownerDocument.createElement( 'div' ); + tempCanvas.classList.add( EDITOR_STYLES_SELECTOR ); + body.appendChild( tempCanvas ); + + backgroundColor = defaultView + .getComputedStyle( tempCanvas, null ) + .getPropertyValue( 'background-color' ); + + body.removeChild( tempCanvas ); + } else { + backgroundColor = defaultView + .getComputedStyle( canvas, null ) + .getPropertyValue( 'background-color' ); + } // If background is transparent, it should be treated as light color. if ( diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/index.js b/packages/edit-widgets/src/blocks/widget-area/edit/index.js index adc9a11ddb7941..9f2388265b0b23 100644 --- a/packages/edit-widgets/src/blocks/widget-area/edit/index.js +++ b/packages/edit-widgets/src/blocks/widget-area/edit/index.js @@ -64,16 +64,20 @@ export default function WidgetAreaEdit( { scrollAfterOpen={ ! isDragging } > { ( { opened } ) => ( - // This is required to ensure LegacyWidget blocks are not unmounted when the panel is collapsed. - // Unmounting legacy widgets may have unintended consequences (e.g. TinyMCE not being properly reinitialized) + // This is required to ensure LegacyWidget blocks are not + // unmounted when the panel is collapsed. Unmounting legacy + // widgets may have unintended consequences (e.g. TinyMCE + // not being properly reinitialized) - - - +
+ + + +
) } diff --git a/packages/edit-widgets/src/blocks/widget-area/editor.scss b/packages/edit-widgets/src/blocks/widget-area/editor.scss index 94724b0097c3aa..2f36e3b4a763af 100644 --- a/packages/edit-widgets/src/blocks/widget-area/editor.scss +++ b/packages/edit-widgets/src/blocks/widget-area/editor.scss @@ -5,17 +5,27 @@ .components-panel__body > .components-panel__body-title { font-family: $default-font; + margin-bottom: 0; // Remove default hover background in panel title. See #25752. &:hover { background: inherit; } } + + .components-panel__body .editor-styles-wrapper { + margin: 0 (-$grid-unit-20) (-$grid-unit-20) (-$grid-unit-20); + padding: $grid-unit-20; + } + + .block-list-appender.wp-block { + width: initial; + } } // Add some spacing above the inner blocks so that the block toolbar doesn't // overlap the panel header. -.wp-block-widget-area > .components-panel__body > div > .block-editor-inner-blocks { +.wp-block-widget-area > .components-panel__body > div > .editor-styles-wrapper > .block-editor-inner-blocks { padding-top: $grid-unit-30; // Ensure the widget area block lists have a minimum height so that it doesn't diff --git a/packages/edit-widgets/src/components/more-menu/index.js b/packages/edit-widgets/src/components/more-menu/index.js index 97ce294c41b0d5..7b65c841771911 100644 --- a/packages/edit-widgets/src/components/more-menu/index.js +++ b/packages/edit-widgets/src/components/more-menu/index.js @@ -122,6 +122,13 @@ export default function MoreMenu() { 'Contain text cursor inside block deactivated' ) } /> + { isLargeViewport && ( ( { + hasThemeStyles: select( editWidgetsStore ).__unstableIsFeatureActive( + 'themeStyles' + ), + } ) ); + + const styles = useMemo( () => { + return hasThemeStyles ? blockEditorSettings.styles : []; + }, [ blockEditorSettings, hasThemeStyles ] ); + return (
-
- - - - - - - - -
+ + + + + + + +
); diff --git a/packages/edit-widgets/src/store/defaults.js b/packages/edit-widgets/src/store/defaults.js index eac9b38f444808..e51d5e978f07e5 100644 --- a/packages/edit-widgets/src/store/defaults.js +++ b/packages/edit-widgets/src/store/defaults.js @@ -3,5 +3,6 @@ export const PREFERENCES_DEFAULTS = { fixedToolbar: false, welcomeGuide: true, showBlockBreadcrumbs: true, + themeStyles: true, }, }; diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index fc661e9e950688..8cb54eb3aca8e2 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -50,7 +50,7 @@ body.widgets-php { } } -.blocks-widgets-container .editor-style-wrapper { +.blocks-widgets-container .editor-styles-wrapper { max-width: $widget-area-width; margin: auto; } diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss index 0d9a2164754207..bd4f505e8b6d91 100644 --- a/packages/widgets/src/blocks/legacy-widget/editor.scss +++ b/packages/widgets/src/blocks/legacy-widget/editor.scss @@ -95,3 +95,10 @@ min-height: 50px; } } + +.wp-block-legacy-widget { + .components-select-control__input { + padding: 0; + font-family: system-ui; + } +} diff --git a/packages/widgets/src/blocks/legacy-widget/index.php b/packages/widgets/src/blocks/legacy-widget/index.php index f8b64ab5c138ce..69277342a17b98 100644 --- a/packages/widgets/src/blocks/legacy-widget/index.php +++ b/packages/widgets/src/blocks/legacy-widget/index.php @@ -90,7 +90,6 @@ function handle_legacy_widget_preview_iframe() {