diff -r be944660c56a -r 3d72ae0968f4 wp/wp-includes/css/dist/block-editor/style-rtl.css --- a/wp/wp-includes/css/dist/block-editor/style-rtl.css Wed Sep 21 18:19:35 2022 +0200 +++ b/wp/wp-includes/css/dist/block-editor/style-rtl.css Tue Sep 27 16:37:53 2022 +0200 @@ -1,4 +1,3 @@ -@charset "UTF-8"; /** * Colors */ @@ -42,6 +41,12 @@ * These variables do not appear to be used anywhere else. */ /** +* Converts a hex value into the rgb equivalent. +* +* @param {string} hex - the hexadecimal value to convert +* @return {string} comma separated rgb values +*/ +/** * Breakpoint mixins */ /** @@ -71,8 +76,11 @@ */ :root { --wp-admin-theme-color: #007cba; + --wp-admin-theme-color--rgb: 0, 124, 186; --wp-admin-theme-color-darker-10: #006ba1; + --wp-admin-theme-color-darker-10--rgb: 0, 107, 161; --wp-admin-theme-color-darker-20: #005a87; + --wp-admin-theme-color-darker-20--rgb: 0, 90, 135; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @@ -81,10 +89,6 @@ } } -#start-resizable-editor-section { - display: none; -} - .block-editor-autocompleters__block { white-space: nowrap; } @@ -92,6 +96,17 @@ margin-left: 8px; } +.block-editor-autocompleters__link { + white-space: nowrap; +} +.block-editor-autocompleters__link .block-editor-block-icon { + margin-left: 8px; +} + +.block-editor-block-alignment-control__menu-group .components-menu-item__info { + margin-top: 0; +} + .block-editor-block-alignment-matrix-control__popover .components-popover__content { min-width: 0; width: auto; @@ -110,6 +125,11 @@ .block-editor-block-icon.has-colors svg { fill: currentColor; } +@media (forced-colors: active) { + .block-editor-block-icon.has-colors svg { + fill: CanvasText; + } +} .block-editor-block-icon svg { min-width: 20px; min-height: 20px; @@ -165,8 +185,9 @@ cursor: default; } .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after, +.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after, .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, -.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after { +.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after { position: absolute; z-index: 1; pointer-events: none; @@ -175,27 +196,32 @@ bottom: 1px; right: 1px; left: 1px; - box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); border-radius: 1px; outline: 2px solid transparent; } .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after, +.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after, .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, -.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after { +.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after { box-shadow: 0 0 0 1px #fff; } .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection, +.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable]) .components-placeholder ::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection, -.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected .components-placeholder ::selection { +.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection { background: transparent; } .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after { - box-shadow: 0 0 0 1px #949494; -} -.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after, -.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected { + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); +} +.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - outline: var(--wp-admin-border-width-focus) solid transparent; + outline: 1px solid transparent; +} +.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + outline: 2px solid transparent; } .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::before { content: ""; @@ -267,6 +293,7 @@ left: 1px; box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); border-radius: 1px; + outline: 2px solid transparent; } .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff; @@ -318,10 +345,6 @@ .block-editor-block-list__layout .block-editor-block-list__block[data-clear=true] { float: none; } -.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__layout .block-editor-default-block-appender .block-editor-inserter { - right: auto; - left: 8px; -} .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered { cursor: default; @@ -338,7 +361,7 @@ cursor: unset; } .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after { - box-shadow: 0 0 0 1px var(--wp-admin-theme-color); + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); top: 1px; right: 1px; left: 1px; @@ -379,10 +402,28 @@ } .wp-block[data-align=left] > *, -.wp-block[data-align=right] > * { +.wp-block[data-align=right] > *, +.wp-block.alignleft, +.wp-block.alignright { z-index: 21; } +.wp-site-blocks > [data-align=left] { + float: right; + margin-left: 2em; +} + +.wp-site-blocks > [data-align=right] { + float: left; + margin-right: 2em; +} + +.wp-site-blocks > [data-align=center] { + justify-content: center; + margin-right: auto; + margin-left: auto; +} + /** * In-Canvas Inserter */ @@ -466,26 +507,15 @@ .block-editor-block-list__insertion-point-indicator { position: absolute; background: var(--wp-admin-theme-color); - animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; - animation-fill-mode: forwards; -} -@media (prefers-reduced-motion: reduce) { - .block-editor-block-list__insertion-point-indicator { - animation-duration: 1ms; - animation-delay: 0s; - } } .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator { top: 50%; - left: 0; - right: 0; height: 1px; } .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator { top: 0; left: 0; right: 50%; - height: 100%; width: 1px; } @@ -537,30 +567,6 @@ background: #1e1e1e; } -.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button, -.block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button { - animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; - animation-fill-mode: forwards; -} -@media (prefers-reduced-motion: reduce) { - .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button, -.block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button { - animation-duration: 1ms; - animation-delay: 0s; - } -} - -@keyframes block-editor-inserter__toggle__fade-in-animation-delayed { - 0% { - opacity: 0; - } - 60% { - opacity: 0; - } - 100% { - opacity: 1; - } -} /** * Block Toolbar when contextual. */ @@ -619,7 +625,7 @@ */ .block-editor-block-list__block-selection-button { display: inline-flex; - padding: 0 13px; + padding: 0 12px; z-index: 22; border-radius: 2px; background-color: #1e1e1e; @@ -639,6 +645,7 @@ padding: 0; height: 24px; min-width: 24px; + margin-right: -2px; } .block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle svg { min-width: 18px; @@ -733,33 +740,45 @@ display: none; } -.block-editor-block-list__block .block-list-appender { - align-self: center; - padding: 0; - list-style: none; - margin: 8px; -} -.block-editor-block-list__block .block-list-appender.wp-block { - max-width: none; -} -.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender { - margin: 8px 0; -} -.block-editor-block-list__block .block-list-appender .block-list-appender__toggle { - padding: 0; - opacity: 1; - transform: scale(1); - transition: all 0.1s ease; - margin-right: 8px; -} -@media (prefers-reduced-motion: reduce) { - .block-editor-block-list__block .block-list-appender .block-list-appender__toggle { - transition-duration: 0s; - transition-delay: 0s; - } -} -.block-editor-block-list__block .block-list-appender:first-of-type .block-list-appender__toggle { - margin-right: 0; +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, +.block-editor-block-toolbar .components-toolbar-group { + padding-right: 6px; + padding-left: 6px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button.has-icon.has-icon, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button.has-icon.has-icon, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button.has-icon.has-icon, +.block-editor-block-toolbar .components-toolbar-group .components-button, +.block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon { + min-width: 36px; + padding-right: 6px; + padding-left: 6px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button svg, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button.has-icon.has-icon svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button.has-icon.has-icon svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button.has-icon.has-icon svg, +.block-editor-block-toolbar .components-toolbar-group .components-button svg, +.block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon svg { + min-width: 24px; +} +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button::before, +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot .components-button.has-icon.has-icon::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar .components-button.has-icon.has-icon::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before, +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button.has-icon.has-icon::before, +.block-editor-block-toolbar .components-toolbar-group .components-button::before, +.block-editor-block-toolbar .components-toolbar-group .components-button.has-icon.has-icon::before { + right: 2px; + left: 2px; } .is-vertical .block-list-appender { @@ -778,17 +797,84 @@ transform: scale(0); } +.block-editor-block-lock-modal { + z-index: 1000001; +} +@media (min-width: 600px) { + .block-editor-block-lock-modal .components-modal__frame { + max-width: 480px; + } +} + +.block-editor-block-lock-modal__checklist { + margin: 0; +} + +.block-editor-block-lock-modal__options-title { + padding: 12px 0; +} +.block-editor-block-lock-modal__options-title .components-checkbox-control__label { + font-weight: 600; +} +.block-editor-block-lock-modal__options-title .components-base-control__field { + align-items: center; + display: flex; + margin: 0; +} + +.block-editor-block-lock-modal__checklist-item { + margin-bottom: 0; + padding: 12px 32px 12px 0; +} +.block-editor-block-lock-modal__checklist-item .components-base-control__field { + align-items: center; + display: flex; + margin: 0; +} +.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label { + display: flex; + align-items: center; + justify-content: space-between; + flex-grow: 1; +} +.block-editor-block-lock-modal__checklist-item .components-checkbox-control__label svg { + margin-left: 12px; + fill: #1e1e1e; +} +.block-editor-block-lock-modal__checklist-item:hover { + background-color: #f0f0f0; + border-radius: 2px; +} + +.block-editor-block-lock-modal__actions { + margin-top: 24px; +} + +.block-editor-block-lock-toolbar .components-button.has-icon { + min-width: 36px !important; + padding-right: 0 !important; +} +.block-editor-block-lock-toolbar .components-button.has-icon:focus::before { + left: 8px !important; +} + .block-editor-block-breadcrumb { list-style: none; padding: 0; margin: 0; } .block-editor-block-breadcrumb li { - display: inline-block; + display: inline-flex; margin: 0; } -.block-editor-block-breadcrumb li:not(:last-child)::after { - content: "←"; +.block-editor-block-breadcrumb li .block-editor-block-breadcrumb__separator { + fill: currentColor; + margin-right: -4px; + margin-left: -4px; + transform: scaleX(-1);; +} +.block-editor-block-breadcrumb li:last-child .block-editor-block-breadcrumb__separator { + display: none; } .block-editor-block-breadcrumb__button.components-button { @@ -861,14 +947,8 @@ * Invalid block comparison */ .block-editor-block-compare { - overflow: auto; height: auto; } -@media (min-width: 600px) { - .block-editor-block-compare { - max-height: 70%; - } -} .block-editor-block-compare__wrapper { display: flex; @@ -881,6 +961,7 @@ width: 50%; padding: 0 0 0 16px; min-width: 200px; + max-width: 600px; } .block-editor-block-compare__wrapper > div button { float: left; @@ -926,6 +1007,29 @@ margin: 0.67em 0; } +.block-editor-block-content-overlay.overlay-active::before { + content: ""; + position: absolute; + top: 0; + right: 0; + width: 100%; + height: 100%; + background: transparent; + border: none; + border-radius: 2px; + z-index: 10; +} +.block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before { + background: rgba(var(--wp-admin-theme-color--rgb), 0.1); + box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset; +} +.block-editor-block-content-overlay.overlay-active:not(.is-dragging-blocks) * { + pointer-events: none; +} +.block-editor-block-content-overlay.is-dragging-blocks { + box-shadow: 0 0 0 1px var(--wp-admin-theme-color); +} + .block-editor-block-draggable-chip-wrapper { position: absolute; top: -24px; @@ -966,8 +1070,17 @@ font-size: 13px; } -.is-dragging { - display: none !important; +.block-editor-block-list__layout .is-dragging { + background-color: currentColor !important; + opacity: 0.05 !important; + border-radius: 2px !important; + pointer-events: none !important; +} +.block-editor-block-list__layout .is-dragging::selection { + background: transparent !important; +} +.block-editor-block-list__layout .is-dragging::after { + content: none !important; } .block-editor-block-mobile-toolbar { @@ -1012,6 +1125,7 @@ flex: 1; flex-direction: row; border-left: none !important; + padding: 0; } @media (min-width: 600px) { .block-editor-block-mover .block-editor-block-mover__move-button-container, @@ -1103,6 +1217,10 @@ width: calc(100% + 1px); } +.block-editor-block-navigation__container { + min-width: 280px; +} + .block-editor-block-navigation__label { margin: 0 0 12px; color: #757575; @@ -1111,296 +1229,6 @@ font-weight: 500; } -.block-editor-block-navigation__container { - min-width: 280px; -} - -.block-editor-block-navigation-tree { - width: 100%; - border-collapse: collapse; - padding: 0; - margin: 0; -} -.components-modal__content .block-editor-block-navigation-tree { - margin: -12px -6px 0; - width: calc(100% + 12px); -} - -.block-editor-block-navigation-leaf { - position: relative; -} -.block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-contents { - background: var(--wp-admin-theme-color); - color: #fff; -} -.block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-contents:focus { - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); -} -.block-editor-block-navigation-leaf.is-branch-selected.is-selected .block-editor-block-navigation-block-contents { - border-radius: 2px 2px 0 0; -} -.block-editor-block-navigation-leaf.is-branch-selected:not(.is-selected) .block-editor-block-navigation-block-contents { - background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color)); - border-radius: 0; -} -.block-editor-block-navigation-leaf.is-branch-selected.is-last-of-selected-branch .block-editor-block-navigation-block-contents { - border-radius: 0 0 2px 2px; -} -.block-editor-block-navigation-leaf.is-dragging { - display: none; -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents { - display: flex; - align-items: center; - width: 100%; - height: auto; - padding: 6px 12px; - text-align: right; - color: #1e1e1e; - border-radius: 2px; - position: relative; - white-space: nowrap; -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:focus { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:focus { - z-index: 1; -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-before::before { - content: ""; - position: absolute; - pointer-events: none; - transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; - top: -2px; - left: 0; - right: 0; - border-top: 4px solid var(--wp-admin-theme-color); -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-after::before { - content: ""; - position: absolute; - pointer-events: none; - transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; - bottom: -2px; - left: 0; - right: 0; - border-bottom: 4px solid var(--wp-admin-theme-color); -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-to-inner-blocks::before { - content: ""; - position: absolute; - pointer-events: none; - transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; - bottom: -2px; - left: 0; - right: 24px; - border-bottom: 4px solid var(--wp-admin-theme-color); -} -.components-modal__content .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents { - padding-right: 0; - padding-left: 0; -} -.block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents { - opacity: 1; - animation: edit-post__fade-in-animation 0.2s ease-out 0s; - animation-fill-mode: forwards; -} -@media (prefers-reduced-motion: reduce) { - .block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents { - animation-duration: 1ms; - animation-delay: 0s; - } -} -.block-editor-block-navigation-leaf .block-editor-block-icon { - align-self: flex-start; - margin-left: 10px; - width: 20px; -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__contents-cell { - padding-top: 0; - padding-bottom: 0; -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell { - line-height: 0; - width: 36px; - opacity: 0; - vertical-align: top; -} -@media (prefers-reduced-motion: reduce) { - .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell { - transition-duration: 0s; - transition-delay: 0s; - } -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell:hover, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible { - position: relative; - z-index: 1; - opacity: 1; - animation: edit-post__fade-in-animation 0.2s ease-out 0s; - animation-fill-mode: forwards; -} -@media (prefers-reduced-motion: reduce) { - .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell:hover, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible { - animation-duration: 1ms; - animation-delay: 0s; - } -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell .components-button.has-icon, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell, -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell .components-button.has-icon { - width: 24px; - min-width: 24px; - padding: 0; -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell { - padding-top: 8px; -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell-alignment-wrapper { - display: flex; - height: 100%; - flex-direction: column; - align-items: center; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button { - position: relative; - width: 36px; - height: 24px; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button svg { - position: relative; - height: 24px; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button { - margin-top: -6px; - align-items: flex-end; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button svg { - bottom: -4px; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button { - margin-bottom: -6px; - align-items: flex-start; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button svg { - top: -4px; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button:focus:enabled { - box-shadow: none; - outline: none; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button:focus { - box-shadow: none; - outline: none; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button:focus::before { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff; - outline: 2px solid transparent; -} -.block-editor-block-navigation-leaf .block-editor-block-mover-button::before { - content: ""; - position: absolute; - display: block; - border-radius: 2px; - height: 16px; - min-width: 100%; - right: 0; - left: 0; - animation: components-button__appear-animation 0.1s ease; - animation-fill-mode: forwards; -} -@media (prefers-reduced-motion: reduce) { - .block-editor-block-navigation-leaf .block-editor-block-mover-button::before { - animation-duration: 1ms; - animation-delay: 0s; - } -} -.block-editor-block-navigation-leaf .block-editor-inserter__toggle { - background: #1e1e1e; - color: #fff; - height: 24px; - margin: 6px 1px 6px 6px; - min-width: 24px; -} -.block-editor-block-navigation-leaf .block-editor-inserter__toggle:active { - color: #fff; -} -.block-editor-block-navigation-leaf .block-editor-block-navigation-block-select-button__anchor { - background: rgba(0, 0, 0, 0.1); - border-radius: 2px; - display: inline-block; - padding: 2px 6px; - margin: 0 8px; - max-width: 120px; - overflow: hidden; - text-overflow: ellipsis; -} -.block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-select-button__anchor { - background: rgba(0, 0, 0, 0.3); -} - -.block-editor-block-navigation-block-slot__description, -.block-editor-block-navigation-block-select-button__description, -.block-editor-block-navigation-appender__description { - display: none; -} - -.block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-block__contents-container, -.block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-appender__container, -.block-editor-block-navigation-appender__cell .block-editor-block-navigation-block__contents-container, -.block-editor-block-navigation-appender__cell .block-editor-block-navigation-appender__container { - display: flex; -} - -.block-editor-block-navigation-leaf[aria-level] .block-editor-block-icon { - margin-right: 224px; -} - -.block-editor-block-navigation-leaf[aria-level="1"] .block-editor-block-icon { - margin-right: 0px; -} - -.block-editor-block-navigation-leaf[aria-level="2"] .block-editor-block-icon { - margin-right: 28px; -} - -.block-editor-block-navigation-leaf[aria-level="3"] .block-editor-block-icon { - margin-right: 56px; -} - -.block-editor-block-navigation-leaf[aria-level="4"] .block-editor-block-icon { - margin-right: 84px; -} - -.block-editor-block-navigation-leaf[aria-level="5"] .block-editor-block-icon { - margin-right: 112px; -} - -.block-editor-block-navigation-leaf[aria-level="6"] .block-editor-block-icon { - margin-right: 140px; -} - -.block-editor-block-navigation-leaf[aria-level="7"] .block-editor-block-icon { - margin-right: 168px; -} - -.block-editor-block-navigation-leaf[aria-level="8"] .block-editor-block-icon { - margin-right: 196px; -} - -.block-editor-block-navigation-leaf[aria-level="9"] .block-editor-block-icon { - margin-right: 224px; -} - .block-editor-block-parent-selector { background: #fff; border-radius: 2px; @@ -1414,7 +1242,7 @@ .block-editor-block-patterns-list__list-item { cursor: pointer; - margin-top: 16px; + margin-bottom: 24px; } .block-editor-block-patterns-list__list-item.is-placeholder { min-height: 100px; @@ -1425,23 +1253,28 @@ .block-editor-block-patterns-list__item { height: 100%; +} +.block-editor-block-patterns-list__item .block-editor-block-preview__container { + display: flex; + align-items: center; + overflow: hidden; border-radius: 2px; - transition: all 0.05s ease-in-out; - position: relative; - border: 1px solid transparent; -} -.block-editor-block-patterns-list__item:hover { + border: 1px solid #f0f0f0; +} +.block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title { + padding-top: 8px; + font-size: 12px; + text-align: center; +} +.block-editor-block-patterns-list__item:hover .block-editor-block-preview__container { border: 1px solid var(--wp-admin-theme-color); } -.block-editor-block-patterns-list__item:focus { +.block-editor-block-patterns-list__item:focus .block-editor-block-preview__container { box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); outline: 2px solid transparent; } - -.block-editor-block-patterns-list__item-title { - padding: 4px; - font-size: 12px; - text-align: center; +.block-editor-block-patterns-list__item:hover .block-editor-block-patterns-list__item-title, .block-editor-block-patterns-list__item:focus .block-editor-block-patterns-list__item-title { + color: var(--wp-admin-theme-color); } .block-editor-block-preview__container { @@ -1449,12 +1282,7 @@ width: 100%; overflow: hidden; } -.block-editor-block-preview__container.editor-styles-wrapper { - padding: 0; - margin: 0; -} .block-editor-block-preview__container .block-editor-block-preview__content { - position: absolute; top: 0; right: 0; transform-origin: top right; @@ -1469,79 +1297,102 @@ .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender { display: none; } -.block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container { - padding-right: 0; - padding-left: 0; -} -.block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] { - margin-right: 0; - margin-left: 0; + +.block-editor-block-preview__content-iframe .block-list-appender { + display: none; +} + +.block-editor-block-preview__live-content * { + pointer-events: none; +} +.block-editor-block-preview__live-content .block-list-appender { + display: none; +} +.block-editor-block-preview__live-content .components-button:disabled { + opacity: initial; +} +.block-editor-block-preview__live-content .components-placeholder, +.block-editor-block-preview__live-content .block-editor-block-list__block[data-empty=true] { + display: none; } .block-editor-block-settings-menu__popover .components-dropdown-menu__menu { padding: 0; } -.block-editor-block-styles { +.block-editor-block-styles + .default-style-picker__default-switcher { + margin-top: 16px; +} + +.block-editor-block-styles__preview-panel { + display: none; + position: absolute; + left: 16px; + right: auto; + z-index: 90; +} +@media (min-width: 782px) { + .block-editor-block-styles__preview-panel { + display: block; + } +} +.block-editor-block-styles__preview-panel .block-editor-inserter__preview-container { + right: auto; + left: auto; + top: auto; + position: static; +} +.block-editor-block-styles__preview-panel .block-editor-block-card__title.block-editor-block-card__title { + margin: 0; +} +.block-editor-block-styles__preview-panel .block-editor-block-icon { + display: none; +} + +.block-editor-block-styles__variants { display: flex; flex-wrap: wrap; justify-content: space-between; -} - -.block-editor-block-styles__item { + gap: 8px; +} +.block-editor-block-styles__variants .block-editor-block-styles__item { + color: #2f2f2f; + box-shadow: inset 0 0 0 1px #ccc; + display: inline-block; width: calc(50% - 4px); - margin: 4px 0; - flex-shrink: 0; - cursor: pointer; - overflow: hidden; - border-radius: 2px; - padding: 6px; - display: flex; - flex-direction: column; -} -.block-editor-block-styles__item:focus { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - outline: 2px solid transparent; -} -.block-editor-block-styles__item:hover .block-editor-block-styles__item-preview { - border-color: var(--wp-admin-theme-color); -} -.block-editor-block-styles__item.is-active .block-editor-block-styles__item-label { - font-weight: bold; -} -.block-editor-block-styles__item.is-active .block-editor-block-styles__item-preview { - margin: 0; - border: 2px solid #1e1e1e; -} -.block-editor-block-styles__item .block-editor-block-preview__container { - cursor: inherit; -} - -.block-editor-block-styles__item-preview { - outline: 1px solid transparent; - padding: 0; - margin: 2px; - border-radius: 2px; - display: flex; - overflow: hidden; - background: #fff; - align-items: center; - flex-grow: 1; - min-height: 80px; - max-height: 160px; -} - -.block-editor-block-switcher__styles__menugroup { - position: relative; -} - -.block-editor-block-styles__item-label { - text-align: center; - padding: 4px 0; +} +.block-editor-block-styles__variants .block-editor-block-styles__item:focus, .block-editor-block-styles__variants .block-editor-block-styles__item:hover { + color: var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color); +} +.block-editor-block-styles__variants .block-editor-block-styles__item.is-active, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover { + background-color: #2f2f2f; + box-shadow: none; +} +.block-editor-block-styles__variants .block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text { + color: #fff; +} +.block-editor-block-styles__variants .block-editor-block-styles__item.is-active:focus { + box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--wp-admin-theme-color); +} +.block-editor-block-styles__variants .block-editor-block-styles__item-text { + word-break: break-all; + white-space: normal; + text-align: start; + text-align-last: center; +} + +.block-editor-block-styles__block-preview-container, +.block-editor-block-styles__block-preview-container * { + box-sizing: border-box !important; } .block-editor-block-switcher { position: relative; + padding: 0 6px; +} +.block-editor-block-switcher .components-button.components-dropdown-menu__toggle.has-icon.has-icon { + min-width: 36px; } .block-editor-block-switcher__no-switcher-icon, @@ -1576,11 +1427,13 @@ } .components-button.block-editor-block-switcher__no-switcher-icon { - width: 48px; -} -.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-blocks-icon { + display: flex; + padding: 6px 12px !important; +} +.components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon { margin-left: auto; margin-right: auto; + min-width: 24px !important; } .components-button.block-editor-block-switcher__no-switcher-icon:disabled { @@ -1678,7 +1531,7 @@ } .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon { - width: 48px; + min-width: 36px; } .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon, .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle { @@ -1727,9 +1580,6 @@ } .block-editor-block-types-list > [role=presentation] { - padding: 4px; - margin-right: -4px; - margin-left: -4px; overflow: hidden; display: flex; flex-wrap: wrap; @@ -1808,39 +1658,41 @@ align-items: flex-start; width: 100%; border-radius: 2px; - box-shadow: inset 0 0 0 1px #1e1e1e; - outline: 1px solid transparent; } .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar { justify-content: center; } .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 16px; - padding: 16px; - max-height: 550px; - overflow: auto; - margin: 0 1px 1px 1px; - width: calc(100% - 2px); - background: #fff; + column-gap: 24px; + display: block; + width: 100%; + padding: 32px; + column-count: 2; +} +@media (min-width: 1440px) { + .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container { + column-count: 3; + } } .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] { cursor: pointer; } -.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item-title { - padding: 4px; - font-size: 12px; - text-align: center; -} -.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container { +.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item { + break-inside: avoid-column; + margin-bottom: 24px; +} +.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container { + min-height: 100px; border-radius: 2px; border: 1px solid #ddd; } +.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__content { + width: 100%; +} .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar { + height: 60px; box-sizing: border-box; - position: relative; padding: 16px; width: 100%; text-align: right; @@ -1848,12 +1700,12 @@ color: #1e1e1e; border-radius: 2px 2px 0 0; background-color: #fff; - box-shadow: inset 0 0 0 1px #1e1e1e; - outline: 1px solid transparent; display: flex; flex-direction: row; align-items: center; justify-content: space-between; + border-top: 1px solid #ddd; + align-self: flex-end; } .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls { display: flex; @@ -1884,13 +1736,12 @@ box-sizing: border-box; } .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide { - opacity: 0; position: absolute; top: 0; width: 100%; margin: auto; - padding: 16px; - transition: transform 0.5s, opacity 0.5s, z-index 0.5s; + padding: 0; + transition: transform 0.5s, z-index 0.5s; z-index: 100; } .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide { @@ -1910,8 +1761,14 @@ display: none; } +.block-editor-block-pattern-setup__carousel, +.block-editor-block-pattern-setup__grid { + width: 100%; + overflow-y: auto; +} + .block-editor-block-variation-transforms { - padding: 0 56px 16px 16px; + padding: 0 52px 16px 16px; width: 100%; } .block-editor-block-variation-transforms .components-dropdown-menu__toggle { @@ -1943,15 +1800,66 @@ min-width: 230px; } -.components-border-style-control__select { - margin-bottom: 24px; -} -.components-border-style-control__select button { - width: 100%; -} -.components-border-style-control__select ul li, -.components-border-style-control__select ul li:last-child { - margin: 6px; +.components-border-radius-control { + margin-bottom: 12px; +} +.components-border-radius-control legend { + margin-bottom: 8px; +} +.components-border-radius-control .components-border-radius-control__wrapper { + display: flex; + justify-content: space-between; + align-items: flex-start; +} +.components-border-radius-control .components-border-radius-control__wrapper > .components-unit-control-wrapper { + width: calc(50% - 26px); + margin-bottom: 0; +} +.components-border-radius-control .components-border-radius-control__wrapper .components-range-control { + width: calc(50% - 26px); + margin-bottom: 0; +} +.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-base-control__field { + margin-bottom: 0; + height: 30px; +} +.components-border-radius-control .components-border-radius-control__wrapper .components-range-control .components-range-control__wrapper { + margin-left: 10px; +} +.components-border-radius-control .components-border-radius-control__wrapper > span { + flex: 0 0 auto; +} +.components-border-radius-control .components-border-radius-control__input-controls-wrapper { + display: flex; + width: 70%; + flex-wrap: wrap; +} +.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-unit-control-wrapper { + width: calc(50% - 8px); + margin-bottom: 8px; + margin-left: 8px; +} +.components-border-radius-control .component-border-radius-control__linked-button.has-icon { + display: flex; + justify-content: center; +} +.components-border-radius-control .component-border-radius-control__linked-button.has-icon svg { + margin-left: 0; +} + +.components-border-style-control legend { + line-height: 1.4; + margin-bottom: 8px; + padding: 0; +} +.components-border-style-control .components-border-style-control__buttons { + display: inline-flex; +} +.components-border-style-control .components-border-style-control__buttons .components-button.has-icon { + min-width: 30px; + height: 30px; + padding: 3px; + margin-left: 4px; } .block-editor-button-block-appender { @@ -1959,12 +1867,14 @@ flex-direction: column; align-items: center; justify-content: center; - padding: 8px; width: 100%; height: auto; color: #1e1e1e; box-shadow: inset 0 0 0 1px #1e1e1e; } +.block-editor-button-block-appender.components-button.components-button { + padding: 12px; +} .is-dark-theme .block-editor-button-block-appender { color: rgba(255, 255, 255, 0.65); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65); @@ -1979,54 +1889,91 @@ .block-editor-button-block-appender:active { color: #000; } -.block-editor-button-block-appender.block-list-appender__toggle { - display: flex; - flex-direction: row; - box-shadow: none; - height: 24px; - width: 24px; -} -.block-editor-button-block-appender.block-list-appender__toggle > svg { - width: 24px; - background-color: #1e1e1e; - color: #fff; - border-radius: 2px; - flex: 1 0 auto; -} .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator { margin-bottom: 12px; } -.block-editor-color-gradient-control .block-editor-color-gradient-control__button-tabs { - display: block; - margin-bottom: 12px; -} - -.block-editor-panel-color-gradient-settings .component-color-indicator { - vertical-align: text-bottom; -} -.block-editor-panel-color-gradient-settings__panel-title .component-color-indicator { - display: inline-block; + +.block-editor-color-gradient-control__fieldset { + min-width: 0; +} + +.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title { + display: flex; + gap: 8px; +} +.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator { + width: 12px; + height: 12px; + align-self: center; +} +.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator:first-child { + margin-right: 12px; } .block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator { display: none; } @media screen and (min-width: 782px) { .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches { - margin-left: 0; + display: grid; + grid-template-columns: repeat(6, 28px); + justify-content: space-between; } - .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper { - margin-left: calc((100% - (28px * 6)) / 5); +} +.block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control { + margin-bottom: inherit; +} +.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__dropdown { + display: block; +} + +.block-editor-panel-color-gradient-settings__dropdown { + width: 100%; +} + +.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content > div { + width: 280px; +} + +@media (min-width: 782px) { + .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content { + margin-left: 156px !important; } - .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(6n+6) { - margin-left: 0; + .block-editor-panel-color-gradient-settings__dropdown-content.is-from-top .components-popover__content { + margin-top: -60px !important; + } + .block-editor-panel-color-gradient-settings__dropdown-content.is-from-bottom .components-popover__content { + margin-bottom: -60px !important; } } +.block-editor-panel-color-gradient-settings__dropdown:last-child > div { + border-bottom-width: 0; +} + +.block-editor-panel-color-gradient-settings__item { + padding-top: 12px !important; + padding-bottom: 12px !important; +} +.block-editor-panel-color-gradient-settings__item .block-editor-panel-color-gradient-settings__color-indicator { + background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%); +} +.block-editor-panel-color-gradient-settings__item.is-open { + background: #f0f0f0; + color: var(--wp-admin-theme-color); +} .block-editor-contrast-checker > .components-notice { margin: 0; } +/** + * Default block appender. + * + * This component shows up in 3 places: + * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph + * - on the right, inside empty paragraphs + * - absolute positioned and blue inside nesting containers + */ .block-editor-default-block-appender { clear: both; margin-right: auto; @@ -2043,62 +1990,252 @@ display: none; } -.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, -.block-editor-default-block-appender .block-editor-inserter { +.block-editor-default-block-appender .block-editor-inserter, +.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { position: absolute; top: 0; - height: 32px; -} -.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle, -.block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle { - margin-left: 0; -} - -.block-editor-block-list__empty-block-inserter, -.block-editor-default-block-appender .block-editor-inserter { - left: 8px; -} -@media (min-width: 600px) { - .block-editor-block-list__empty-block-inserter, -.block-editor-default-block-appender .block-editor-inserter { - display: flex; - height: 100%; - } -} -.block-editor-block-list__empty-block-inserter:disabled, -.block-editor-default-block-appender .block-editor-inserter:disabled { + left: 0; + line-height: 0; +} +.block-editor-default-block-appender .block-editor-inserter:disabled, +.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled { + display: none; +} + +/** + * Fixed position appender. + * These styles apply to all in-canvas inserters that exist inside nesting containers. + */ +.block-editor-block-list__block .block-list-appender { + position: absolute; + list-style: none; + padding: 0; + z-index: 2; + bottom: 0; + left: 0; +} +.block-editor-block-list__block .block-list-appender.block-list-appender { + margin: 0; + line-height: 0; +} +.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender { + height: 24px; +} +.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon, +.block-editor-block-list__block .block-list-appender .block-list-appender__toggle { + flex-direction: row; + box-shadow: none; + height: 24px; + width: 24px; + display: none; + padding: 0 !important; + background: #1e1e1e; + color: #fff; +} +.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover, +.block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover { + color: #fff; + background: var(--wp-admin-theme-color); +} +.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content { display: none; } - -.block-editor-duotone-control__popover .components-popover__content { - border: 1px solid #1e1e1e; - min-width: 214px; -} -.block-editor-duotone-control__popover .components-circular-option-picker { - padding: 12px; +.block-editor-block-list__block .block-list-appender:only-child { + position: relative; + left: auto; + align-self: center; + list-style: none; + line-height: inherit; +} +.block-editor-block-list__block .block-list-appender:only-child .block-editor-default-block-appender__content { + display: block; +} + +.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon, +.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle, +.block-editor-block-list__block.is-selected > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon, +.block-editor-block-list__block.is-selected > .block-list-appender .block-list-appender__toggle { + display: flex; +} + +.block-editor-default-block-appender__content { + cursor: text; +} + +.block-editor-date-format-picker { + margin-bottom: 16px; +} + +.block-editor-date-format-picker__default-format-toggle-control__hint { + color: #757575; + display: block; +} + +.block-editor-date-format-picker__custom-format-select-control.components-base-control { + margin-bottom: 0; +} +.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button { + width: 100%; +} + +.block-editor-date-format-picker__custom-format-select-control__custom-option { + border-top: 1px solid #ddd; +} +.block-editor-date-format-picker__custom-format-select-control__custom-option.has-hint { + grid-template-columns: auto 30px; +} +.block-editor-date-format-picker__custom-format-select-control__custom-option .components-custom-select-control__item-hint { + grid-row: 2; + text-align: right; +} + +.block-editor-duotone-control__popover > .components-popover__content > div { + padding: 16px; + width: 280px; } .block-editor-duotone-control__popover .components-menu-group__label { - padding: 12px 12px 0 12px; - width: 100%; - box-sizing: border-box; -} - -.block-editor-duotone-control__popover > .components-popover__content { - width: 334px; + padding: 0; +} +.block-editor-duotone-control__popover .components-custom-gradient-picker__gradient-bar { + margin: 16px 0 12px; +} +.block-editor-duotone-control__popover .components-circular-option-picker__swatches { + display: grid; + grid-template-columns: repeat(6, 28px); + gap: 12px; + justify-content: space-between; +} + +.block-editor-duotone-control__description { + margin: 16px 0; + font-size: 12px; } .block-editor-duotone-control__popover:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content { margin-right: -14px; } -.components-font-appearance-control__select { +.components-font-appearance-control { margin-bottom: 24px; } -.components-font-appearance-control__select ul li { +.components-font-appearance-control ul li { color: #1e1e1e; text-transform: capitalize; } +.block-editor-image-size-control { + margin-bottom: 1em; +} +.block-editor-image-size-control .block-editor-image-size-control__row { + display: flex; + justify-content: space-between; +} +.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width, +.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height { + margin-bottom: 0.5em; +} +.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input, +.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input { + line-height: 1.25; +} +.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width { + margin-left: 5px; +} +.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height { + margin-right: 5px; +} + +.block-editor-block-list__layout.has-overlay::after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 60; +} + +.block-editor-block-types-list__list-item { + display: block; + width: 33.33%; + padding: 0; + margin: 0; +} + +.components-button.block-editor-block-types-list__item { + display: flex; + flex-direction: column; + width: 100%; + font-size: 13px; + color: #1e1e1e; + padding: 8px; + align-items: stretch; + justify-content: center; + cursor: pointer; + background: transparent; + word-break: break-word; + border-radius: 2px; + transition: all 0.05s ease-in-out; + position: relative; + height: auto; +} +@media (prefers-reduced-motion: reduce) { + .components-button.block-editor-block-types-list__item { + transition-duration: 0s; + transition-delay: 0s; + } +} +.components-button.block-editor-block-types-list__item:disabled { + opacity: 0.6; + cursor: default; +} +.components-button.block-editor-block-types-list__item:not(:disabled):hover { + color: var(--wp-admin-theme-color) !important; +} +.components-button.block-editor-block-types-list__item:not(:disabled):focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} +.components-button.block-editor-block-types-list__item:not(:disabled).is-active { + color: #fff; + background: #1e1e1e; + outline: 2px solid transparent; + outline-offset: -2px; +} + +.block-editor-block-types-list__item-icon { + padding: 12px 20px; + border-radius: 2px; + color: #1e1e1e; + transition: all 0.05s ease-in-out; +} +@media (prefers-reduced-motion: reduce) { + .block-editor-block-types-list__item-icon { + transition-duration: 0s; + transition-delay: 0s; + } +} +.block-editor-block-types-list__item-icon .block-editor-block-icon { + margin-right: auto; + margin-left: auto; +} +.block-editor-block-types-list__item-icon svg { + transition: all 0.15s ease-out; +} +@media (prefers-reduced-motion: reduce) { + .block-editor-block-types-list__item-icon svg { + transition-duration: 0s; + transition-delay: 0s; + } +} +.block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon { + cursor: grab; +} + +.block-editor-block-types-list__item-title { + padding: 4px 2px 8px; + font-size: 12px; +} + .items-justified-left { justify-content: flex-start; } @@ -2115,6 +2252,17 @@ justify-content: space-between; } +@keyframes loadingpulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} .block-editor-link-control { position: relative; min-width: 360px; @@ -2129,7 +2277,27 @@ position: relative; } -.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] { +.block-editor-link-control__search-input-container { + position: relative; +} + +.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input { + flex: 1; +} + +.block-editor-link-control__field { + margin: 16px; +} +.block-editor-link-control__field > .components-base-control__field { + display: flex; + align-items: center; + margin: 0; +} +.block-editor-link-control__field .components-base-control__label { + margin-left: 16px; + margin-bottom: 0; +} +.block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; padding: 6px 8px; box-shadow: 0 0 0 transparent; @@ -2144,42 +2312,39 @@ display: block; padding: 11px 16px; padding-left: 36px; - margin: 16px; + margin: 0; position: relative; border: 1px solid #ddd; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { - .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] { + .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input { transition-duration: 0s; transition-delay: 0s; } } @media (min-width: 600px) { - .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] { + .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input { font-size: 13px; /* Override core line-height. To be reviewed. */ line-height: normal; } } -.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:focus { +.block-editor-link-control__field input[type=text]:focus, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:focus { border-color: var(--wp-admin-theme-color); box-shadow: 0 0 0 1px var(--wp-admin-theme-color); outline: 2px solid transparent; } -.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-webkit-input-placeholder { +.block-editor-link-control__field input[type=text]::-webkit-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input::-webkit-input-placeholder { color: rgba(30, 30, 30, 0.62); } -.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-moz-placeholder { +.block-editor-link-control__field input[type=text]::-moz-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input::-moz-placeholder { opacity: 1; color: rgba(30, 30, 30, 0.62); } -.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:-ms-input-placeholder { +.block-editor-link-control__field input[type=text]:-ms-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:-ms-input-placeholder { color: rgba(30, 30, 30, 0.62); } -.block-editor-link-control .block-editor-link-control__search-input .components-base-control__field { - margin-bottom: 0; -} .block-editor-link-control__search-error { margin: -8px 16px 16px; @@ -2192,14 +2357,13 @@ * when suggestions are rendered. * * Compensate for: - * - Input margin ($grid-unit-20) * - Border (1px) * - Vertically, for the difference in height between the input (40px) and * the icon buttons. * - Horizontally, pad to the minimum of: default input padding, or the * equivalent of the vertical padding. */ - top: 19px; + top: 3px; left: 19px; } @@ -2250,7 +2414,7 @@ .block-editor-link-control__search-item { position: relative; display: flex; - align-items: center; + align-items: flex-start; font-size: 13px; cursor: pointer; background: #fff; @@ -2258,11 +2422,14 @@ border: none; text-align: right; padding: 12px 16px; - border-radius: 5px; + border-radius: 2px; height: auto; } .block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus { - background-color: #ddd; + background-color: #f0f0f0; +} +.block-editor-link-control__search-item:hover .block-editor-link-control__search-item-type, .block-editor-link-control__search-item:focus .block-editor-link-control__search-item-type { + background: #fff; } .block-editor-link-control__search-item:focus:not(:disabled) { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset; @@ -2274,28 +2441,53 @@ background: #fff; } .block-editor-link-control__search-item.is-current { + flex-direction: column; background: transparent; border: 0; width: 100%; cursor: default; padding: 16px; - padding-right: 24px; } .block-editor-link-control__search-item .block-editor-link-control__search-item-header { display: block; + flex-direction: row; + align-items: flex-start; margin-left: 8px; - overflow: hidden; - white-space: nowrap; + white-space: pre-wrap; + overflow-wrap: break-word; +} +.block-editor-link-control__search-item .block-editor-link-control__search-item-header .block-editor-link-control__search-item-info { + word-break: break-all; +} +.block-editor-link-control__search-item.is-preview .block-editor-link-control__search-item-header { + display: flex; + flex: 1; +} +.block-editor-link-control__search-item.is-error .block-editor-link-control__search-item-header { + align-items: center; } .block-editor-link-control__search-item .block-editor-link-control__search-item-icon { - margin-left: 1em; - min-width: 24px; + position: relative; + top: 0.2em; + margin-left: 8px; + max-height: 24px; + flex-shrink: 0; + width: 24px; + display: flex; + justify-content: center; +} +.block-editor-link-control__search-item .block-editor-link-control__search-item-icon img { + width: 16px; +} +.block-editor-link-control__search-item.is-error .block-editor-link-control__search-item-icon { + top: 0; + width: 32px; + max-height: 32px; } .block-editor-link-control__search-item .block-editor-link-control__search-item-info, .block-editor-link-control__search-item .block-editor-link-control__search-item-title { overflow: hidden; text-overflow: ellipsis; - padding-left: 24px; } .block-editor-link-control__search-item .block-editor-link-control__search-item-info .components-external-link__icon, .block-editor-link-control__search-item .block-editor-link-control__search-item-title .components-external-link__icon { @@ -2311,25 +2503,114 @@ } .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark { font-weight: 700; - color: #000; + color: inherit; background-color: transparent; } .block-editor-link-control__search-item .block-editor-link-control__search-item-title span { font-weight: normal; } +.block-editor-link-control__search-item .block-editor-link-control__search-item-title svg { + display: none; +} .block-editor-link-control__search-item .block-editor-link-control__search-item-info { display: block; color: #757575; font-size: 0.9em; line-height: 1.3; } +.block-editor-link-control__search-item .block-editor-link-control__search-item-error-notice { + font-style: italic; + font-size: 1.1em; +} .block-editor-link-control__search-item .block-editor-link-control__search-item-type { display: block; - padding: 3px 8px; + padding: 3px 6px; margin-right: auto; font-size: 0.9em; background-color: #f0f0f0; border-radius: 2px; + white-space: nowrap; +} +.block-editor-link-control__search-item .block-editor-link-control__search-item-description { + padding-top: 12px; + margin: 0; +} +.block-editor-link-control__search-item .block-editor-link-control__search-item-description.is-placeholder { + margin-top: 12px; + padding-top: 0; + height: 28px; + display: flex; + flex-direction: column; + justify-content: space-around; +} +.block-editor-link-control__search-item .block-editor-link-control__search-item-description.is-placeholder::before, .block-editor-link-control__search-item .block-editor-link-control__search-item-description.is-placeholder::after { + display: block; + content: ""; + height: 0.7em; + width: 100%; + background-color: #f0f0f0; + border-radius: 3px; +} +.block-editor-link-control__search-item .block-editor-link-control__search-item-description .components-text { + font-size: 0.9em; +} +.block-editor-link-control__search-item .block-editor-link-control__search-item-image { + display: flex; + width: 100%; + background-color: #f0f0f0; + justify-content: center; + height: 140px; + max-height: 140px; + overflow: hidden; + border-radius: 2px; + margin-top: 12px; +} +.block-editor-link-control__search-item .block-editor-link-control__search-item-image.is-placeholder { + background-color: #f0f0f0; + border-radius: 3px; +} +.block-editor-link-control__search-item .block-editor-link-control__search-item-image img { + display: block; + max-width: 100%; + height: 140px; + max-height: 140px; +} + +.block-editor-link-control__search-item-top { + display: flex; + flex-direction: row; + width: 100%; +} + +.block-editor-link-control__search-item-bottom { + transition: opacity 1.5s; + width: 100%; +} + +.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-description::before, .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-description::after { + animation: loadingpulse 1s linear infinite; + animation-delay: 0.5s; +} +.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-image { + animation: loadingpulse 1s linear infinite; + animation-delay: 0.5s; +} +.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon svg, +.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon img { + opacity: 0; +} +.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon::before { + content: ""; + display: block; + background-color: #f0f0f0; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + border-radius: 100%; + animation: loadingpulse 1s linear infinite; + animation-delay: 0.5s; } .block-editor-link-control__loading { @@ -2354,14 +2635,36 @@ width: 100%; } +.block-editor-link-control__search-create { + align-items: center; +} +.block-editor-link-control__search-create .block-editor-link-control__search-item-title { + margin-bottom: 0; +} +.block-editor-link-control__search-create .block-editor-link-control__search-item-icon { + top: 0; +} + .block-editor-link-control__search-results div[role=menu] > .block-editor-link-control__search-item.block-editor-link-control__search-item { padding: 10px; } +.block-editor-link-control__tools { + display: flex; + align-items: center; + border-top: 1px solid #ddd; + margin: 0; + padding: 16px; +} + +.block-editor-link-control__unlink { + padding-right: 16px; + padding-left: 16px; +} + .block-editor-link-control__settings { - border-top: 1px solid #ddd; + flex: 1; margin: 0; - padding: 16px 24px; } .block-editor-link-control__settings :last-child { margin-bottom: 0; @@ -2388,16 +2691,10 @@ * Position spinner to the left of the actions. * * Compensate for: - * - Input margin ($grid-unit-20) - * - Border (1px) - * - Vertically, for the difference in height between the input (40px) - * and the spinner. - * - Horizontally, adjust for the width occupied by the icon buttons, - * then artificially create spacing that mimics as if the spinner - * were center-padded to the same width as an icon button. + * - Input padding right ($button-size) */ - top: 28px; - left: 62px; + top: calc(50% - 16px / 2); + left: 36px; } .block-editor-link-control__search-item-action { @@ -2405,173 +2702,446 @@ flex-shrink: 0; } -.block-editor-line-height-control { - margin-bottom: 24px; -} -.block-editor-line-height-control input { - display: block; - max-width: 60px; -} - -.block-editor-image-size-control { - margin-bottom: 1em; -} -.block-editor-image-size-control .block-editor-image-size-control__row { +.block-editor-list-view-tree { + width: 100%; + border-collapse: collapse; + padding: 0; + margin: 0; +} +.components-modal__content .block-editor-list-view-tree { + margin: -12px -6px 0; + width: calc(100% + 12px); +} + +.block-editor-list-view-leaf { + position: relative; +} +.block-editor-list-view-leaf.is-selected td { + background: var(--wp-admin-theme-color); +} +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon { + color: #fff; +} +.is-dragging-components-draggable .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents { + background: none; + color: #1e1e1e; +} +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after { + box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff; +} +.block-editor-list-view-leaf.is-dragging { + display: none; +} +.block-editor-list-view-leaf.is-first-selected td:first-child { + border-top-right-radius: 2px; +} +.block-editor-list-view-leaf.is-first-selected td:last-child { + border-top-left-radius: 2px; +} +.block-editor-list-view-leaf.is-last-selected td:first-child { + border-bottom-right-radius: 2px; +} +.block-editor-list-view-leaf.is-last-selected td:last-child { + border-bottom-left-radius: 2px; +} +.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) { + background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color)); +} +.block-editor-list-view-leaf.is-branch-selected.is-first-selected td:first-child { + border-top-right-radius: 2px; +} +.block-editor-list-view-leaf.is-branch-selected.is-first-selected td:last-child { + border-top-left-radius: 2px; +} +.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-first-selected td:first-child { + border-top-right-radius: 2px; +} +.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-first-selected td:last-child { + border-top-left-radius: 2px; +} +.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-last-selected td:first-child { + border-bottom-right-radius: 2px; +} +.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-last-selected td:last-child { + border-bottom-left-radius: 2px; +} +.block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td { + border-radius: 0; +} +.block-editor-list-view-leaf .block-editor-list-view-block-contents { display: flex; - justify-content: space-between; -} -.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width, -.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height { - margin-bottom: 0.5em; -} -.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input, -.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input { - line-height: 1.25; -} -.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width { - margin-left: 5px; -} -.block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height { - margin-right: 5px; -} - -.block-editor-block-list__layout.has-overlay::after { + align-items: center; + width: 100%; + height: auto; + padding: 6px 0 6px 12px; + text-align: right; + color: #1e1e1e; + border-radius: 2px; + position: relative; + white-space: nowrap; +} +.block-editor-list-view-leaf .block-editor-list-view-block-contents.is-dropping-before::before { content: ""; position: absolute; - top: -14px; - left: -14px; - bottom: -14px; - right: -14px; - z-index: 60; -} - -[data-align=full] .has-overlay::after { + pointer-events: none; + transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; + top: -2px; left: 0; right: 0; -} - -.block-editor-block-types-list__list-item { - display: block; - width: 33.33%; - padding: 0; - margin: 0; -} - -.components-button.block-editor-block-types-list__item { - display: flex; - flex-direction: column; - width: 100%; - font-size: 13px; - color: #1e1e1e; - padding: 8px; - align-items: stretch; - justify-content: center; - cursor: pointer; - background: transparent; - word-break: break-word; - border-radius: 2px; - border: 1px solid transparent; - transition: all 0.05s ease-in-out; - position: relative; - height: auto; + border-top: 4px solid var(--wp-admin-theme-color); +} +.components-modal__content .block-editor-list-view-leaf .block-editor-list-view-block-contents { + padding-right: 0; + padding-left: 0; +} +.block-editor-list-view-leaf .block-editor-list-view-block-contents:focus { + box-shadow: none; +} +.block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after { + content: ""; + position: absolute; + top: 0; + left: -29px; + bottom: 0; + right: 0; + border-radius: inherit; + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + z-index: 2; + pointer-events: none; +} +.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after { + box-shadow: none; +} +.block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after { + left: 0; +} +.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + z-index: 1; +} +.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus { + box-shadow: none; +} +.block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents { + opacity: 1; + animation: edit-post__fade-in-animation 0.2s ease-out 0s; + animation-fill-mode: forwards; } @media (prefers-reduced-motion: reduce) { - .components-button.block-editor-block-types-list__item { + .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents { + animation-duration: 1ms; + animation-delay: 0s; + } +} +.block-editor-list-view-leaf .block-editor-block-icon { + align-self: flex-start; + margin-left: 8px; + width: 24px; +} +.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell, +.block-editor-list-view-leaf .block-editor-list-view-block__contents-cell { + padding-top: 0; + padding-bottom: 0; +} +.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell { + line-height: 0; + width: 36px; + vertical-align: middle; +} +@media (prefers-reduced-motion: reduce) { + .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell { transition-duration: 0s; transition-delay: 0s; } } -.components-button.block-editor-block-types-list__item:disabled { - opacity: 0.6; - cursor: default; -} -.components-button.block-editor-block-types-list__item:not(:disabled):hover { - border-color: var(--wp-admin-theme-color); - color: var(--wp-admin-theme-color) !important; -} -.components-button.block-editor-block-types-list__item:not(:disabled).is-active { - color: #fff; - background: #1e1e1e; +.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * { + opacity: 0; +} +.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible { + position: relative; + z-index: 1; +} +.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * { + opacity: 1; + animation: edit-post__fade-in-animation 0.2s ease-out 0s; + animation-fill-mode: forwards; +} +@media (prefers-reduced-motion: reduce) { + .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * { + animation-duration: 1ms; + animation-delay: 0s; + } +} +.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell, +.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell, +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell .components-button.has-icon { + width: 24px; + min-width: 24px; + padding: 0; +} +.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell { + padding-left: 5px; +} +.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon { + height: 24px; +} +.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell-alignment-wrapper { + display: flex; + height: 100%; + flex-direction: column; + align-items: center; +} +.block-editor-list-view-leaf .block-editor-block-mover-button { + position: relative; + width: 36px; + height: 24px; +} +.block-editor-list-view-leaf .block-editor-block-mover-button svg { + position: relative; + height: 24px; +} +.block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button { + margin-top: -6px; + align-items: flex-end; +} +.block-editor-list-view-leaf .block-editor-block-mover-button.is-up-button svg { + bottom: -4px; +} +.block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button { + margin-bottom: -6px; + align-items: flex-start; +} +.block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg { + top: -4px; +} +.block-editor-list-view-leaf .block-editor-block-mover-button:focus:enabled { + box-shadow: none; + outline: none; +} +.block-editor-list-view-leaf .block-editor-block-mover-button:focus { + box-shadow: none; + outline: none; +} +.block-editor-list-view-leaf .block-editor-block-mover-button:focus::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff; outline: 2px solid transparent; - outline-offset: -2px; -} - -.block-editor-block-types-list__item-icon { - padding: 12px 20px; +} +.block-editor-list-view-leaf .block-editor-block-mover-button::before { + content: ""; + position: absolute; + display: block; border-radius: 2px; - color: #1e1e1e; - transition: all 0.05s ease-in-out; + height: 16px; + min-width: 100%; + right: 0; + left: 0; + animation: components-button__appear-animation 0.1s ease; + animation-fill-mode: forwards; } @media (prefers-reduced-motion: reduce) { - .block-editor-block-types-list__item-icon { + .block-editor-list-view-leaf .block-editor-block-mover-button::before { + animation-duration: 1ms; + animation-delay: 0s; + } +} +.block-editor-list-view-leaf .block-editor-inserter__toggle { + background: #1e1e1e; + color: #fff; + height: 24px; + margin: 6px 1px 6px 6px; + min-width: 24px; +} +.block-editor-list-view-leaf .block-editor-inserter__toggle:active { + color: #fff; +} +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor { + background: rgba(0, 0, 0, 0.1); + border-radius: 2px; + display: inline-block; + padding: 2px 6px; + margin: 0 8px; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; +} +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor { + background: rgba(0, 0, 0, 0.3); +} +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock { + line-height: 0; + width: 24px; + min-width: 24px; + margin-right: auto; + padding: 0; + vertical-align: middle; +} + +.block-editor-list-view-block-select-button__description, +.block-editor-list-view-appender__description { + display: none; +} + +.block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container, +.block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container, +.block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container, +.block-editor-list-view-appender__cell .block-editor-list-view-appender__container { + display: flex; +} + +.block-editor-list-view__expander { + height: 24px; + margin-right: 4px; + width: 24px; +} + +.block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander { + margin-right: 220px; +} + +.block-editor-list-view-leaf:not([aria-level="1"]) .block-editor-list-view__expander { + margin-left: 4px; +} + +.block-editor-list-view-leaf[aria-level="1"] .block-editor-list-view__expander { + margin-right: 0px; +} + +.block-editor-list-view-leaf[aria-level="2"] .block-editor-list-view__expander { + margin-right: 24px; +} + +.block-editor-list-view-leaf[aria-level="3"] .block-editor-list-view__expander { + margin-right: 52px; +} + +.block-editor-list-view-leaf[aria-level="4"] .block-editor-list-view__expander { + margin-right: 80px; +} + +.block-editor-list-view-leaf[aria-level="5"] .block-editor-list-view__expander { + margin-right: 108px; +} + +.block-editor-list-view-leaf[aria-level="6"] .block-editor-list-view__expander { + margin-right: 136px; +} + +.block-editor-list-view-leaf[aria-level="7"] .block-editor-list-view__expander { + margin-right: 164px; +} + +.block-editor-list-view-leaf[aria-level="8"] .block-editor-list-view__expander { + margin-right: 192px; +} + +.block-editor-list-view-leaf .block-editor-list-view__expander { + visibility: hidden; +} + +.block-editor-list-view-leaf[aria-expanded=true] .block-editor-list-view__expander svg { + visibility: visible; + transition: transform 0.2s ease; + transform: rotate(-90deg); +} +@media (prefers-reduced-motion: reduce) { + .block-editor-list-view-leaf[aria-expanded=true] .block-editor-list-view__expander svg { transition-duration: 0s; transition-delay: 0s; } } -.block-editor-block-types-list__item-icon .block-editor-block-icon { - margin-right: auto; - margin-left: auto; -} -.block-editor-block-types-list__item-icon svg { - transition: all 0.15s ease-out; + +.block-editor-list-view-leaf[aria-expanded=false] .block-editor-list-view__expander svg { + visibility: visible; + transform: rotate(0deg); + transition: transform 0.2s ease; } @media (prefers-reduced-motion: reduce) { - .block-editor-block-types-list__item-icon svg { + .block-editor-list-view-leaf[aria-expanded=false] .block-editor-list-view__expander svg { transition-duration: 0s; transition-delay: 0s; } } -.block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon { - cursor: grab; -} - -.block-editor-block-types-list__item-title { - padding: 4px 2px 8px; - font-size: 12px; + +.block-editor-list-view-drop-indicator { + pointer-events: none; +} +.block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line { + background: var(--wp-admin-theme-color); + height: 1px; +} + +.block-editor-list-view-drop-indicator:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content { + margin-right: 0; + border: none; + box-shadow: none; +} + +.block-editor-list-view-placeholder { + padding: 0; + margin: 0; + height: 36px; } .modal-open .block-editor-media-replace-flow__options { display: none; } -.block-editor-media-replace-flow__options .components-popover__content > div { - padding-top: 16px; -} - .block-editor-media-replace-flow__indicator { margin-right: 4px; } .block-editor-media-flow__url-input { border-top: 1px solid #1e1e1e; - margin-top: 12px; - margin-left: -12px; - margin-right: -12px; - padding: 12px 24px 0; + margin-top: 8px; + margin-left: -8px; + margin-right: -8px; + padding: 16px; } .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label { + display: block; top: 16px; + margin-bottom: 8px; } .block-editor-media-flow__url-input .block-editor-link-control { - margin-top: -16px; - width: auto; + width: 220px; +} +.block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input { + padding: 0; } .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field { margin-bottom: 0; } .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item-title { max-width: 180px; - margin-top: 16px; + white-space: nowrap; +} +.block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item-info { + white-space: nowrap; } .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item.is-current { width: auto; padding: 0; } .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] { - margin: 16px 0 0 0; + margin: 0; width: 100%; } .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions { + top: 0; left: 4px; } @@ -2600,6 +3170,7 @@ } .block-editor-media-placeholder__url-input-form input[type=url].block-editor-media-placeholder__url-input-field { width: 100%; + min-width: 200px; flex-grow: 1; border: none; border-radius: 0; @@ -2715,22 +3286,23 @@ word-wrap: normal !important; } +.rich-text [data-rich-text-placeholder] { + pointer-events: none; +} +.rich-text [data-rich-text-placeholder]::after { + content: attr(data-rich-text-placeholder); + opacity: 0.62; +} +.rich-text:focus { + outline: none; +} +.rich-text:focus [data-rich-text-format-boundary] { + border-radius: 2px; +} + .block-editor-rich-text__editable > p:first-child { margin-top: 0; } -.block-editor-rich-text__editable [data-rich-text-placeholder] { - pointer-events: none; -} -.block-editor-rich-text__editable [data-rich-text-placeholder]::after { - content: attr(data-rich-text-placeholder); - opacity: 0.62; -} -.block-editor-rich-text__editable:focus { - outline: none; -} -.block-editor-rich-text__editable:focus [data-rich-text-format-boundary] { - border-radius: 2px; -} figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before { opacity: 0.8; @@ -2802,10 +3374,6 @@ z-index: 100000; } -.block-editor-text-decoration-and-transform { - display: flex; -} - .block-editor-text-transform-control { flex: 0 0 50%; } @@ -2840,10 +3408,10 @@ .block-editor-tool-selector__help { margin-top: 8px; - margin-right: -12px; - margin-left: -12px; - margin-bottom: -12px; - padding: 12px 20px; + margin-right: -8px; + margin-left: -8px; + margin-bottom: -8px; + padding: 16px; border-top: 1px solid #ddd; color: #757575; min-width: 280px; @@ -2973,12 +3541,13 @@ @media (min-width: 600px) { .block-editor-url-input__suggestions, .block-editor-url-input .components-spinner { - display: inherit; + display: grid; } } .block-editor-url-input__suggestion { - padding: 4px 8px 8px 8px 12px; + min-height: 36px; + height: auto; color: #757575; display: block; font-size: 13px; @@ -3193,8 +3762,99 @@ font-size: 12px; } -#end-resizable-editor-section { - display: none; +.block-editor-hooks__flex-layout-justification-controls, +.block-editor-hooks__flex-layout-orientation-controls { + margin-bottom: 12px; +} +.block-editor-hooks__flex-layout-justification-controls legend, +.block-editor-hooks__flex-layout-orientation-controls legend { + margin-bottom: 8px; +} + +.border-block-support-panel .single-column { + grid-column: span 1; +} + +.dimensions-block-support-panel .single-column { + grid-column: span 1; +} + +.typography-block-support-panel .components-font-appearance-control, +.typography-block-support-panel .components-font-size-picker__controls, +.typography-block-support-panel .block-editor-text-decoration-control__buttons, +.typography-block-support-panel .block-editor-text-transform-control__buttons { + margin-bottom: 0; +} +.typography-block-support-panel .single-column { + grid-column: span 1; +} + +.color-block-support-panel { + /* Increased specificity required to remove the slot wrapper's row gap */ + /** + * The following styles replicate the separated border of the + * `ItemGroup` component but allows for hidden items. This is because + * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem` + * must at least render a placeholder which would otherwise interfere + * with the `:last-child` styles. + */ + /** + * The following few styles fix the layout and spacing for the due to the + * introduced wrapper element by the `Item` component. + */ +} +.color-block-support-panel .block-editor-contrast-checker { + /** + * Contrast checkers are forced to the bottom of the panel so all + * injected color controls can appear as a single item group without + * the contrast checkers suddenly appearing between items. + */ + order: 9999; + grid-column: span 2; + margin-top: 16px; +} +.color-block-support-panel .block-editor-contrast-checker .components-notice__content { + margin-left: 0; +} +.color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper { + row-gap: 0; +} +.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item { + padding: 0; + border-right: 1px solid rgba(0, 0, 0, 0.1); + border-left: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} +.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first { + border-top-right-radius: 2px; + border-top-left-radius: 2px; + border-top: 1px solid rgba(0, 0, 0, 0.1); +} +.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.last { + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; +} +.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div, +.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div > button { + border-radius: inherit; +} +.color-block-support-panel .block-editor-panel-color-gradient-settings__color-indicator { + background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%); +} +.color-block-support-panel .block-editor-tools-panel-color-dropdown { + display: block; + padding: 0; +} +.color-block-support-panel .block-editor-tools-panel-color-dropdown > button { + height: 46px; +} +.color-block-support-panel .block-editor-tools-panel-color-dropdown > button.is-open { + background: #f0f0f0; + color: var(--wp-admin-theme-color); +} +.color-block-support-panel .color-block-support-panel__item-group > div { + grid-column: span 2; + border-radius: inherit; } /** @@ -3204,8 +3864,9 @@ display: flex; flex-grow: 1; width: 100%; - overflow: auto; position: relative; + overflow-y: hidden; + overflow-x: auto; transition: border-color 0.1s linear, box-shadow 0.1s linear; } @media (prefers-reduced-motion: reduce) { @@ -3265,13 +3926,15 @@ width: 24px !important; margin: 0 !important; } -.block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle:focus::before, -.block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon:focus::before { - left: 4px !important; -} .block-editor-block-toolbar__block-controls .block-editor-block-mover { margin-right: -6px; } +.block-editor-block-toolbar__block-controls .block-editor-block-lock-toolbar { + margin-right: -6px !important; +} +.block-editor-block-toolbar__block-controls .components-toolbar-group { + padding: 0; +} .block-editor-block-toolbar .components-toolbar-group, .block-editor-block-toolbar .components-toolbar, @@ -3316,10 +3979,6 @@ width: 0 !important; height: 0 !important; } -.show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle:focus::before, -.show-icon-labels .block-editor-block-switcher__no-switcher-icon:focus::before { - left: 4px !important; -} .show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon { width: 0; } @@ -3369,6 +4028,10 @@ } } +.block-editor-inserter__content { + position: relative; +} + .block-editor-inserter__popover.is-quick .components-popover__content { border: none; } @@ -3446,96 +4109,26 @@ } .block-editor-inserter__search { - padding: 16px; + background: #fff; + padding: 16px 16px 0 16px; position: sticky; top: 0; - background: #fff; z-index: 1; } -.block-editor-inserter__search input[type=search].block-editor-inserter__search-input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - padding: 6px 8px; - box-shadow: 0 0 0 transparent; - transition: box-shadow 0.1s linear; - border-radius: 2px; - border: 1px solid #757575; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: 16px; - /* Override core line-height. To be reviewed. */ - line-height: normal; - display: block; - padding: 16px 16px 16px 48px; - background: #f0f0f0; - border: none; - width: 100%; - height: 48px; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: 16px; -} -@media (prefers-reduced-motion: reduce) { - .block-editor-inserter__search input[type=search].block-editor-inserter__search-input { - transition-duration: 0s; - transition-delay: 0s; - } -} -@media (min-width: 600px) { - .block-editor-inserter__search input[type=search].block-editor-inserter__search-input { - font-size: 13px; - /* Override core line-height. To be reviewed. */ - line-height: normal; - } -} -.block-editor-inserter__search input[type=search].block-editor-inserter__search-input:focus { - border-color: var(--wp-admin-theme-color); - box-shadow: 0 0 0 1px var(--wp-admin-theme-color); - outline: 2px solid transparent; -} -.block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-input-placeholder { - color: rgba(30, 30, 30, 0.62); -} -.block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-moz-placeholder { - opacity: 1; - color: rgba(30, 30, 30, 0.62); -} -.block-editor-inserter__search input[type=search].block-editor-inserter__search-input:-ms-input-placeholder { - color: rgba(30, 30, 30, 0.62); -} -@media (min-width: 600px) { - .block-editor-inserter__search input[type=search].block-editor-inserter__search-input { - font-size: 13px; - } -} -.block-editor-inserter__search input[type=search].block-editor-inserter__search-input:focus { - background: #fff; - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); -} -.block-editor-inserter__search input[type=search].block-editor-inserter__search-input::placeholder { - color: #757575; -} -.block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-decoration, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-cancel-button, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-results-button, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-results-decoration { - -webkit-appearance: none; -} - -.block-editor-inserter__search-icon { - position: absolute; - top: 0; +.block-editor-inserter__search .components-search-control__icon { left: 20px; - bottom: 0; - display: flex; - align-items: center; -} -.block-editor-inserter__search-icon > svg { - margin: 8px; +} +.block-editor-inserter__search .components-base-control__field { + margin-bottom: 0; } .block-editor-inserter__tabs { display: flex; flex-direction: column; - margin-top: -8px; } .block-editor-inserter__tabs .components-tab-panel__tabs { position: sticky; - top: 72px; + top: 64px; background: #fff; z-index: 1; border-bottom: 1px solid #ddd; @@ -3576,7 +4169,8 @@ } .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input { - line-height: 1.2; + height: 36px; + line-height: 36px; } .block-editor-inserter__panel-dropdown select { @@ -3588,10 +4182,6 @@ position: relative; } -.block-editor-inserter__popover .block-editor-block-types-list { - margin: -8px; -} - .block-editor-inserter__reusable-blocks-panel { position: relative; text-align: left; @@ -3604,7 +4194,6 @@ .block-editor-inserter__no-results { padding: 32px; - margin-top: 64px; text-align: center; } @@ -3706,6 +4295,12 @@ grid-template-columns: 1fr 1fr; grid-gap: 8px; } +.block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item { + margin-bottom: 0; +} +.block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-preview__container { + min-height: 100px; +} .block-editor-inserter__quick-inserter-separator { border-top: 1px solid #ddd; @@ -3729,8 +4324,59 @@ .block-editor-inserter__quick-inserter-expand.components-button:active { color: #ccc; } -.block-editor-inserter__quick-inserter-expand.components-button:focus:not(:disabled) { - box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 3px #fff; +.block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) { + box-shadow: none; + background: var(--wp-admin-theme-color); + border-color: var(--wp-admin-theme-color); +} + +.block-editor-block-patterns-explorer__sidebar { + position: absolute; + top: 60px; + right: 0; + bottom: 0; + width: 280px; + padding: 24px 32px 32px; + overflow-x: visible; + overflow-y: scroll; +} +.block-editor-block-patterns-explorer__sidebar__categories-list__item { + display: block; + width: 100%; + height: 48px; + text-align: right; +} +.block-editor-block-patterns-explorer__search { + margin-bottom: 32px; +} +.block-editor-block-patterns-explorer__search-results-count { + padding-bottom: 32px; +} +.block-editor-block-patterns-explorer__list { + margin-right: 248px; +} +.block-editor-block-patterns-explorer .block-editor-block-patterns-list { + display: grid; + grid-gap: 32px; + grid-template-columns: repeat(1, 1fr); +} +@media (min-width: 1080px) { + .block-editor-block-patterns-explorer .block-editor-block-patterns-list { + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 1440px) { + .block-editor-block-patterns-explorer .block-editor-block-patterns-list { + grid-template-columns: repeat(3, 1fr); + } +} +.block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item { + min-height: 240px; +} +.block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-preview__container { + height: inherit; + min-height: 100px; + max-height: 800px; } .block-editor-post-preview__dropdown { @@ -3792,8 +4438,11 @@ body.admin-color-light { --wp-admin-theme-color: #0085ba; + --wp-admin-theme-color--rgb: 0, 133, 186; --wp-admin-theme-color-darker-10: #0073a1; + --wp-admin-theme-color-darker-10--rgb: 0, 115, 161; --wp-admin-theme-color-darker-20: #006187; + --wp-admin-theme-color-darker-20--rgb: 0, 97, 135; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @@ -3804,8 +4453,11 @@ body.admin-color-modern { --wp-admin-theme-color: #3858e9; + --wp-admin-theme-color--rgb: 56, 88, 233; --wp-admin-theme-color-darker-10: #2145e6; + --wp-admin-theme-color-darker-10--rgb: 33, 69, 230; --wp-admin-theme-color-darker-20: #183ad6; + --wp-admin-theme-color-darker-20--rgb: 24, 58, 214; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @@ -3816,8 +4468,11 @@ body.admin-color-blue { --wp-admin-theme-color: #096484; + --wp-admin-theme-color--rgb: 9, 100, 132; --wp-admin-theme-color-darker-10: #07526c; + --wp-admin-theme-color-darker-10--rgb: 7, 82, 108; --wp-admin-theme-color-darker-20: #064054; + --wp-admin-theme-color-darker-20--rgb: 6, 64, 84; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @@ -3828,8 +4483,11 @@ body.admin-color-coffee { --wp-admin-theme-color: #46403c; + --wp-admin-theme-color--rgb: 70, 64, 60; --wp-admin-theme-color-darker-10: #383330; + --wp-admin-theme-color-darker-10--rgb: 56, 51, 48; --wp-admin-theme-color-darker-20: #2b2724; + --wp-admin-theme-color-darker-20--rgb: 43, 39, 36; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @@ -3840,8 +4498,11 @@ body.admin-color-ectoplasm { --wp-admin-theme-color: #523f6d; + --wp-admin-theme-color--rgb: 82, 63, 109; --wp-admin-theme-color-darker-10: #46365d; + --wp-admin-theme-color-darker-10--rgb: 70, 54, 93; --wp-admin-theme-color-darker-20: #3a2c4d; + --wp-admin-theme-color-darker-20--rgb: 58, 44, 77; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @@ -3852,8 +4513,11 @@ body.admin-color-midnight { --wp-admin-theme-color: #e14d43; + --wp-admin-theme-color--rgb: 225, 77, 67; --wp-admin-theme-color-darker-10: #dd382d; + --wp-admin-theme-color-darker-10--rgb: 221, 56, 45; --wp-admin-theme-color-darker-20: #d02c21; + --wp-admin-theme-color-darker-20--rgb: 208, 44, 33; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @@ -3864,8 +4528,11 @@ body.admin-color-ocean { --wp-admin-theme-color: #627c83; + --wp-admin-theme-color--rgb: 98, 124, 131; --wp-admin-theme-color-darker-10: #576e74; + --wp-admin-theme-color-darker-10--rgb: 87, 110, 116; --wp-admin-theme-color-darker-20: #4c6066; + --wp-admin-theme-color-darker-20--rgb: 76, 96, 102; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @@ -3876,8 +4543,11 @@ body.admin-color-sunrise { --wp-admin-theme-color: #dd823b; + --wp-admin-theme-color--rgb: 221, 130, 59; --wp-admin-theme-color-darker-10: #d97426; + --wp-admin-theme-color-darker-10--rgb: 217, 116, 38; --wp-admin-theme-color-darker-20: #c36922; + --wp-admin-theme-color-darker-20--rgb: 195, 105, 34; --wp-admin-border-width-focus: 2px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {