From 1c01f3cbde49adbc2cf1f2fec27637baa2b50e5d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 21 Jun 2021 13:33:39 +1000 Subject: [PATCH] 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() {