diff --git a/lib/client-assets.php b/lib/client-assets.php index e9716a2a54771..2bb1f95217742 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -251,6 +251,15 @@ function gutenberg_register_packages_styles( $styles ) { // else (for development or test) default to use the current time. $version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time(); + gutenberg_override_style( + $styles, + 'wp-block-editor-content', + gutenberg_url( 'build/block-editor/content.css' ), + array(), + $version + ); + $styles->add_data( 'wp-block-editor-content', 'rtl', 'replace' ); + // Editor Styles. gutenberg_override_style( $styles, @@ -315,6 +324,9 @@ function gutenberg_register_packages_styles( $styles ) { 'wp-reset-editor-styles', 'wp-block-library', 'wp-reusable-blocks', + // Until #37466, we can't specifically add them as editor styles yet, + // so we must hard-code it here as a dependency. + 'wp-block-editor-content', ); // Only load the default layout and margin styles for themes without theme.json file. diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php index 9d67cbd3ef1ad..84681b3151238 100644 --- a/lib/compat/wordpress-6.2/script-loader.php +++ b/lib/compat/wordpress-6.2/script-loader.php @@ -63,3 +63,80 @@ static function () use ( $style ) { $priority ); } + +/** + * Sets the content assets for the block editor. + * + * Note for core merge: see inline comment on what's been updated. + */ +function gutenberg_resolve_assets_override() { + global $pagenow; + + $script_handles = array(); + // Note for core merge: only 'wp-edit-blocks' should be in this array. + $style_handles = array( + 'wp-edit-blocks', + ); + + if ( current_theme_supports( 'wp-block-styles' ) ) { + $style_handles[] = 'wp-block-library-theme'; + } + + if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) { + $style_handles[] = 'wp-widgets'; + $style_handles[] = 'wp-edit-widgets'; + } + + $block_registry = WP_Block_Type_Registry::get_instance(); + + foreach ( $block_registry->get_all_registered() as $block_type ) { + $style_handles = array_merge( + $style_handles, + $block_type->style_handles, + $block_type->editor_style_handles + ); + + $script_handles = array_merge( + $script_handles, + $block_type->script_handles + ); + } + + $style_handles = array_unique( $style_handles ); + $done = wp_styles()->done; + + ob_start(); + + // We do not need reset styles for the iframed editor. + wp_styles()->done = array( 'wp-reset-editor-styles' ); + wp_styles()->do_items( $style_handles ); + wp_styles()->done = $done; + + $styles = ob_get_clean(); + + $script_handles = array_unique( $script_handles ); + $done = wp_scripts()->done; + + ob_start(); + + wp_scripts()->done = array(); + wp_scripts()->do_items( $script_handles ); + wp_scripts()->done = $done; + + $scripts = ob_get_clean(); + + return array( + 'styles' => $styles, + 'scripts' => $scripts, + ); +} + +add_filter( + 'block_editor_settings_all', + function( $settings ) { + // We must override what core is passing now. + $settings['__unstableResolvedAssets'] = gutenberg_resolve_assets_override(); + return $settings; + }, + 100 +); diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/content.scss similarity index 100% rename from packages/block-editor/src/components/block-content-overlay/style.scss rename to packages/block-editor/src/components/block-content-overlay/content.scss diff --git a/packages/block-editor/src/components/block-draggable/content.scss b/packages/block-editor/src/components/block-draggable/content.scss new file mode 100644 index 0000000000000..46bd879806d78 --- /dev/null +++ b/packages/block-editor/src/components/block-draggable/content.scss @@ -0,0 +1,20 @@ +// 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; + } +} diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss index 03ecec53945ba..9f6197efbe0c8 100644 --- a/packages/block-editor/src/components/block-draggable/style.scss +++ b/packages/block-editor/src/components/block-draggable/style.scss @@ -44,24 +44,3 @@ font-size: $default-font-size; } } - -// 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; - } -} diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/content.scss similarity index 100% rename from packages/block-editor/src/components/block-list-appender/style.scss rename to packages/block-editor/src/components/block-list-appender/content.scss diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/content.scss similarity index 100% rename from packages/block-editor/src/components/block-list/style.scss rename to packages/block-editor/src/components/block-list/content.scss diff --git a/packages/block-editor/src/components/block-preview/content.scss b/packages/block-editor/src/components/block-preview/content.scss new file mode 100644 index 0000000000000..30d2d14e8aaf8 --- /dev/null +++ b/packages/block-editor/src/components/block-preview/content.scss @@ -0,0 +1,4 @@ +// Hide inserter from previews. +.block-editor-block-preview__content-iframe .block-list-appender { + display: none; +} diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss index 54dad77698d94..43a5cf49926f0 100644 --- a/packages/block-editor/src/components/block-preview/style.scss +++ b/packages/block-editor/src/components/block-preview/style.scss @@ -35,11 +35,6 @@ } } -// Hide inserter from previews. -.block-editor-block-preview__content-iframe .block-list-appender { - display: none; -} - .block-editor-block-preview__live-content { * { pointer-events: none; diff --git a/packages/block-editor/src/components/default-block-appender/style.scss b/packages/block-editor/src/components/default-block-appender/content.scss similarity index 100% rename from packages/block-editor/src/components/default-block-appender/style.scss rename to packages/block-editor/src/components/default-block-appender/content.scss diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/content.scss similarity index 100% rename from packages/block-editor/src/components/inner-blocks/style.scss rename to packages/block-editor/src/components/inner-blocks/content.scss diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/content.scss similarity index 100% rename from packages/block-editor/src/components/media-placeholder/style.scss rename to packages/block-editor/src/components/media-placeholder/content.scss diff --git a/packages/block-editor/src/components/plain-text/style.scss b/packages/block-editor/src/components/plain-text/content.scss similarity index 100% rename from packages/block-editor/src/components/plain-text/style.scss rename to packages/block-editor/src/components/plain-text/content.scss diff --git a/packages/block-editor/src/components/rich-text/content.scss b/packages/block-editor/src/components/rich-text/content.scss new file mode 100644 index 0000000000000..6f6d88c777ea7 --- /dev/null +++ b/packages/block-editor/src/components/rich-text/content.scss @@ -0,0 +1,42 @@ +.rich-text { + [data-rich-text-placeholder] { + pointer-events: none; + } + + [data-rich-text-placeholder]::after { + content: attr(data-rich-text-placeholder); + // Use opacity to work in various editor styles. + // We don't specify the color here, because blocks or editor styles might provide their own. + opacity: 0.62; + } + + &:focus { + // Removes outline added by the browser. + outline: none; + + [data-rich-text-format-boundary] { + border-radius: 2px; + } + } +} + +.block-editor-rich-text__editable { + > p:first-child { + margin-top: 0; + } +} + +// Captions may have lighter (gray) text, or be shown on a range of different background luminosites. +// To ensure legibility, we increase the default placeholder opacity to ensure contrast. +figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before { + opacity: 0.8; +} + +[data-rich-text-script] { + display: inline; + + &::before { + content: ""; + background: rgb(255, 255, 0); + } +} diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss index 03bb7dd607a53..a3bb78b2521db 100644 --- a/packages/block-editor/src/components/rich-text/style.scss +++ b/packages/block-editor/src/components/rich-text/style.scss @@ -1,37 +1,3 @@ -.rich-text { - [data-rich-text-placeholder] { - pointer-events: none; - } - - [data-rich-text-placeholder]::after { - content: attr(data-rich-text-placeholder); - // Use opacity to work in various editor styles. - // We don't specify the color here, because blocks or editor styles might provide their own. - opacity: 0.62; - } - - &:focus { - // Removes outline added by the browser. - outline: none; - - [data-rich-text-format-boundary] { - border-radius: 2px; - } - } -} - -.block-editor-rich-text__editable { - > p:first-child { - margin-top: 0; - } -} - -// Captions may have lighter (gray) text, or be shown on a range of different background luminosites. -// To ensure legibility, we increase the default placeholder opacity to ensure contrast. -figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before { - opacity: 0.8; -} - .components-popover.block-editor-rich-text__inline-format-toolbar { // Set z-index as if it's displayed on the bottom, otherwise the block // switcher popover might overlap if displayed on the bottom. @@ -80,12 +46,3 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before } } } - -[data-rich-text-script] { - display: inline; - - &::before { - content: ""; - background: rgb(255, 255, 0); - } -} diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss new file mode 100644 index 0000000000000..7dcb9083e1d33 --- /dev/null +++ b/packages/block-editor/src/content.scss @@ -0,0 +1,10 @@ +@import "./components/block-list/content.scss"; +@import "./components/block-list-appender/content.scss"; +@import "./components/block-content-overlay/content.scss"; +@import "./components/block-draggable/content.scss"; +@import "./components/block-preview/content.scss"; +@import "./components/default-block-appender/content.scss"; +@import "./components/inner-blocks/content.scss"; +@import "./components/media-placeholder/content.scss"; +@import "./components/plain-text/content.scss"; +@import "./components/rich-text/content.scss"; diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 6db197a389d21..8237e715e2cc3 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -2,15 +2,11 @@ @import "./components/block-alignment-control/style.scss"; @import "./components/block-icon/style.scss"; @import "./components/block-inspector/style.scss"; -@import "./components/block-list/style.scss"; @import "./components/block-tools/style.scss"; -@import "./components/block-list-appender/style.scss"; @import "./components/block-lock/style.scss"; @import "./components/block-breadcrumb/style.scss"; @import "./components/block-card/style.scss"; @import "./components/block-compare/style.scss"; -@import "./components/block-content-overlay/style.scss"; -@import "./components/block-draggable/style.scss"; @import "./components/block-mover/style.scss"; @import "./components/block-navigation/style.scss"; @import "./components/block-parent-selector/style.scss"; @@ -28,22 +24,18 @@ @import "./components/button-block-appender/style.scss"; @import "./components/colors-gradients/style.scss"; @import "./components/contrast-checker/style.scss"; -@import "./components/default-block-appender/style.scss"; @import "./components/date-format-picker/style.scss"; @import "./components/duotone-control/style.scss"; @import "./components/font-appearance-control/style.scss"; @import "./components/height-control/style.scss"; @import "./components/image-size-control/style.scss"; -@import "./components/inner-blocks/style.scss"; @import "./components/inserter-list-item/style.scss"; @import "./components/inspector-popover-header/style.scss"; @import "./components/justify-content-control/style.scss"; @import "./components/link-control/style.scss"; @import "./components/list-view/style.scss"; @import "./components/media-replace-flow/style.scss"; -@import "./components/media-placeholder/style.scss"; @import "./components/multi-selection-inspector/style.scss"; -@import "./components/plain-text/style.scss"; @import "./components/responsive-block-control/style.scss"; @import "./components/rich-text/style.scss"; @import "./components/skip-to-selected-block/style.scss"; diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json index 8d850ef1c30ba..f472fd0f4760a 100644 --- a/packages/block-library/src/block/block.json +++ b/packages/block-library/src/block/block.json @@ -15,6 +15,5 @@ "customClassName": false, "html": false, "inserter": false - }, - "editorStyle": "wp-block-editor" + } }