diff --git a/packages/block-editor/src/components/block-variation-picker/style.scss b/packages/block-editor/src/components/block-variation-picker/style.scss index 882e2748f6c92c..45b64e224d3425 100644 --- a/packages/block-editor/src/components/block-variation-picker/style.scss +++ b/packages/block-editor/src/components/block-variation-picker/style.scss @@ -17,6 +17,7 @@ } } + .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations { display: flex; justify-content: flex-start; @@ -34,13 +35,18 @@ width: 75px; text-align: center; - button { + button, + // Ideally not needed but this overrides the high specificity of the buttons in the canvas that can be affected by themes. + .editor-styles-wrapper & button.components-button.components-button { display: inline-flex; margin-right: 0; } } - .block-editor-block-variation-picker__variation { + + .block-editor-block-variation-picker__variation, + // Ideally not needed but this overrides the high specificity of the buttons in the canvas that can be affected by themes. + .editor-styles-wrapper & .block-editor-block-variation-picker__variation.components-button.components-button { padding: $grid-unit-10; } diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss index 80cccd7b9c9f38..cc768f407ae465 100644 --- a/packages/block-editor/src/components/button-block-appender/style.scss +++ b/packages/block-editor/src/components/button-block-appender/style.scss @@ -1,4 +1,6 @@ -.block-editor-button-block-appender { +.block-editor-button-block-appender, +// Ideally not needed but this overrides the high specificity of the buttons in the canvas that can be affected by themes. +.editor-styles-wrapper .block-editor-button-block-appender.components-button.components-button { display: flex; flex-direction: column; align-items: center; diff --git a/packages/block-library/src/freeform/editor.scss b/packages/block-library/src/freeform/editor.scss index 6dafe11198ea25..472ee3c03ec7bf 100644 --- a/packages/block-library/src/freeform/editor.scss +++ b/packages/block-library/src/freeform/editor.scss @@ -269,6 +269,14 @@ div[data-type="core/freeform"] { // mce global styles: the toolbars may get appended to .mce-toolbar-grp { + .mce-toolbar .mce-btn button { + all: revert; + border: none; + background: none; + padding: 2px 3px; + cursor: pointer; + } + // Not sure why this is necessary, there seems to be a skin file that // overrides this upstream. .mce-btn.mce-active button, diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 6f7b05130c71a7..5812f292a0d729 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -173,7 +173,9 @@ $color-control-label-height: 20px; } } -.wp-block-navigation .block-editor-button-block-appender { +.wp-block-navigation .block-editor-button-block-appender, +// Ideally not needed but this overrides the high specificity of the buttons in the canvas that can be affected by themes. +.editor-styles-wrapper .wp-block-navigation .block-editor-button-block-appender.components-button.components-button { justify-content: flex-start; } diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 4e8921754bea03..ee97a58d8f1fd6 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -1,21 +1,45 @@ +// These two first selectors shouldn't be needed ideally, +// but they are useful in case theme styles conflict with Button styles +// For example inside the image block placeholder. +.editor-styles-wrapper input.components-button.components-button, +.editor-styles-wrapper button.components-button.components-button, .components-button { + align-items: center; + background: none; + border: 0; + border-radius: $radius-block-ui; + box-sizing: border-box; + box-shadow: revert; + color: $gray-900; + cursor: pointer; display: inline-flex; - text-decoration: none; - font-weight: normal; + font-family: $default-font; font-size: $default-font-size; + font-style: normal; + font-weight: normal; + height: $button-size; + letter-spacing: normal; + line-height: normal; + min-height: revert; + min-width: revert; margin: 0; - border: 0; - cursor: pointer; - -webkit-appearance: none; - background: none; + max-height: revert; + max-width: revert; + opacity: 1; + padding: 6px 12px; + stroke: revert; + text-align: revert; + text-decoration: none; + text-indent: 0; + text-shadow: revert; + text-transform: revert; transition: box-shadow 0.1s linear; @include reduce-motion("transition"); - height: $button-size; - align-items: center; - box-sizing: border-box; - padding: 6px 12px; - border-radius: $radius-block-ui; - color: $gray-900; + vertical-align: revert; + width: revert; + -webkit-appearance: none; + word-break: revert; + word-spacing: revert; &[aria-expanded="true"], &:hover { diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss index 353a432dda6639..8cd5a4de997fd5 100644 --- a/packages/components/src/circular-option-picker/style.scss +++ b/packages/components/src/circular-option-picker/style.scss @@ -55,7 +55,12 @@ $color-palette-circle-spacing: 12px; background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E'); } -.components-circular-option-picker__option { + +.components-circular-option-picker__option, +// This selector shouldn't be needed ideally, +// but because theme styles can conflict with Button styles +// the default button styles have higher specificity +.editor-styles-wrapper button.components-circular-option-picker__option.components-button.components-button { display: inline-block; vertical-align: top; height: 100%; diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 68022377dcc582..b0835e1a7357e9 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -96,7 +96,11 @@ width: 50%; } -.components-placeholder__fieldset .components-button { +.components-placeholder__fieldset button.components-button, +// This selector shouldn't be needed ideally, +// but they are useful in case theme styles conflict with Button styles +// For example inside the image block placeholder. +.editor-styles-wrapper .components-placeholder__fieldset button.components-button { margin-right: $grid-unit-15; margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between. diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 6894839d78b0b5..c53b136d672136 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -1,20 +1,5 @@ .edit-post-visual-editor { position: relative; - - // The button element easily inherits styles that are meant for the editor style. - // These rules enhance the specificity to reduce that inheritance. - // This is duplicated in edit-site. - & .components-button { - font-family: $default-font; - font-size: $default-font-size; - padding: 6px 12px; - - &.is-tertiary, - &.has-icon { - padding: 6px; - } - } - flex: 1 1 auto; // In IE11 flex-basis: 100% cause a bug where the metaboxes area overlap with the content area.