+
onClose() }
diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss
index eda394fd6a3d54..2744d36e74ca62 100644
--- a/packages/block-library/src/audio/theme.scss
+++ b/packages/block-library/src/audio/theme.scss
@@ -2,6 +2,6 @@
@include caption-style-theme();
}
-:where(.wp-block-audio) {
+.wp-block-audio {
margin: 0 0 1em 0;
}
diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss
deleted file mode 100644
index 318101f7f52dac..00000000000000
--- a/packages/block-library/src/block/editor.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.edit-post-visual-editor .block-library-block__reusable-block-container {
- // Unset the padding that root containers get when they're actually root containers.
- .is-root-container {
- padding-left: 0;
- padding-right: 0;
- }
-
- // Allow vertical paddings to collapse to better fit the flow.
- .block-editor-writing-flow {
- display: block;
- }
-
- .components-disabled .block-list-appender {
- display: none;
- }
-}
-
-.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable {
-
- &.is-highlighted::after,
- &.is-selected::after {
- outline-color: var(--wp-block-synced-color);
- }
-
- &.block-editor-block-list__block:not([contenteditable]):focus {
- &::after {
- outline-color: var(--wp-block-synced-color);
-
- // Show a light color for dark themes.
- .is-dark-theme & {
- outline-color: $dark-theme-focus;
- }
- }
- }
-}
diff --git a/packages/block-library/src/button/editor.scss b/packages/block-library/src/button/editor.scss
index c24021d17e38ec..8c879c7e3b7c9e 100644
--- a/packages/block-library/src/button/editor.scss
+++ b/packages/block-library/src/button/editor.scss
@@ -37,38 +37,3 @@ div[data-type="core/button"] {
text-decoration: inherit;
}
-.editor-styles-wrapper .wp-block-button .wp-block-button__link {
- // The following styles ensure a default border is applied when the user selects only a border color or style in the editor,
- // but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button.
- &:where(.has-border-color) {
- border-width: initial;
- }
- &:where([style*="border-top-color"]) {
- border-top-width: initial;
- }
- &:where([style*="border-right-color"]) {
- border-right-width: initial;
- }
- &:where([style*="border-bottom-color"]) {
- border-bottom-width: initial;
- }
- &:where([style*="border-left-color"]) {
- border-left-width: initial;
- }
-
- &:where([style*="border-style"]) {
- border-width: initial;
- }
- &:where([style*="border-top-style"]) {
- border-top-width: initial;
- }
- &:where([style*="border-right-style"]) {
- border-right-width: initial;
- }
- &:where([style*="border-bottom-style"]) {
- border-bottom-width: initial;
- }
- &:where([style*="border-left-style"]) {
- border-left-width: initial;
- }
-}
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index f441152107973f..42306cba0c984d 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -86,69 +86,37 @@ $blocks-block__margin: 0.5em;
}
}
-// the first selector is required for old buttons markup
+// The follow block style selectors are required for old buttons markup
+// and do not use the `:root :where()` format to match specificity at
+// the time they were deprecated.
.wp-block-button.is-style-squared,
.wp-block-button__link.wp-block-button.is-style-squared {
border-radius: 0;
}
-
-// the first selector is required for old buttons markup
.wp-block-button.no-border-radius,
.wp-block-button__link.no-border-radius {
border-radius: 0 !important;
}
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link,
-.wp-block-button .wp-block-button__link:where(.is-style-outline) {
- border: 2px solid currentColor;
- padding: 0.667em 1.333em;
-}
-
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-text-color),
-.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-text-color) {
- color: currentColor;
-}
-
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-background) {
- background-color: transparent;
- // background-image is required to overwrite a gradient background
- background-image: none;
-}
-
-.wp-block-button .wp-block-button__link {
- // The following styles ensure a default border is applied when the user
- // selects only a border color or style. This overcomes the zero border
- // width applied by core's theme.json via the elements API.
- &:where(.has-border-color) {
- border-width: initial;
- }
- &:where([style*="border-top-color"]) {
- border-top-width: initial;
- }
- &:where([style*="border-right-color"]) {
- border-right-width: initial;
- }
- &:where([style*="border-bottom-color"]) {
- border-bottom-width: initial;
- }
- &:where([style*="border-left-color"]) {
- border-left-width: initial;
+// Selectors here use the `:root :where()` format for maintaining compatibility
+// with global styles and nested block style variations.
+:root {
+ // Outline Block Style Variation.
+ :where(.wp-block-button.is-style-outline > .wp-block-button__link),
+ :where(.wp-block-button .wp-block-button__link.is-style-outline) {
+ border: 2px solid currentColor;
+ padding: 0.667em 1.333em;
}
- &:where([style*="border-style"]) {
- border-width: initial;
- }
- &:where([style*="border-top-style"]) {
- border-top-width: initial;
+ :where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)),
+ :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)) {
+ color: currentColor;
}
- &:where([style*="border-right-style"]) {
- border-right-width: initial;
- }
- &:where([style*="border-bottom-style"]) {
- border-bottom-width: initial;
- }
- &:where([style*="border-left-style"]) {
- border-left-width: initial;
+
+ :where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)),
+ :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)) {
+ background-color: transparent;
+ // background-image is required to overwrite a gradient background
+ background-image: none;
}
}
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 6aa10657ec6f2e..189d658e955c98 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -123,10 +123,3 @@
.color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
margin-top: $grid-unit-30;
}
-
-
-// The frontend style.scss includes a min-height as an IE11 fix.
-// This fix causes extra spacing for the focus style in the editor, so we omit it here.
-.wp-block-cover::after {
- min-height: auto;
-}
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index d14f606fc0226a..41b3acf1833fc0 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -1,11 +1,7 @@
-// Lowest specificity styles are used to ensure that the default styles for the cover block can be overridden by global styles.
-:where(.wp-block-cover-image, .wp-block-cover) {
- min-height: 430px;
- padding: 1em;
-}
-
.wp-block-cover-image,
.wp-block-cover {
+ min-height: 430px;
+ padding: 1em;
position: relative;
background-position: center center;
display: flex;
@@ -91,20 +87,6 @@
width: 100%;
}
- // Using flexbox without an assigned height property breaks vertical center alignment in IE11.
- // Appending an empty ::after element tricks IE11 into giving the cover image an implicit height, which sidesteps this issue.
- &::after {
- display: block;
- content: "";
- font-size: 0;
- min-height: inherit;
-
- // IE doesn't support flex so omit that.
- @supports (position: sticky) {
- content: none;
- }
- }
-
// Aligned cover blocks should not use our global alignment rules
&.aligncenter,
&.alignleft,
@@ -120,18 +102,6 @@
/*rtl:raw: direction: rtl; */
}
- p,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- &:where(:not(.has-text-color)) {
- color: inherit;
- }
- }
-
// Position: Top
&.is-position-top-left {
align-items: flex-start;
@@ -314,3 +284,15 @@ section.wp-block-cover-image > h2,
:where(.wp-block-cover-image.is-light:not(.has-text-color)) {
color: $black;
}
+
+:root {
+ :where(.wp-block-cover p:not(.has-text-color)),
+ :where(.wp-block-cover h1:not(.has-text-color)),
+ :where(.wp-block-cover h2:not(.has-text-color)),
+ :where(.wp-block-cover h3:not(.has-text-color)),
+ :where(.wp-block-cover h4:not(.has-text-color)),
+ :where(.wp-block-cover h5:not(.has-text-color)),
+ :where(.wp-block-cover h6:not(.has-text-color)) {
+ color: inherit;
+ }
+}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 0bca3e23028c50..c43137c632b73f 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -1,7 +1,6 @@
@import "./archives/editor.scss";
@import "./audio/editor.scss";
@import "./avatar/editor.scss";
-@import "./block/editor.scss";
@import "./button/editor.scss";
@import "./buttons/editor.scss";
@import "./categories/editor.scss";
diff --git a/packages/block-library/src/embed/theme.scss b/packages/block-library/src/embed/theme.scss
index 57ece1dcd43cac..e809a783b9c810 100644
--- a/packages/block-library/src/embed/theme.scss
+++ b/packages/block-library/src/embed/theme.scss
@@ -2,6 +2,6 @@
@include caption-style-theme();
}
-:where(.wp-block-embed) {
+.wp-block-embed {
margin: 0 0 1em 0;
}
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index ea6fa8836a3a4b..9efaf88e5acc71 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -1,4 +1,7 @@
-:where(figure.wp-block-gallery) {
+// Adding `figure` to the selector increases the specificity above the global
+// styles specificity, which is levelled at 0-1-0. We should figure out why
+// `figure` is needed.
+:root :where(figure.wp-block-gallery) {
// Override the default list style type _only in the editor_
// to avoid :not() selector specificity issues.
// See https://github.com/WordPress/gutenberg/pull/10358
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 2351f6aad6c46c..7fe05b2209c812 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -188,12 +188,12 @@ function block_core_image_render_lightbox( $block_content, $block ) {
// Image.
$p->next_tag( 'img' );
$p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
- $p->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
- $p->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
+ $p->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
+ $p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
// Sets an event callback on the `img` because the `figure` element can also
// contain a caption, and we don't want to trigger the lightbox when the
// caption is clicked.
- $p->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
+ $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
$body_content = $p->get_updated_html();
@@ -209,7 +209,7 @@ class="lightbox-trigger"
aria-haspopup="dialog"
aria-label="' . esc_attr( $aria_label ) . '"
data-wp-init="callbacks.initTriggerButton"
- data-wp-on--click="actions.showLightbox"
+ data-wp-on-async--click="actions.showLightbox"
data-wp-style--right="context.imageButtonRight"
data-wp-style--top="context.imageButtonTop"
>
@@ -258,12 +258,12 @@ class="wp-lightbox-overlay zoom"
data-wp-class--show-closing-animation="state.showClosingAnimation"
data-wp-watch="callbacks.setOverlayFocus"
data-wp-on--keydown="actions.handleKeydown"
- data-wp-on--touchstart="actions.handleTouchStart"
+ data-wp-on-async--touchstart="actions.handleTouchStart"
data-wp-on--touchmove="actions.handleTouchMove"
- data-wp-on--touchend="actions.handleTouchEnd"
- data-wp-on--click="actions.hideLightbox"
- data-wp-on-window--resize="callbacks.setOverlayStyles"
- data-wp-on-window--scroll="actions.handleScroll"
+ data-wp-on-async--touchend="actions.handleTouchEnd"
+ data-wp-on-async--click="actions.hideLightbox"
+ data-wp-on-async-window--resize="callbacks.setOverlayStyles"
+ data-wp-on-async-window--scroll="actions.handleScroll"
tabindex="-1"
>
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 75c8b839dca37c..40ffe0cd0e61c7 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -82,16 +82,10 @@
@include caption-style();
}
- // Variations
- &.is-style-rounded img,
- .is-style-rounded img {
- // We use an absolute pixel to prevent the oval shape that a value of 50% would give
- // to rectangular images. A pill-shape is better than otherwise.
- border-radius: 9999px;
- }
-
// The following variation is deprecated.
// The CSS is kept here for the time being, to support blocks using the old variation.
+ // The selector is not scoped with `:root :where()` like global styles are to keep its
+ // specificity the same as it was when it was deprecated.
&.is-style-circle-mask img {
// We use an absolute pixel to prevent the oval shape that a value of 50% would give
// to rectangular images. A pill-shape is better than otherwise.
@@ -108,42 +102,13 @@
border-radius: 0;
}
}
+}
- // The following is required to overcome WP Core applying styles that clear
- // img borders with a higher specificity than those added by the border
- // block support to provide a default border-style of solid when a border
- // color or width has been set.
- :where(.has-border-color) {
- border-style: solid;
- }
- :where([style*="border-top-color"]) {
- border-top-style: solid;
- }
- :where([style*="border-right-color"]) {
- border-right-style: solid;
- }
- :where([style*="border-bottom-color"]) {
- border-bottom-style: solid;
- }
- :where([style*="border-left-color"]) {
- border-left-style: solid;
- }
-
- :where([style*="border-width"]) {
- border-style: solid;
- }
- :where([style*="border-top-width"]) {
- border-top-style: solid;
- }
- :where([style*="border-right-width"]) {
- border-right-style: solid;
- }
- :where([style*="border-bottom-width"]) {
- border-bottom-style: solid;
- }
- :where([style*="border-left-width"]) {
- border-left-style: solid;
- }
+// Variations
+:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
+ // We use an absolute pixel to prevent the oval shape that a value of 50% would give
+ // to rectangular images. A pill-shape is better than otherwise.
+ border-radius: 9999px;
}
.wp-block-image figure {
diff --git a/packages/block-library/src/image/theme.scss b/packages/block-library/src/image/theme.scss
index 459036511335a6..c89dd3334dd09a 100644
--- a/packages/block-library/src/image/theme.scss
+++ b/packages/block-library/src/image/theme.scss
@@ -1,7 +1,7 @@
-.wp-block-image figcaption {
+:root :where(.wp-block-image figcaption) {
@include caption-style-theme();
}
-:where(.wp-block-image) {
+.wp-block-image {
margin: 0 0 1em 0;
}
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index 3c2d6a30f1c077..d3f0b5275653e3 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -1,9 +1,4 @@
.wp-block-latest-posts {
- padding-left: 2.5em;
- &.is-grid {
- padding-left: 0;
- }
-
// Apply overflow for post items, so any floated featured images won't crop the focus style.
> li {
overflow: hidden;
@@ -14,10 +9,6 @@
display: inline;
}
-.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
- margin-bottom: 20px;
-}
-
.editor-latest-posts-image-alignment-control {
.components-base-control__label {
display: block;
@@ -27,3 +18,13 @@
border-radius: $radius-block-ui;
}
}
+
+:root :where(.wp-block-latest-posts) {
+ padding-left: 2.5em;
+}
+:root {
+ :where(.wp-block-latest-posts.is-grid),
+ :where(.wp-block-latest-posts__list) {
+ padding-left: 0;
+ }
+}
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
index 5d3e360d0804a8..2a01d177ef47c4 100644
--- a/packages/block-library/src/latest-posts/style.scss
+++ b/packages/block-library/src/latest-posts/style.scss
@@ -12,7 +12,6 @@
}
&.wp-block-latest-posts__list {
list-style: none;
- padding-left: 0;
li {
clear: both;
@@ -23,7 +22,6 @@
&.is-grid {
display: flex;
flex-wrap: wrap;
- padding: 0;
li {
margin: 0 1.25em 1.25em 0;
@@ -34,9 +32,9 @@
@include break-small {
@for $i from 2 through 6 {
&.columns-#{ $i } li {
- width: calc((100% / #{ $i }) - 1.25em + (1.25em / #{ $i }));
+ width: calc((100% / #{$i}) - 1.25em + (1.25em / #{$i}));
- &:nth-child( #{ $i }n ) {
+ &:nth-child(#{ $i }n) {
margin-right: 0;
}
}
@@ -44,6 +42,15 @@
}
}
+:root {
+ :where(.wp-block-latest-posts.is-grid) {
+ padding: 0;
+ }
+ :where(.wp-block-latest-posts.wp-block-latest-posts__list) {
+ padding-left: 0;
+ }
+}
+
.wp-block-latest-posts__post-date,
.wp-block-latest-posts__post-author {
display: block;
diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss
index 7b985d8020c9fe..deb325849ebebf 100644
--- a/packages/block-library/src/pullquote/editor.scss
+++ b/packages/block-library/src/pullquote/editor.scss
@@ -1,4 +1,6 @@
// .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
.wp-block-pullquote.is-style-solid-color {
& blockquote p {
font-size: 32px;
diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
index 07f6366d47617f..b9e28b7cdcfaa6 100644
--- a/packages/block-library/src/pullquote/style.scss
+++ b/packages/block-library/src/pullquote/style.scss
@@ -2,6 +2,8 @@
text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
box-sizing: border-box;
+ margin: 0 0 1em 0;
+ padding: 4em 0;
p,
blockquote,
@@ -35,12 +37,6 @@
}
}
-// Lowest specificity to avoid overriding layout and global styles.
-:where(.wp-block-pullquote) {
- margin: 0 0 1em 0;
- padding: 4em 0;
-}
-
// Ensure that we are reasonably specific to override theme defaults.
.wp-block-pullquote.has-text-align-left blockquote {
text-align: left;
@@ -52,6 +48,8 @@
}
// .is-style-solid-color is deprecated.
+// This selector has not been scoped with `:root :where`, as global styles
+// does, to keep its specificity as it was at the time of deprecation.
.wp-block-pullquote.is-style-solid-color {
border: none;
blockquote {
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
index 0dc7943a770512..6b5e8401227f5b 100644
--- a/packages/block-library/src/pullquote/theme.scss
+++ b/packages/block-library/src/pullquote/theme.scss
@@ -1,11 +1,9 @@
-:where(.wp-block-pullquote) {
+.wp-block-pullquote {
border-top: 4px solid currentColor;
border-bottom: 4px solid currentColor;
margin-bottom: 1.75em;
color: currentColor;
-}
-.wp-block-pullquote {
cite,
footer,
&__citation {
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index aaf63b899771b0..5bcccbd60eefc4 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -1,4 +1,4 @@
-:where(.wp-block-quote) {
+.wp-block-quote {
border-left: 0.25em solid currentColor;
margin: 0 0 1.75em 0;
padding-left: 1em;
diff --git a/packages/block-library/src/separator/editor.scss b/packages/block-library/src/separator/editor.scss
index 220c6bd9d80e38..24e940684279e8 100644
--- a/packages/block-library/src/separator/editor.scss
+++ b/packages/block-library/src/separator/editor.scss
@@ -2,11 +2,4 @@
// Prevent margin collapsing so the area to select the separator is bigger.
padding-top: 0.1px;
padding-bottom: 0.1px;
-
- // This is also set in style.scss, but needs a higher specificity in editor
- // due to the way that color block supports adds additional background color styles.
- &.wp-block-separator.is-style-dots {
- background: none !important;
- border: none;
- }
}
diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss
index d40dd2f05844ed..65e463bc513f48 100644
--- a/packages/block-library/src/separator/style.scss
+++ b/packages/block-library/src/separator/style.scss
@@ -1,28 +1,4 @@
.wp-block-separator {
- // Dots style
- &.is-style-dots {
- // Override any background themes often set on the hr tag for this style.
- // also override the color set in the editor since it's intented for normal HR
- background: none !important;
- border: none;
- text-align: center;
- line-height: 1;
- height: auto;
-
- &::before {
- content: "\00b7 \00b7 \00b7";
- color: currentColor;
- font-size: 1.5em;
- letter-spacing: 2em;
- /*rtl:ignore*/
- padding-left: 2em;
- font-family: serif;
- }
- }
-}
-
-// Lowest specificity to avoid overriding global styles.
-:where(.wp-block-separator) {
border-top: 2px solid currentColor;
// Default, thin style, is stored in theme.scss so it can be opted out of
@@ -31,3 +7,31 @@
border-right: none;
border-bottom: none;
}
+
+// Dots block style variation
+:root :where(.wp-block-separator.is-style-dots) {
+ text-align: center;
+ line-height: 1;
+ height: auto;
+
+ &::before {
+ content: "\00b7 \00b7 \00b7";
+ color: currentColor;
+ font-size: 1.5em;
+ letter-spacing: 2em;
+ /*rtl:ignore*/
+ padding-left: 2em;
+ font-family: serif;
+ }
+}
+
+// The following overrides should be enforced regardless of global styles.
+// The dots block style uses a pseudo element to render the dots. Background
+// color and borders would break this aesthetic.
+.wp-block-separator.is-style-dots {
+ // Override any background themes often set on the hr tag for this style.
+ // also override the color set in the editor since it's intended for normal HR
+ background: none !important;
+ // Important required to ensure dots does not get a border.
+ border: none !important;
+}
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index ca9c92539b6760..020b7aab5370b3 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -31,11 +31,11 @@
margin-right: auto;
text-align: center;
}
+}
- // Style variations
- &.is-style-rounded {
- // We use an absolute pixel to prevent the oval shape that a value of 50% would give
- // to rectangular images. A pill-shape is better than otherwise.
- border-radius: 9999px;
- }
+// Style variations
+:root :where(.wp-block-site-logo.is-style-rounded) {
+ // We use an absolute pixel to prevent the oval shape that a value of 50% would give
+ // to rectangular images. A pill-shape is better than otherwise.
+ border-radius: 9999px;
}
diff --git a/packages/block-library/src/site-title/editor.scss b/packages/block-library/src/site-title/editor.scss
index 173e4570929a51..ce83659170ff6f 100644
--- a/packages/block-library/src/site-title/editor.scss
+++ b/packages/block-library/src/site-title/editor.scss
@@ -3,8 +3,6 @@
border: 1px dashed;
}
-.editor-styles-wrapper .wp-block-site-title {
- a {
- color: inherit;
- }
+.editor-styles-wrapper :where(.wp-block-site-title a) {
+ color: inherit;
}
diff --git a/packages/block-library/src/site-title/style.scss b/packages/block-library/src/site-title/style.scss
index afc6f449f4025b..337c82f79ad354 100644
--- a/packages/block-library/src/site-title/style.scss
+++ b/packages/block-library/src/site-title/style.scss
@@ -1,5 +1,3 @@
-.wp-block-site-title {
- a {
- color: inherit;
- }
+:root :where(.wp-block-site-title a) {
+ color: inherit;
}
diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
index 73211958b48c15..bd93ad9f055fcd 100644
--- a/packages/block-library/src/social-link/editor.scss
+++ b/packages/block-library/src/social-link/editor.scss
@@ -31,11 +31,11 @@
}
}
-.wp-block-social-links.is-style-pill-shape .wp-social-link button {
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link button) {
padding-left: calc((2/3) * 1em);
padding-right: calc((2/3) * 1em);
}
-.wp-block-social-links.is-style-logos-only .wp-social-link button {
+:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
padding: 0;
}
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index b729949c837d80..6f07ea209ecbea 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -11,9 +11,19 @@
transform: none;
}
-.editor-styles-wrapper .wp-block-social-links {
+// Specificity for the following styles are fixed at 0-1-0 to match and be
+// overridable by global styles.
+:root :where(.wp-block-social-links),
+:root :where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) {
padding: 0;
}
+:root :where(.wp-block-social-links__social-placeholder .wp-social-link) {
+ padding: 0.25em;
+}
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link) {
+ padding-left: calc((2/3) * 1em);
+ padding-right: calc((2/3) * 1em);
+}
// Placeholder/setup state.
.wp-block-social-links__social-placeholder {
@@ -37,19 +47,6 @@
display: flex;
}
- .wp-social-link {
- padding: 0.25em;
-
- .is-style-pill-shape & {
- padding-left: calc((2/3) * 1em);
- padding-right: calc((2/3) * 1em);
- }
-
- .is-style-logos-only & {
- padding: 0;
- }
- }
-
.wp-social-link::before {
content: "";
display: block;
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 1ad883bbb88840..f04c11ea07acd3 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -21,12 +21,6 @@
}
.wp-social-link {
- // By setting the font size, we can scale icons and paddings consistently based on that.
- // This also allows themes to override this, if need be.
- a {
- padding: 0.25em;
- }
-
svg {
width: 1em;
height: 1em;
@@ -119,14 +113,13 @@
}
// Treatment for logos only style.
+// The specificity for this selector has not been reduced to 0-1-0 as per
+// global styles variation selectors as the lack of background should be
+// enforced for this block style.
.wp-block-social-links.is-style-logos-only {
.wp-social-link {
background: none;
- a {
- padding: 0;
- }
-
// Make these bigger.
svg {
width: 1.25em;
@@ -142,11 +135,19 @@
.wp-social-link {
width: auto;
}
+}
- .wp-social-link a {
- padding-left: calc((2/3) * 1em);
- padding-right: calc((2/3) * 1em);
- }
+// The following rules have their selector specificity set to 0-1-0 to
+// facilitate theme.json styling of the inner social-link block padding.
+:root :where(.wp-block-social-links .wp-social-link a) {
+ padding: 0.25em;
+}
+:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a) {
+ padding: 0;
+}
+:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a) {
+ padding-left: calc((2/3) * 1em);
+ padding-right: calc((2/3) * 1em);
}
// Ensure the Snapchat label is visible when no custom
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
index 4f4271650f50e1..69cd2666e13e20 100644
--- a/packages/block-library/src/table/style.scss
+++ b/packages/block-library/src/table/style.scss
@@ -71,6 +71,9 @@
}
// "Stripes" style variation.
+ // This block style selector does not have 0-1-0 specificity, as per those
+ // generated via global styles, to maintain current styling. Global styles
+ // support for table borders also only applies to the outer `table` element.
&.is-style-stripes {
border-spacing: 0;
border-collapse: inherit;
diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
index 19dc71c8857bd7..d42e79b02b4965 100644
--- a/packages/block-library/src/table/theme.scss
+++ b/packages/block-library/src/table/theme.scss
@@ -1,4 +1,6 @@
.wp-block-table {
+ margin: 0 0 1em 0;
+
td,
th {
word-break: normal;
@@ -8,7 +10,3 @@
@include caption-style-theme();
}
}
-
-:where(.wp-block-table) {
- margin: 0 0 1em 0;
-}
diff --git a/packages/block-library/src/tag-cloud/style.scss b/packages/block-library/src/tag-cloud/style.scss
index 5fb04840de1517..dedb5e73ab1a1f 100644
--- a/packages/block-library/src/tag-cloud/style.scss
+++ b/packages/block-library/src/tag-cloud/style.scss
@@ -22,18 +22,20 @@
margin-left: 5px;
text-decoration: none;
}
+}
- &.is-style-outline {
- display: flex;
- flex-wrap: wrap;
- gap: 1ch;
-
- a {
- border: 1px solid currentColor;
- font-size: unset !important; // !important Needed to override the inline styles.
- margin-right: 0;
- padding: 1ch 2ch;
- text-decoration: none !important; // !important needed to override generic post content link decoration.
- }
- }
+// Specificity is set to 0-1-0 to match global styles selectors.
+:root :where(.wp-block-tag-cloud.is-style-outline) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1ch;
+}
+// The block support related styles below haven't been replicated in the base theme.json
+// as the block doesn't yet adopt them for its inner links.
+:root :where(.wp-block-tag-cloud.is-style-outline a) {
+ border: 1px solid currentColor;
+ font-size: unset !important; // !important Needed to override the inline styles.
+ margin-right: 0;
+ padding: 1ch 2ch;
+ text-decoration: none !important; // !important needed to override generic post content link decoration.
}
diff --git a/packages/block-library/src/template-part/theme.scss b/packages/block-library/src/template-part/theme.scss
index 2f1d3a0a513cb7..179873b9448b82 100644
--- a/packages/block-library/src/template-part/theme.scss
+++ b/packages/block-library/src/template-part/theme.scss
@@ -1,9 +1,7 @@
// Same as the group block styles.
-:where(.wp-block-template-part) {
- &.has-background {
- // Matches paragraph Block padding
- padding: $block-bg-padding--v $block-bg-padding--h;
- margin-top: 0;
- margin-bottom: 0;
- }
+:root :where(.wp-block-template-part.has-background) {
+ // Matches paragraph Block padding
+ padding: $block-bg-padding--v $block-bg-padding--h;
+ margin-top: 0;
+ margin-bottom: 0;
}
diff --git a/packages/block-library/src/utils/hooks.js b/packages/block-library/src/utils/hooks.js
index 85196fe67ed7ac..418b0dbebb0c02 100644
--- a/packages/block-library/src/utils/hooks.js
+++ b/packages/block-library/src/utils/hooks.js
@@ -33,6 +33,7 @@ export function useCanEditEntity( kind, name, recordId ) {
*/
export function useUploadMediaFromBlobURL( args = {} ) {
const latestArgs = useRef( args );
+ const hasUploadStarted = useRef( false );
const { getSettings } = useSelect( blockEditorStore );
useLayoutEffect( () => {
@@ -40,6 +41,12 @@ export function useUploadMediaFromBlobURL( args = {} ) {
} );
useEffect( () => {
+ // Uploading is a special effect that can't be canceled via the cleanup method.
+ // The extra check avoids duplicate uploads in development mode (React.StrictMode).
+ if ( hasUploadStarted.current ) {
+ return;
+ }
+
if (
! latestArgs.current.url ||
! isBlobURL( latestArgs.current.url )
@@ -55,6 +62,8 @@ export function useUploadMediaFromBlobURL( args = {} ) {
const { url, allowedTypes, onChange, onError } = latestArgs.current;
const { mediaUpload } = getSettings();
+ hasUploadStarted.current = true;
+
mediaUpload( {
filesList: [ file ],
allowedTypes,
@@ -65,10 +74,12 @@ export function useUploadMediaFromBlobURL( args = {} ) {
revokeBlobURL( url );
onChange( media );
+ hasUploadStarted.current = false;
},
onError: ( message ) => {
revokeBlobURL( url );
onError( message );
+ hasUploadStarted.current = false;
},
} );
}, [ getSettings ] );
diff --git a/packages/block-library/src/video/theme.scss b/packages/block-library/src/video/theme.scss
index c5399582bbb281..cdc95af0b02c29 100644
--- a/packages/block-library/src/video/theme.scss
+++ b/packages/block-library/src/video/theme.scss
@@ -2,6 +2,6 @@
@include caption-style-theme();
}
-:where(.wp-block-video) {
+.wp-block-video {
margin: 0 0 1em 0;
}
diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
index 14c933b16fc696..58396f3ab98591 100644
--- a/packages/components/src/input-control/input-base.tsx
+++ b/packages/components/src/input-control/input-base.tsx
@@ -144,4 +144,8 @@ function InputBase(
);
}
+/**
+ * `InputBase` is an internal component used to style the standard borders for an input,
+ * as well as handle the layout for prefix/suffix elements.
+ */
export default contextConnect( InputBase, 'InputBase' );
diff --git a/packages/compose/src/hooks/use-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js
index 00b5cd50f0b581..db1f2dcdbe3ead 100644
--- a/packages/compose/src/hooks/use-focus-on-mount/index.js
+++ b/packages/compose/src/hooks/use-focus-on-mount/index.js
@@ -1,9 +1,14 @@
/**
* WordPress dependencies
*/
-import { useRef, useEffect, useCallback } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
import { focus } from '@wordpress/dom';
+/**
+ * Internal dependencies
+ */
+import useRefEffect from '../use-ref-effect';
+
/**
* Hook used to focus the first tabbable element on mount.
*
@@ -50,15 +55,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
focusOnMountRef.current = focusOnMount;
}, [ focusOnMount ] );
- useEffect( () => {
- return () => {
- if ( timerId.current ) {
- clearTimeout( timerId.current );
- }
- };
- }, [] );
-
- return useCallback( ( node ) => {
+ return useRefEffect( ( node ) => {
if ( ! node || focusOnMountRef.current === false ) {
return;
}
@@ -80,5 +77,11 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
}
setFocus( node );
+
+ return () => {
+ if ( timerId.current ) {
+ clearTimeout( timerId.current );
+ }
+ };
}, [] );
}
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 85aaddc25bb645..1b772a002ff7be 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -12,6 +12,10 @@
- Remove some unused dependencies ([#62010](https://github.com/WordPress/gutenberg/pull/62010)).
+### Enhancement
+
+- `label` prop in Actions API can be either a `string` value or a `function`, in case we want to use information from the selected items. ([#61942](https://github.com/WordPress/gutenberg/pull/61942)).
+
## 1.2.0 (2024-05-16)
### Internal
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index d0eab0c46d0598..41595b4d58adcd 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -14,7 +14,6 @@ npm install @wordpress/dataviews --save
```jsx
const Example = () => {
-
// Declare data, fields, etc.
return (
@@ -27,7 +26,7 @@ const Example = () => {
paginationInfo={ paginationInfo }
/>
);
-}
+};
```
## Properties
@@ -42,12 +41,14 @@ Example:
const data = [
{
id: 1,
- title: "Title",
- author: "Admin",
- date: "2012-04-23T18:25:43.511Z"
+ title: 'Title',
+ author: 'Admin',
+ date: '2012-04-23T18:25:43.511Z',
},
- { /* ... */ }
-]
+ {
+ /* ... */
+ },
+];
```
By default, dataviews would use each record's `id` as an unique identifier. If it's not, the consumer should provide a `getItemId` function that returns one.
@@ -125,8 +126,8 @@ Each field is an object with the following properties:
- `enableSorting`: whether the data can be sorted by the given field. True by default.
- `enableHiding`: whether the field can be hidden. True by default.
- `filterBy`: configuration for the filters.
- - `operators`: the list of operators supported by the field.
- - `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.
+ - `operators`: the list of operators supported by the field.
+ - `isPrimary`: whether it is a primary filter. A primary filter is always visible and is not listed in the "Add filter" component, except for the list layout where it behaves like a secondary filter.
### `view`: `object`
@@ -140,7 +141,7 @@ const view = {
search: '',
filters: [
{ field: 'author', operator: 'is', value: 2 },
- { field: 'status', operator: 'isAny', value: [ 'publish', 'draft'] }
+ { field: 'status', operator: 'isAny', value: [ 'publish', 'draft' ] },
],
page: 1,
perPage: 5,
@@ -150,7 +151,7 @@ const view = {
},
hiddenFields: [ 'date', 'featured-image' ],
layout: {},
-}
+};
```
Properties:
@@ -164,8 +165,8 @@ Properties:
- `perPage`: number of records to show per page.
- `page`: the page that is visible.
- `sort`:
- - `field`: the field used for sorting the dataset.
- - `direction`: the direction to use for sorting, one of `asc` or `desc`.
+ - `field`: the field used for sorting the dataset.
+ - `direction`: the direction to use for sorting, one of `asc` or `desc`.
- `hiddenFields`: the `id` of the fields that are hidden in the UI.
- `layout`: config that is specific to a particular layout type.
- `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media.
@@ -192,7 +193,11 @@ function MyCustomPageTable() {
search: '',
filters: [
{ field: 'author', operator: 'is', value: 2 },
- { field: 'status', operator: 'isAny', value: [ 'publish', 'draft' ] }
+ {
+ field: 'status',
+ operator: 'isAny',
+ value: [ 'publish', 'draft' ],
+ },
],
hiddenFields: [ 'date', 'featured-image' ],
layout: {},
@@ -219,9 +224,7 @@ function MyCustomPageTable() {
};
}, [ view ] );
- const {
- records
- } = useEntityRecords( 'postType', 'page', queryArgs );
+ const { records } = useEntityRecords( 'postType', 'page', queryArgs );
return (
( {
action,
onClick,
isBusy,
+ items,
}: ActionTriggerProps< Item > ) {
+ const label =
+ typeof action.label === 'string' ? action.label : action.label( items );
return (
( {
setActionInProgress( action.id );
action.callback( selectedItems );
} }
+ items={ selectedEligibleItems }
isBusy={ actionInProgress === action.id }
/>
);
diff --git a/packages/dataviews/src/bulk-actions.tsx b/packages/dataviews/src/bulk-actions.tsx
index f2bb80dc3292e4..9be8f6b6d2d7f2 100644
--- a/packages/dataviews/src/bulk-actions.tsx
+++ b/packages/dataviews/src/bulk-actions.tsx
@@ -94,9 +94,13 @@ function ActionWithModal< Item extends AnyItem >( {
const onCloseModal = useCallback( () => {
setActionWithModal( undefined );
}, [ setActionWithModal ] );
+ const label =
+ typeof action.label === 'string'
+ ? action.label
+ : action.label( selectedItems );
return (
{
action: Action< Item >;
onClick: MouseEventHandler;
isBusy?: boolean;
+ items: Item[];
}
interface ActionModalProps< Item extends AnyItem > {
@@ -67,10 +68,13 @@ interface CompactItemActionsProps< Item extends AnyItem > {
function ButtonTrigger< Item extends AnyItem >( {
action,
onClick,
+ items,
}: ActionTriggerProps< Item > ) {
+ const label =
+ typeof action.label === 'string' ? action.label : action.label( items );
return (
( {
function DropdownMenuItemTrigger< Item extends AnyItem >( {
action,
onClick,
+ items,
}: ActionTriggerProps< Item > ) {
+ const label =
+ typeof action.label === 'string' ? action.label : action.label( items );
return (
- { action.label }
+ { label }
);
}
@@ -98,9 +105,11 @@ export function ActionModal< Item extends AnyItem >( {
items,
closeModal,
}: ActionModalProps< Item > ) {
+ const label =
+ typeof action.label === 'string' ? action.label : action.label( items );
return (
{} ) }
overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
@@ -168,6 +177,7 @@ export function ActionsDropdownMenuGroup< Item extends AnyItem >( {
key={ action.id }
action={ action }
onClick={ () => action.callback( [ item ] ) }
+ items={ [ item ] }
/>
);
} ) }
@@ -224,6 +234,7 @@ export default function ItemActions< Item extends AnyItem >( {
key={ action.id }
action={ action }
onClick={ () => action.callback( [ item ] ) }
+ items={ [ item ] }
/>
);
} ) }
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index f7e6274d83928e..e3d6d2dd158ecd 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -287,8 +287,10 @@ interface ActionBase< Item extends AnyItem > {
/**
* The label of the action.
+ * In case we want to adjust the label based on the selected items,
+ * a function can be provided.
*/
- label: string;
+ label: string | ( ( items: Item[] ) => string );
/**
* The icon of the action. (Either a string or an SVG element)
diff --git a/packages/dataviews/src/view-list.tsx b/packages/dataviews/src/view-list.tsx
index 1e7a558bbad5eb..9468d6aa2d0585 100644
--- a/packages/dataviews/src/view-list.tsx
+++ b/packages/dataviews/src/view-list.tsx
@@ -105,6 +105,11 @@ function ListItem< Item extends AnyItem >( {
}, [ actions, item ] );
const [ isModalOpen, setIsModalOpen ] = useState( false );
+ const primaryActionLabel =
+ primaryAction &&
+ ( typeof primaryAction.label === 'string'
+ ? primaryAction.label
+ : primaryAction.label( [ item ] ) );
return (
( {
store={ store }
render={
( {
store={ store }
render={
-
+
);
}
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
deleted file mode 100644
index 8ad587d4e5a580..00000000000000
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.edit-post-visual-editor {
- position: relative;
- display: flex;
- flex-flow: column;
- // In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
- // legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
- &:not(.has-inline-canvas) {
- overflow: hidden;
- }
-
- // Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
- // interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
- // when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
- background-color: $gray-300;
-
- // 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;
-
- &.has-icon {
- padding: 6px;
- }
- }
-
- // The following flex rule is important for the canvas layout, please be careful when refactoring,
- // as older browser interpret flex height behavior differently. Be sure to test on Safari 13.
- // The syntax is `flex: [flex-grow] [flex-shrink] [flex-basis];`
- // We set the canvas to be allowed to grow (vertically), but not shrink.
- flex: 1 0 auto;
-
- // Since the parent container is also a flex container, a `flex-basis: 100%;` is not needed,
- // as align-items: stretch is inherited by default.Additionally due to older browser's flex height
- // interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping.
- // See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property.
-}
-
-.edit-post-visual-editor__content-area {
- width: 100%;
- height: 100%;
- position: relative;
- box-sizing: border-box;
- display: flex;
-
- // This is necessary for older browsers due to their flex height interpretation.
- // These browsers (including Safari 13) ignore the percentage value entirely.
- // By setting flex-grow, the element stretches to fill the parent.
- // See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property
- flex-grow: 1;
-}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index ef05d688c4d34e..7a935f198660a8 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -2,7 +2,6 @@
@import "./components/header/fullscreen-mode-close/style.scss";
@import "./components/layout/style.scss";
@import "./components/meta-boxes/meta-boxes-area/style.scss";
-@import "./components/visual-editor/style.scss";
@import "./components/welcome-guide/style.scss";
/**
diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
index df63e3fde09aa5..03d11dcf8237ef 100644
--- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -1,30 +1,11 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
/**
* Internal dependencies
*/
import EditorCanvas from './editor-canvas';
import EditorCanvasContainer from '../editor-canvas-container';
import useSiteEditorSettings from './use-site-editor-settings';
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
export default function SiteEditorCanvas() {
- const { isViewMode } = useSelect( ( select ) => {
- const { getCanvasMode } = unlock( select( editSiteStore ) );
-
- return {
- isViewMode: getCanvasMode() === 'view',
- };
- }, [] );
-
const settings = useSiteEditorSettings();
return (
@@ -35,13 +16,7 @@ export default function SiteEditorCanvas() {
{ editorCanvasView }