From 64b005d8a1a6290bbb544f950e3644f6e89aa419 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 1 Aug 2019 11:19:15 +0200
Subject: [PATCH 1/3] Use a specific CSS class for the CSS reset mixin.
---
packages/components/src/modal/index.js | 2 +-
packages/components/src/popover/index.js | 2 +-
.../src/popover/test/__snapshots__/index.js.snap | 4 ++--
packages/edit-post/src/components/sidebar/index.js | 2 +-
.../edit-post/src/components/visual-editor/index.js | 2 +-
packages/edit-post/src/style.scss | 5 ++---
.../editor/src/components/post-publish-panel/index.js | 2 +-
.../test/__snapshots__/index.js.snap | 10 +++++-----
8 files changed, 14 insertions(+), 15 deletions(-)
diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js
index ff35faf9222f99..41fe77ce436549 100644
--- a/packages/components/src/modal/index.js
+++ b/packages/components/src/modal/index.js
@@ -132,7 +132,7 @@ class Modal extends Component {
>
<ModalFrame
className={ classnames(
- 'components-modal__frame',
+ 'components-modal__frame block-editor-styles-reset',
className
) }
onRequestClose={ onRequestClose }
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index c303b1c75acb07..34eb45945da8fe 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -321,7 +321,7 @@ const Popover = ( {
const animateXAxis = xAxisMapping[ popoverPosition.xAxis ] || 'center';
const classes = classnames(
- 'components-popover',
+ 'components-popover block-editor-styles-reset',
className,
'is-' + popoverPosition.yAxis,
'is-' + popoverPosition.xAxis,
diff --git a/packages/components/src/popover/test/__snapshots__/index.js.snap b/packages/components/src/popover/test/__snapshots__/index.js.snap
index 9813681b30734e..8484a5a41d29d0 100644
--- a/packages/components/src/popover/test/__snapshots__/index.js.snap
+++ b/packages/components/src/popover/test/__snapshots__/index.js.snap
@@ -7,7 +7,7 @@ exports[`Popover should pass additional props to portaled element 1`] = `
>
<div>
<div
- class="components-popover is-bottom is-center components-animate__appear is-from-top"
+ class="components-popover block-editor-styles-reset is-bottom is-center components-animate__appear is-from-top"
role="tooltip"
style=""
>
@@ -30,7 +30,7 @@ exports[`Popover should render content 1`] = `
>
<div>
<div
- class="components-popover is-bottom is-center components-animate__appear is-from-top"
+ class="components-popover block-editor-styles-reset is-bottom is-center components-animate__appear is-from-top"
style=""
>
<div
diff --git a/packages/edit-post/src/components/sidebar/index.js b/packages/edit-post/src/components/sidebar/index.js
index 21559c2eea2553..8adf611c9d7146 100644
--- a/packages/edit-post/src/components/sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/index.js
@@ -20,7 +20,7 @@ const { Fill, Slot } = createSlotFill( 'Sidebar' );
function Sidebar( { children, label, className } ) {
return (
<div
- className={ classnames( 'edit-post-sidebar', className ) }
+ className={ classnames( 'edit-post-sidebar block-editor-styles-reset', className ) }
role="region"
aria-label={ label }
tabIndex="-1"
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 8287f5c27396d5..17efb4b92f464e 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -24,7 +24,7 @@ import PluginBlockSettingsMenuGroup from '../block-settings-menu/plugin-block-se
function VisualEditor() {
return (
- <BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper">
+ <BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper block-editor-styles-reset">
<VisualEditorGlobalKeyboardShortcuts />
<MultiSelectScrollIntoView />
<WritingFlow>
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index be47d4c70dc96d..1280594565bf9c 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -61,9 +61,8 @@ body.block-editor-page {
@include wp-admin-reset( ".block-editor" );
}
-.block-editor,
-// The modals are shown outside the .block-editor wrapper, they need these styles
-.components-modal__frame {
+// Target the editor UI but exclude the metaboxes and custom fields areas.
+.block-editor-styles-reset {
@include reset;
}
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index 9f5e0e6814e178..37faa4c776eddd 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -66,7 +66,7 @@ export class PostPublishPanel extends Component {
const isPrePublish = ! isPublishedOrScheduled && ! isSaving;
const isPostPublish = isPublishedOrScheduled && ! isSaving;
return (
- <div className="editor-post-publish-panel" { ...propsForPanel }>
+ <div className="editor-post-publish-panel block-editor-styles-reset" { ...propsForPanel }>
<div className="editor-post-publish-panel__header">
{ isPostPublish ? (
<div className="editor-post-publish-panel__header-published">
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 752b03174a55f1..0226956d04cde7 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -2,7 +2,7 @@
exports[`PostPublishPanel should render the post-publish panel if the post is published 1`] = `
<div
- className="editor-post-publish-panel"
+ className="editor-post-publish-panel block-editor-styles-reset"
>
<div
className="editor-post-publish-panel__header"
@@ -37,7 +37,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
exports[`PostPublishPanel should render the post-publish panel if the post is scheduled 1`] = `
<div
- className="editor-post-publish-panel"
+ className="editor-post-publish-panel block-editor-styles-reset"
>
<div
className="editor-post-publish-panel__header"
@@ -72,7 +72,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
exports[`PostPublishPanel should render the pre-publish panel if post status is scheduled but date is before now 1`] = `
<div
- className="editor-post-publish-panel"
+ className="editor-post-publish-panel block-editor-styles-reset"
>
<div
className="editor-post-publish-panel__header"
@@ -111,7 +111,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
exports[`PostPublishPanel should render the pre-publish panel if the post is not saving, published or scheduled 1`] = `
<div
- className="editor-post-publish-panel"
+ className="editor-post-publish-panel block-editor-styles-reset"
>
<div
className="editor-post-publish-panel__header"
@@ -150,7 +150,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
exports[`PostPublishPanel should render the spinner if the post is being saved 1`] = `
<div
- className="editor-post-publish-panel"
+ className="editor-post-publish-panel block-editor-styles-reset"
>
<div
className="editor-post-publish-panel__header"
From 229bca387db5456b18c48d083e76c273bfa905ce Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 1 Aug 2019 15:47:26 +0200
Subject: [PATCH 2/3] List selectors individually instead.
---
packages/components/src/modal/index.js | 2 +-
packages/components/src/popover/index.js | 2 +-
.../src/popover/test/__snapshots__/index.js.snap | 4 ++--
packages/edit-post/src/components/sidebar/index.js | 2 +-
.../edit-post/src/components/visual-editor/index.js | 2 +-
packages/edit-post/src/style.scss | 8 ++++++--
.../editor/src/components/post-publish-panel/index.js | 2 +-
.../test/__snapshots__/index.js.snap | 10 +++++-----
8 files changed, 18 insertions(+), 14 deletions(-)
diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js
index 41fe77ce436549..ff35faf9222f99 100644
--- a/packages/components/src/modal/index.js
+++ b/packages/components/src/modal/index.js
@@ -132,7 +132,7 @@ class Modal extends Component {
>
<ModalFrame
className={ classnames(
- 'components-modal__frame block-editor-styles-reset',
+ 'components-modal__frame',
className
) }
onRequestClose={ onRequestClose }
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 34eb45945da8fe..c303b1c75acb07 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -321,7 +321,7 @@ const Popover = ( {
const animateXAxis = xAxisMapping[ popoverPosition.xAxis ] || 'center';
const classes = classnames(
- 'components-popover block-editor-styles-reset',
+ 'components-popover',
className,
'is-' + popoverPosition.yAxis,
'is-' + popoverPosition.xAxis,
diff --git a/packages/components/src/popover/test/__snapshots__/index.js.snap b/packages/components/src/popover/test/__snapshots__/index.js.snap
index 8484a5a41d29d0..9813681b30734e 100644
--- a/packages/components/src/popover/test/__snapshots__/index.js.snap
+++ b/packages/components/src/popover/test/__snapshots__/index.js.snap
@@ -7,7 +7,7 @@ exports[`Popover should pass additional props to portaled element 1`] = `
>
<div>
<div
- class="components-popover block-editor-styles-reset is-bottom is-center components-animate__appear is-from-top"
+ class="components-popover is-bottom is-center components-animate__appear is-from-top"
role="tooltip"
style=""
>
@@ -30,7 +30,7 @@ exports[`Popover should render content 1`] = `
>
<div>
<div
- class="components-popover block-editor-styles-reset is-bottom is-center components-animate__appear is-from-top"
+ class="components-popover is-bottom is-center components-animate__appear is-from-top"
style=""
>
<div
diff --git a/packages/edit-post/src/components/sidebar/index.js b/packages/edit-post/src/components/sidebar/index.js
index 8adf611c9d7146..21559c2eea2553 100644
--- a/packages/edit-post/src/components/sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/index.js
@@ -20,7 +20,7 @@ const { Fill, Slot } = createSlotFill( 'Sidebar' );
function Sidebar( { children, label, className } ) {
return (
<div
- className={ classnames( 'edit-post-sidebar block-editor-styles-reset', className ) }
+ className={ classnames( 'edit-post-sidebar', className ) }
role="region"
aria-label={ label }
tabIndex="-1"
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 17efb4b92f464e..8287f5c27396d5 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -24,7 +24,7 @@ import PluginBlockSettingsMenuGroup from '../block-settings-menu/plugin-block-se
function VisualEditor() {
return (
- <BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper block-editor-styles-reset">
+ <BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper">
<VisualEditorGlobalKeyboardShortcuts />
<MultiSelectScrollIntoView />
<WritingFlow>
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 1280594565bf9c..c684f0c2efbec8 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -61,8 +61,12 @@ body.block-editor-page {
@include wp-admin-reset( ".block-editor" );
}
-// Target the editor UI but exclude the metaboxes and custom fields areas.
-.block-editor-styles-reset {
+// Target the editor UI excluding the metaboxes and custom fields areas.
+.editor-styles-wrapper,
+.edit-post-sidebar,
+.editor-post-publish-panel,
+.components-popover,
+.components-modal__frame {
@include reset;
}
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index 37faa4c776eddd..9f5e0e6814e178 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -66,7 +66,7 @@ export class PostPublishPanel extends Component {
const isPrePublish = ! isPublishedOrScheduled && ! isSaving;
const isPostPublish = isPublishedOrScheduled && ! isSaving;
return (
- <div className="editor-post-publish-panel block-editor-styles-reset" { ...propsForPanel }>
+ <div className="editor-post-publish-panel" { ...propsForPanel }>
<div className="editor-post-publish-panel__header">
{ isPostPublish ? (
<div className="editor-post-publish-panel__header-published">
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 0226956d04cde7..752b03174a55f1 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -2,7 +2,7 @@
exports[`PostPublishPanel should render the post-publish panel if the post is published 1`] = `
<div
- className="editor-post-publish-panel block-editor-styles-reset"
+ className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
@@ -37,7 +37,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
exports[`PostPublishPanel should render the post-publish panel if the post is scheduled 1`] = `
<div
- className="editor-post-publish-panel block-editor-styles-reset"
+ className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
@@ -72,7 +72,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
exports[`PostPublishPanel should render the pre-publish panel if post status is scheduled but date is before now 1`] = `
<div
- className="editor-post-publish-panel block-editor-styles-reset"
+ className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
@@ -111,7 +111,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
exports[`PostPublishPanel should render the pre-publish panel if the post is not saving, published or scheduled 1`] = `
<div
- className="editor-post-publish-panel block-editor-styles-reset"
+ className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
@@ -150,7 +150,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
exports[`PostPublishPanel should render the spinner if the post is being saved 1`] = `
<div
- className="editor-post-publish-panel block-editor-styles-reset"
+ className="editor-post-publish-panel"
>
<div
className="editor-post-publish-panel__header"
From 5a6c5b04d6b8642a99254714cda6ef532f91cbc1 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 1 Aug 2019 18:01:20 +0200
Subject: [PATCH 3/3] Add selectors for the missing UI parts.
---
assets/stylesheets/_mixins.scss | 7 ++-----
packages/edit-post/src/style.scss | 4 +++-
packages/editor/src/components/editor-notices/style.scss | 1 +
3 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
index ef15e92e46b81f..2acb8c7b74a933 100644
--- a/assets/stylesheets/_mixins.scss
+++ b/assets/stylesheets/_mixins.scss
@@ -394,11 +394,6 @@
box-sizing: inherit;
}
- select {
- font-size: $default-font-size;
- color: $dark-gray-500;
- }
-
.input-control, // Upstream name is `.regular-text`.
input[type="text"],
input[type="search"],
@@ -440,6 +435,8 @@
select {
padding: 2px;
+ font-size: $default-font-size;
+ color: $dark-gray-500;
&:focus {
border-color: $blue-medium-600;
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index c684f0c2efbec8..c281f957b1580b 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -62,7 +62,9 @@ body.block-editor-page {
}
// Target the editor UI excluding the metaboxes and custom fields areas.
-.editor-styles-wrapper,
+.edit-post-header,
+.edit-post-visual-editor,
+.edit-post-text-editor,
.edit-post-sidebar,
.editor-post-publish-panel,
.components-popover,
diff --git a/packages/editor/src/components/editor-notices/style.scss b/packages/editor/src/components/editor-notices/style.scss
index e3387e1e653311..4b6d26f226d1dd 100644
--- a/packages/editor/src/components/editor-notices/style.scss
+++ b/packages/editor/src/components/editor-notices/style.scss
@@ -22,6 +22,7 @@
.components-editor-notices__dismissible,
.components-editor-notices__pinned {
.components-notice {
+ box-sizing: border-box;
margin: 0 0 5px;
padding: 6px 12px;
min-height: $panel-header-height;