diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index fb6db319118cc9..d25c7c578d8776 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -7,21 +7,6 @@ } } -// TODO: move to edit-post//components/layout along with the other modes -.block-editor-block-list__layout .block-editor-block-list__block.is-disabled { - background-color: rgba(200, 200, 200, 0.2); - > .block-editor-block-list__block-edit { - // opacity: 0.5; - } - // &::before { - // content: 'h'; - // } - - .editor-rich-text { - background: #ccc !important; - } -} - .block-editor-block-list__layout .block-editor-block-list__block.is-selected { // Needs specificity to override inherited styles. // While block is being dragged, dim the slot dragged from, and hide some UI. &.is-dragging { diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 8210f7ae5656d6..9e282e89e178b6 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -235,25 +235,25 @@ /* Settings */ :root { - --offset: 2rem; - --max_width: 72rem; - --columns: 5; - --gutter: 1rem; - --color: hsla(204, 80%, 72%, 0.15); -} - -/* Helper variables */ -:root { - --repeating-width: calc(100% / var(--columns)); - --column-width: calc((100% / var(--columns)) - var(--gutter)); - --background-width: calc(100% + var(--gutter)); - --background-columns: repeating-linear-gradient(to right, var(--color), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width)); + --color: #000; + /* The following is hard-coded for `gutenberg-theme` */ + --background-columns: linear-gradient(to right, var(--color), var(--color) 1px, transparent 1px, transparent 245px, var(--color) 245px, var(--color) 246px, transparent 246px, transparent 854px, var(--color) 854px, var(--color) 855px, transparent 855px, transparent 1099px, var(--color) 1099px, var(--color) 1100px, transparent 1100px); } .edit-post-layout.is-mode-design { background-image: var(--background-columns); - background-size: var(--background-width) 100%; + background-size: 1100px 100%; + background-repeat: no-repeat; + background-position-x: center; z-index: 1000; + + .block-editor-block-list__block { + background-color: rgba(200, 200, 200, 0.2); + } + + .editor-rich-text { + background: #ccc !important; + } } .is-mode-template-part {