diff options
Diffstat (limited to 'wp-includes/css/dist/block-editor/style.css')
| -rw-r--r-- | wp-includes/css/dist/block-editor/style.css | 738 |
1 files changed, 348 insertions, 390 deletions
diff --git a/wp-includes/css/dist/block-editor/style.css b/wp-includes/css/dist/block-editor/style.css index a68e58b..2c2b95c 100644 --- a/wp-includes/css/dist/block-editor/style.css +++ b/wp-includes/css/dist/block-editor/style.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; :root{ --wp-admin-theme-color:#007cba; --wp-admin-theme-color--rgb:0, 124, 186; @@ -9,7 +8,7 @@ --wp-admin-border-width-focus:2px; --wp-block-synced-color:#7a00df; --wp-block-synced-color--rgb:122, 0, 223; - --wp-bound-block-color:#9747ff; + --wp-bound-block-color:var(--wp-block-synced-color); } @media (min-resolution:192dpi){ :root{ @@ -35,34 +34,14 @@ margin-top:0; } -.block-editor-block-bindings-toolbar-indicator{ - align-items:center; - display:inline-flex; - height:48px; - padding:6px; -} -.block-editor-block-bindings-toolbar-indicator svg g{ - stroke:var(--wp-bound-block-color); - fill:#0000; - stroke-width:1.5; - stroke-linecap:round; - stroke-linejoin:round; -} - iframe[name=editor-canvas]{ + background-color:initial; + box-sizing:border-box; display:block; height:100%; width:100%; } -iframe[name=editor-canvas]:not(.has-editor-padding){ - background-color:#fff; -} - -iframe[name=editor-canvas].has-editor-padding{ - padding:24px 24px 0; -} - .block-editor-block-icon{ align-items:center; display:flex; @@ -252,8 +231,8 @@ iframe[name=editor-canvas].has-editor-padding{ } } .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar,.components-popover.block-editor-block-list__block-popover .block-editor-block-list__block-selection-button{ - margin-bottom:12px; - margin-top:12px; + margin-bottom:8px; + margin-top:8px; pointer-events:all; } .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar{ @@ -312,6 +291,14 @@ iframe[name=editor-canvas].has-editor-padding{ display:none; } +.components-popover.block-editor-block-popover__inbetween .block-editor-button-pattern-inserter__button{ + left:50%; + pointer-events:all; + position:absolute; + top:50%; + transform:translateX(-50%) translateY(-50%); +} + .block-editor-block-lock-modal{ z-index:1000001; } @@ -436,10 +423,6 @@ iframe[name=editor-canvas].has-editor-padding{ padding:16px; } -.block-editor-block-card__content{ - flex-grow:1; -} - .block-editor-block-card__title{ font-weight:500; } @@ -450,13 +433,6 @@ iframe[name=editor-canvas].has-editor-padding{ padding:3px 0; } -.block-editor-block-card__description{ - display:block; - font-size:13px; - line-height:1.4; - margin-top:4px; -} - .block-editor-block-card .block-editor-block-icon{ flex:0 0 24px; height:24px; @@ -683,7 +659,7 @@ iframe[name=editor-canvas].has-editor-padding{ outline:none; } .components-button.block-editor-block-mover-button:focus-visible:before{ - box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + 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 #0000; } @@ -701,7 +677,7 @@ iframe[name=editor-canvas].has-editor-padding{ .block-editor-block-patterns-list__list-item{ cursor:pointer; - margin-bottom:24px; + margin-bottom:16px; position:relative; } .block-editor-block-patterns-list__list-item.is-placeholder{ @@ -716,30 +692,41 @@ iframe[name=editor-canvas].has-editor-padding{ scroll-margin-bottom:56px; scroll-margin-top:24px; } +.block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title{ + flex-grow:1; + font-size:12px; + text-align:left; +} .block-editor-block-patterns-list__item .block-editor-block-preview__container{ align-items:center; - border-radius:4px; + border-radius:2px; display:flex; overflow:hidden; } -.block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title{ - flex-grow:1; - text-align:left; +.block-editor-block-patterns-list__item .block-editor-block-preview__container:after{ + border-radius:2px; + outline:1px solid #0000001a; + outline-offset:-1px; } -.block-editor-block-patterns-list__item:hover .block-editor-block-preview__container{ - box-shadow:0 0 0 2px #1e1e1e; +.block-editor-block-patterns-list__item:hover:not(:focus) .block-editor-block-preview__container:after{ + outline-color:#0000004d; } -.block-editor-block-patterns-list__item:focus .block-editor-block-preview__container{ - box-shadow:0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(var(--wp-admin-border-width-focus)*2) #1e1e1e; - outline:2px solid #0000; - outline-offset:2px; +.block-editor-block-patterns-list__item:focus .block-editor-block-preview__container:after{ + outline-color:var(--wp-admin-theme-color); + outline-offset:calc(-1*var(--wp-admin-border-width-focus)); + outline-width:var(--wp-admin-border-width-focus); + transition:outline .1s linear; } -.block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:focus .block-editor-block-preview__container,.block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:hover .block-editor-block-preview__container{ - box-shadow:0 0 0 2px var(--wp-block-synced-color), 0 15px 25px #00000012; +@media (prefers-reduced-motion:reduce){ + .block-editor-block-patterns-list__item:focus .block-editor-block-preview__container:after{ + transition-delay:0s; + transition-duration:0s; + } } -.block-editor-block-patterns-list__item .block-editor-patterns__pattern-details{ +.block-editor-block-patterns-list__item .block-editor-patterns__pattern-details:not(:empty){ align-items:center; margin-top:8px; + padding-bottom:4px; } .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper{ height:24px; @@ -845,14 +832,6 @@ iframe[name=editor-canvas].has-editor-padding{ z-index:1000001; } -.block-editor-block-settings-menu__popover .components-dropdown-menu__menu{ - padding:0; -} - -.block-editor-block-styles+.default-style-picker__default-switcher{ - margin-top:16px; -} - .block-editor-block-styles__preview-panel{ display:none; z-index:90; @@ -890,7 +869,7 @@ iframe[name=editor-canvas].has-editor-padding{ color:#fff; } .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus,.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus{ - box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + 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 #0000; } .block-editor-block-styles__variants .block-editor-block-styles__item-text{ @@ -1061,6 +1040,11 @@ iframe[name=editor-canvas].has-editor-padding{ padding:6px 8px; } +.block-editor-block-switcher__binding-indicator{ + display:block; + padding:8px; +} + .block-editor-block-types-list>[role=presentation]{ display:flex; flex-wrap:wrap; @@ -1459,6 +1443,97 @@ iframe[name=editor-canvas].has-editor-padding{ font-family:Menlo,Consolas,monaco,monospace; } +.block-editor-global-styles-background-panel__inspector-media-replace-container{ + position:relative; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container .components-drop-zone__content-icon{ + display:none; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button{ + box-shadow:inset 0 0 0 1px #ccc; + color:#1e1e1e; + display:block; + height:40px; + width:100%; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:hover{ + color:var(--wp-admin-theme-color); +} +.block-editor-global-styles-background-panel__inspector-media-replace-container button.components-button:focus{ + box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} +.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-media-replace-title{ + text-align:start; + text-align-last:center; + white-space:normal; + word-break:break-all; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown{ + display:block; +} + +.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper{ + background:#fff; + display:block; + flex:none; + height:20px; + width:20px; +} + +.block-editor-global-styles-background-panel__inspector-image-indicator{ + background-size:cover; + border-radius:50%; + display:block; + height:20px; + position:relative; + width:20px; +} + +.block-editor-global-styles-background-panel__inspector-image-indicator:after{ + border:1px solid #0000; + border-radius:50%; + bottom:-1px; + box-shadow:inset 0 0 0 1px #0003; + box-sizing:inherit; + content:""; + left:-1px; + position:absolute; + right:-1px; + top:-1px; +} + +.block-editor-grid-visualizer{ + z-index:30 !important; +} + +.block-editor-grid-visualizer .components-popover__content *{ + pointer-events:none !important; +} + +.block-editor-grid-visualizer__grid{ + display:grid; +} + +.block-editor-grid-visualizer__item{ + border-radius:2px; + outline:1px solid #0000; +} + +.block-editor-grid-item-resizer{ + z-index:30 !important; +} + +.block-editor-grid-item-resizer .components-popover__content *{ + pointer-events:none !important; +} + +.block-editor-grid-item-resizer__box{ + border:1px solid var(--wp-admin-theme-color); +} +.block-editor-grid-item-resizer__box .components-resizable-box__handle{ + pointer-events:all !important; +} + .block-editor-height-control{ border:0; margin:0; @@ -1582,11 +1657,8 @@ iframe[name=editor-canvas].has-editor-padding{ padding:4px 2px 8px; } -.show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button.has-icon svg{ - display:none; -} -.show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button.has-icon:before{ - content:attr(aria-label); +.show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button{ + justify-content:center; } .block-editor-inspector-controls-tabs__hint{ @@ -1666,11 +1738,16 @@ iframe[name=editor-canvas].has-editor-padding{ content:attr(aria-label); } .show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top{ - gap:8px; + flex-wrap:wrap; + gap:4px; } .show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top .components-button.has-icon{ - min-width:inherit; - width:min-content; + padding:4px; + width:auto; +} +.show-icon-labels .block-editor-link-control .is-preview .block-editor-link-control__search-item-header{ + margin-right:0; + min-width:100%; } .block-editor-link-control__search-input-wrapper{ @@ -1743,10 +1820,6 @@ iframe[name=editor-canvas].has-editor-padding{ right:19px; top:3px; } -.block-editor-link-control__search-enter svg{ - position:relative; - top:-2px; -} .block-editor-link-control__search-actions{ padding:8px 16px 16px; @@ -1876,7 +1949,7 @@ iframe[name=editor-canvas].has-editor-padding{ box-shadow:none; } .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible{ - box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + 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 #0000; text-decoration:none; } @@ -1888,8 +1961,15 @@ iframe[name=editor-canvas].has-editor-padding{ .block-editor-link-control__search-item .block-editor-link-control__search-item-title span{ font-weight:400; } -.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-title .components-external-link__icon{ + height:1px; + margin:-1px; + overflow:hidden; + padding:0; + position:absolute; + width:1px; + clip:rect(0, 0, 0, 0); + border:0; } .block-editor-link-control__search-item-top{ @@ -2127,7 +2207,7 @@ iframe[name=editor-canvas].has-editor-padding{ } } .block-editor-list-view-leaf.is-displacement-up{ - transform:translateY(-36px); + transform:translateY(-32px); transition:transform .2s; } @media (prefers-reduced-motion:reduce){ @@ -2137,7 +2217,7 @@ iframe[name=editor-canvas].has-editor-padding{ } } .block-editor-list-view-leaf.is-displacement-down{ - transform:translateY(36px); + transform:translateY(32px); transition:transform .2s; } @media (prefers-reduced-motion:reduce){ @@ -2147,7 +2227,7 @@ iframe[name=editor-canvas].has-editor-padding{ } } .block-editor-list-view-leaf.is-after-dragged-blocks{ - transform:translateY(calc(var(--wp-admin--list-view-dragged-items-height, 36px)*-1)); + transform:translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px)*-1)); transition:transform .2s; } @media (prefers-reduced-motion:reduce){ @@ -2157,7 +2237,7 @@ iframe[name=editor-canvas].has-editor-padding{ } } .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up{ - transform:translateY(calc(-36px + var(--wp-admin--list-view-dragged-items-height, 36px)*-1)); + transform:translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px)*-1)); transition:transform .2s; } @media (prefers-reduced-motion:reduce){ @@ -2167,7 +2247,7 @@ iframe[name=editor-canvas].has-editor-padding{ } } .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down{ - transform:translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px)*-1)); + transform:translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px)*-1)); transition:transform .2s; } @media (prefers-reduced-motion:reduce){ @@ -2186,7 +2266,7 @@ iframe[name=editor-canvas].has-editor-padding{ align-items:center; border-radius:2px; display:flex; - height:auto; + height:32px; padding:6px 4px 6px 0; position:relative; text-align:left; @@ -2242,11 +2322,10 @@ iframe[name=editor-canvas].has-editor-padding{ } .block-editor-list-view-leaf .block-editor-block-icon{ flex:0 0 24px; - margin-right:8px; + margin-right:4px; } .block-editor-list-view-leaf .block-editor-list-view-block__contents-cell,.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell{ - padding-bottom:0; - padding-top:0; + padding: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; @@ -2315,8 +2394,9 @@ iframe[name=editor-canvas].has-editor-padding{ .block-editor-list-view-leaf .block-editor-inserter__toggle:active{ color:#fff; } -.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper{ - min-width:120px; +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg{ + left:2px; + position:relative; } .block-editor-list-view-leaf .block-editor-list-view-block-select-button__title{ flex:1; @@ -2378,16 +2458,11 @@ iframe[name=editor-canvas].has-editor-padding{ .block-editor-list-view__expander{ cursor:pointer; height:24px; - margin-left:4px; width:24px; } .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander{ - margin-left:220px; -} - -.block-editor-list-view-leaf:not([aria-level="1"]) .block-editor-list-view__expander{ - margin-right:4px; + margin-left:192px; } .block-editor-list-view-leaf[aria-level="1"] .block-editor-list-view__expander{ @@ -2399,27 +2474,27 @@ iframe[name=editor-canvas].has-editor-padding{ } .block-editor-list-view-leaf[aria-level="3"] .block-editor-list-view__expander{ - margin-left:52px; + margin-left:48px; } .block-editor-list-view-leaf[aria-level="4"] .block-editor-list-view__expander{ - margin-left:80px; + margin-left:72px; } .block-editor-list-view-leaf[aria-level="5"] .block-editor-list-view__expander{ - margin-left:108px; + margin-left:96px; } .block-editor-list-view-leaf[aria-level="6"] .block-editor-list-view__expander{ - margin-left:136px; + margin-left:120px; } .block-editor-list-view-leaf[aria-level="7"] .block-editor-list-view__expander{ - margin-left:164px; + margin-left:144px; } .block-editor-list-view-leaf[aria-level="8"] .block-editor-list-view__expander{ - margin-left:192px; + margin-left:168px; } .block-editor-list-view-leaf .block-editor-list-view__expander{ @@ -2468,7 +2543,7 @@ iframe[name=editor-canvas].has-editor-padding{ .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line{ background:rgba(var(--wp-admin-theme-color--rgb), .04); border-radius:4px; - height:36px; + height:32px; overflow:hidden; } .block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line--darker{ @@ -2476,7 +2551,7 @@ iframe[name=editor-canvas].has-editor-padding{ } .block-editor-list-view-placeholder{ - height:36px; + height:32px; margin:0; padding:0; } @@ -2495,19 +2570,7 @@ iframe[name=editor-canvas].has-editor-padding{ color:#fff; } -.list-view-appender__description{ - display:none; -} - -.block-editor-list-view-block-select-button__bindings svg g{ - stroke:var(--wp-bound-block-color); - fill:#0000; - stroke-width:1.5; - stroke-linecap:round; - stroke-linejoin:round; -} - -.modal-open .block-editor-media-replace-flow__options{ +.list-view-appender__description,.modal-open .block-editor-media-replace-flow__options{ display:none; } @@ -2631,8 +2694,7 @@ iframe[name=editor-canvas].has-editor-padding{ .block-editor-responsive-block-control .components-base-control__help{ border:0; clip:rect(1px, 1px, 1px, 1px); - -webkit-clip-path:inset(50%); - clip-path:inset(50%); + clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; @@ -2676,6 +2738,19 @@ iframe[name=editor-canvas].has-editor-padding{ content:attr(aria-label); } +.block-editor-segmented-text-control{ + border:0; + margin:0; + padding:0; +} +.block-editor-segmented-text-control .block-editor-segmented-text-control__buttons{ + display:flex; + padding:4px 0; +} +.block-editor-segmented-text-control .components-button.has-icon{ + margin-right:4px; +} + .block-editor-skip-to-selected-block{ position:absolute; top:-9999em; @@ -2696,38 +2771,6 @@ iframe[name=editor-canvas].has-editor-padding{ z-index:100000; } -.block-editor-text-decoration-control{ - border:0; - margin:0; - padding:0; -} -.block-editor-text-decoration-control .block-editor-text-decoration-control__buttons{ - display:flex; - padding:4px 0; -} -.block-editor-text-decoration-control .components-button.has-icon{ - height:32px; - margin-right:4px; - min-width:32px; - padding:0; -} - -.block-editor-text-transform-control{ - border:0; - margin:0; - padding:0; -} -.block-editor-text-transform-control .block-editor-text-transform-control__buttons{ - display:flex; - padding:4px 0; -} -.block-editor-text-transform-control .components-button.has-icon{ - height:32px; - margin-right:4px; - min-width:32px; - padding:0; -} - .block-editor-tool-selector__help{ border-top:1px solid #ddd; color:#757575; @@ -2968,9 +3011,8 @@ iframe[name=editor-canvas].has-editor-padding{ font-size:12px; } -.html-anchor-control .components-external-link{ - display:block; - margin-top:8px; +.components-panel__block-bindings-panel .components-item__block-bindings-source{ + color:#757575; } .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack{ flex-direction:row-reverse; @@ -2984,70 +3026,6 @@ iframe[name=editor-canvas].has-editor-padding{ margin-bottom:16px; } -.block-editor-hooks__background__inspector-media-replace-container{ - position:relative; -} -.block-editor-hooks__background__inspector-media-replace-container .components-drop-zone__content-icon{ - display:none; -} -.block-editor-hooks__background__inspector-media-replace-container button.components-button{ - box-shadow:inset 0 0 0 1px #ddd; - color:#1e1e1e; - display:block; - height:40px; - width:100%; -} -.block-editor-hooks__background__inspector-media-replace-container button.components-button:hover{ - color:var(--wp-admin-theme-color); -} -.block-editor-hooks__background__inspector-media-replace-container button.components-button:focus{ - box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); -} -.block-editor-hooks__background__inspector-media-replace-container .block-editor-hooks__background__inspector-media-replace-title{ - text-align:start; - text-align-last:center; - white-space:normal; - word-break:break-all; -} -.block-editor-hooks__background__inspector-media-replace-container .components-dropdown{ - display:block; -} - -.block-editor-hooks__background__inspector-image-indicator-wrapper{ - background:#fff linear-gradient(-45deg, #0000 48%, #ddd 0, #ddd 52%, #0000 0); - border-radius:50% !important; - box-shadow:inset 0 0 0 1px #0003; - display:block; - flex:none; - height:20px; - width:20px; -} -.block-editor-hooks__background__inspector-image-indicator-wrapper.has-image{ - background:#fff; -} - -.block-editor-hooks__background__inspector-image-indicator{ - background-size:cover; - border-radius:50%; - display:block; - height:20px; - position:relative; - width:20px; -} - -.block-editor-hooks__background__inspector-image-indicator:after{ - border:1px solid #0000; - border-radius:50%; - bottom:-1px; - box-shadow:inset 0 0 0 1px #0003; - box-sizing:inherit; - content:""; - left:-1px; - position:absolute; - right:-1px; - top:-1px; -} - .border-block-support-panel .single-column{ grid-column:span 1; } @@ -3109,19 +3087,6 @@ iframe[name=editor-canvas].has-editor-padding{ margin-bottom:16px; } -.block-editor__padding-visualizer{ - border-color:var(--wp-admin-theme-color); - border-style:solid; - bottom:0; - box-sizing:border-box; - left:0; - opacity:.5; - pointer-events:none; - position:absolute; - right:0; - top:0; -} - .block-editor-hooks__position-selection__select-control .components-custom-select-control__hint{ display:none; } @@ -3136,6 +3101,19 @@ iframe[name=editor-canvas].has-editor-padding{ text-align:left; } +.block-editor__spacing-visualizer{ + border-color:var(--wp-admin-theme-color); + border-style:solid; + bottom:0; + box-sizing:border-box; + left:0; + opacity:.5; + pointer-events:none; + position:absolute; + right:0; + top:0; +} + .typography-block-support-panel .single-column{ grid-column:span 1; } @@ -3167,7 +3145,7 @@ iframe[name=editor-canvas].has-editor-padding{ margin-bottom:-1px; margin-top:-1px; } -.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon,.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors{ +.block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon,.block-editor-block-toolbar.is-connected .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors,.block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon,.block-editor-block-toolbar.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors{ color:var(--wp-block-synced-color); } .block-editor-block-toolbar>:last-child,.block-editor-block-toolbar>:last-child .components-toolbar,.block-editor-block-toolbar>:last-child .components-toolbar-group{ @@ -3224,9 +3202,6 @@ iframe[name=editor-canvas].has-editor-padding{ .block-editor-block-contextual-toolbar .block-editor-block-toolbar>:last-child .components-toolbar-group:after,.block-editor-block-contextual-toolbar .block-editor-block-toolbar>:last-child .components-toolbar:after,.block-editor-block-contextual-toolbar .block-editor-block-toolbar>:last-child:after{ display:none; } -.block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar,.block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar-group{ - border-right-color:#e0e0e0; -} .block-editor-block-contextual-toolbar>.block-editor-block-toolbar{ flex-grow:0; width:auto; @@ -3238,13 +3213,15 @@ iframe[name=editor-canvas].has-editor-padding{ } .block-editor-block-contextual-toolbar .block-editor-block-parent-selector:after{ align-items:center; - content:"ยท"; + background-color:#1e1e1e; + border-radius:100%; + content:""; display:inline-flex; - font-size:16px; - height:32px; + height:2px; position:absolute; right:0; - top:0; + top:15px; + width:2px; } .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,.block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon{ @@ -3369,7 +3346,6 @@ iframe[name=editor-canvas].has-editor-padding{ flex-direction:column; gap:16px; height:100%; - overflow-y:hidden; position:relative; } .block-editor-inserter__main-area.show-as-tabs{ @@ -3405,7 +3381,7 @@ iframe[name=editor-canvas].has-editor-padding{ .block-editor-inserter__popover .block-editor-inserter__menu{ margin:-12px; } -.block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tabs div[role=tablist]{ +.block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tablist{ top:60px; } .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area{ @@ -3460,19 +3436,29 @@ iframe[name=editor-canvas].has-editor-padding{ flex-grow:1; overflow:hidden; } -.block-editor-inserter__tabs div[role=tablist]{ +.block-editor-inserter__tabs .block-editor-inserter__tablist-and-close-button{ border-bottom:1px solid #ddd; + display:flex; + justify-content:space-between; + padding-right:12px; } -.block-editor-inserter__tabs div[role=tablist] button[role=tab]{ - flex-grow:1; +.block-editor-inserter__tabs .block-editor-inserter__close-button{ + align-self:center; + order:1; +} +.block-editor-inserter__tabs .block-editor-inserter__tablist{ margin-bottom:-1px; + width:100%; } -.block-editor-inserter__tabs div[role=tablist] button[role=tab][id$=reusable]{ +.block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab]{ + flex-grow:1; +} +.block-editor-inserter__tabs .block-editor-inserter__tablist button[role=tab][id$=reusable]{ flex-grow:inherit; padding-left:16px; padding-right:16px; } -.block-editor-inserter__tabs div[role=tabpanel]{ +.block-editor-inserter__tabs .block-editor-inserter__tabpanel{ display:flex; flex-direction:column; flex-grow:1; @@ -3482,6 +3468,7 @@ iframe[name=editor-canvas].has-editor-padding{ .block-editor-inserter__no-tab-container{ flex-grow:1; overflow-y:auto; + position:relative; } .block-editor-inserter__panel-header{ @@ -3525,7 +3512,7 @@ iframe[name=editor-canvas].has-editor-padding{ width:100%; } -.block-editor-inserter__no-results{ +.block-editor-inserter__no-results,.block-editor-inserter__patterns-loading{ padding:32px; text-align:center; } @@ -3565,7 +3552,7 @@ iframe[name=editor-canvas].has-editor-padding{ display:block; } } -.block-editor-inserter__preview-container .block-editor-block-preview__container{ +.block-editor-inserter__preview-container .block-editor-inserter__media-list__list-item{ height:100%; } .block-editor-inserter__preview-container .block-editor-block-card{ @@ -3574,99 +3561,106 @@ iframe[name=editor-canvas].has-editor-padding{ padding-right:0; } -.block-editor-inserter__patterns-explore-button.components-button{ - justify-content:center; - margin-top:16px; +.block-editor-inserter__insertable-blocks-at-selection{ + border-bottom:1px solid #e0e0e0; +} + +.block-editor-inserter__block-patterns-tabs-container,.block-editor-inserter__media-tabs-container{ + display:flex; + flex-direction:column; + height:100%; + justify-content:space-between; padding:16px; - width:100%; } -.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category{ - color:var(--wp-admin-theme-color); +.block-editor-inserter__category-tablist{ + border:none; + display:flex; + flex-direction:column; + margin-bottom:8px; +} +.block-editor-inserter__category-tablist div[role=listitem]:last-child{ + margin-top:auto; +} +.block-editor-inserter__category-tablist .block-editor-inserter__category-tab{ + display:block; + font-weight:inherit; + height:auto; + padding:8px 4px 8px 12px; position:relative; + text-align:left; } -.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category .components-flex-item{ +.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true]{ + color:var(--wp-admin-theme-color); +} +.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true] .components-flex-item{ filter:brightness(.95); } -.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category svg{ +.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true] svg{ fill:var(--wp-admin-theme-color); } -.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category:after{ +.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true]:after{ background:var(--wp-admin-theme-color); border-radius:2px; bottom:0; content:""; + display:block; + height:100%; left:0; opacity:.04; + outline:none; position:absolute; right:0; top:0; } -.block-editor-inserter__block-patterns-tabs-container,.block-editor-inserter__block-patterns-tabs-container nav{ - height:100%; -} - -.block-editor-inserter__block-patterns-tabs{ - display:flex; - flex-direction:column; - height:100%; - overflow-y:auto; - padding:16px; -} -.block-editor-inserter__block-patterns-tabs div[role=listitem]:last-child{ - margin-top:auto; +.block-editor-inserter__category-tablist .block-editor-inserter__category-tab:focus-visible,.block-editor-inserter__category-tablist .block-editor-inserter__category-tab:focus:not(:disabled){ + border-radius:2px; + box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + outline:2px solid #0000; + outline-offset:0; } -.block-editor-inserter__block-patterns-tabs .block-editor-inserter__patterns-category{ - padding-right:4px; +.block-editor-inserter__category-tablist .block-editor-inserter__category-tab:after,.block-editor-inserter__category-tablist .block-editor-inserter__category-tab:before{ + display:none; } -.block-editor-inserter__patterns-category-dialog{ +.block-editor-inserter__category-panel{ background:#f0f0f0; - border-left:1px solid #e0e0e0; - border-right:1px solid #e0e0e0; - height:100%; + border-top:1px solid #e0e0e0; + box-shadow:1px 1px 0 0 rgba(0,0,0,.133); + display:flex; + flex-direction:column; + height:calc(100% + 1px); left:0; + outline:1px solid #0000; + padding:0 16px; position:absolute; - top:0; + top:-1px; width:100%; } @media (min-width:782px){ - .block-editor-inserter__patterns-category-dialog{ - display:block; + .block-editor-inserter__category-panel{ + border-left:1px solid #e0e0e0; left:100%; + padding:0; width:300px; } } -.block-editor-inserter__patterns-category-dialog .block-editor-block-patterns-list{ - flex-grow:1; - height:100%; - overflow-y:auto; - padding:16px 24px; +.block-editor-inserter__category-panel .block-editor-block-patterns-list,.block-editor-inserter__category-panel .block-editor-inserter__media-list{ + padding:0 24px 16px; } -.block-editor-block-patterns-list__list-item .block-editor-block-preview__container{ - box-shadow:0 15px 25px #00000012; +.block-editor-inserter__patterns-category-panel-header{ + padding:8px 24px; } -.block-editor-block-patterns-list__list-item:hover .block-editor-block-preview__container{ - box-shadow:0 0 0 2px #1e1e1e,0 15px 25px #00000012; + +.block-editor-inserter__patterns-category-no-results{ + margin-top:24px; } -.block-editor-inserter__patterns-category-panel{ - display:flex; - flex-direction:column; +.block-editor-block-patterns-list,.block-editor-inserter__media-list{ + flex-grow:1; height:100%; - padding:0 16px; -} -@media (min-width:782px){ - .block-editor-inserter__patterns-category-panel{ - padding:0; - } -} -.block-editor-inserter__patterns-category-panel .block-editor-inserter__patterns-category-panel-header{ - padding:16px 24px; -} -.block-editor-inserter__patterns-category-panel .block-editor-inserter__patterns-category-no-results{ - margin-top:24px; + overflow-y:auto; } .block-editor-inserter__preview-content{ @@ -3723,7 +3717,7 @@ iframe[name=editor-canvas].has-editor-padding{ .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{ +.block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item{ min-height:100px; } @@ -3803,87 +3797,23 @@ iframe[name=editor-canvas].has-editor-padding{ .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{ +.block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item{ height:inherit; max-height:800px; min-height:100px; } -.block-editor-inserter__patterns-category-panel-title{ - font-size:16.25px; -} -.block-editor-inserter__media-tabs-container,.block-editor-inserter__media-tabs-container nav{ - height:100%; +.components-heading.block-editor-inserter__patterns-category-panel-title{ + font-weight:500; } -.block-editor-inserter__media-tabs-container .block-editor-inserter__media-library-button{ + +.block-editor-inserter__media-library-button.components-button,.block-editor-inserter__patterns-explore-button.components-button{ justify-content:center; margin-top:16px; padding:16px; width:100%; } -.block-editor-inserter__media-tabs{ - display:flex; - flex-direction:column; - height:100%; - overflow-y:auto; - padding:16px; -} -.block-editor-inserter__media-tabs div[role=listitem]:last-child{ - margin-top:auto; -} -.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category{ - padding-right:4px; -} -.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected{ - color:var(--wp-admin-theme-color); - position:relative; -} -.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected .components-flex-item{ - filter:brightness(.95); -} -.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected svg{ - fill:var(--wp-admin-theme-color); -} -.block-editor-inserter__media-tabs .block-editor-inserter__media-tabs__media-category.is-selected:after{ - background:var(--wp-admin-theme-color); - border-radius:2px; - bottom:0; - content:""; - left:0; - opacity:.04; - position:absolute; - right:0; - top:0; -} - -.block-editor-inserter__media-dialog{ - background:#f0f0f0; - border-left:1px solid #e0e0e0; - border-right:1px solid #e0e0e0; - height:100%; - left:0; - overflow-y:auto; - padding:16px 24px; - position:absolute; - scrollbar-gutter:stable both-edges; - top:0; - width:100%; -} -@media (min-width:782px){ - .block-editor-inserter__media-dialog{ - display:block; - left:100%; - width:300px; - } -} -.block-editor-inserter__media-dialog .block-editor-block-preview__container{ - box-shadow:0 15px 25px #00000012; -} -.block-editor-inserter__media-dialog .block-editor-block-preview__container:hover{ - box-shadow:0 0 0 2px #1e1e1e,0 15px 25px #00000012; -} - .block-editor-inserter__media-panel{ display:flex; flex-direction:column; @@ -3902,61 +3832,65 @@ iframe[name=editor-canvas].has-editor-padding{ height:100%; justify-content:center; } +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search{ + padding:16px 24px 8px; +} .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within){ --wp-components-color-background:#fff; } -.block-editor-inserter__media-list{ - margin-top:16px; -} -.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item{ +.block-editor-inserter__media-list__list-item{ cursor:pointer; margin-bottom:24px; position:relative; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item.is-placeholder{ +.block-editor-inserter__media-list__list-item.is-placeholder{ min-height:100px; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item[draggable=true] .block-editor-block-preview__container{ +.block-editor-inserter__media-list__list-item[draggable=true] .block-editor-inserter__media-list__list-item{ cursor:grab; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview{ - box-shadow:0 0 0 2px #1e1e1e,0 15px 25px #00000012; +.block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview>*{ + outline-color:#0000004d; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options>button{ +.block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options>button{ display:block; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options{ +.block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options{ position:absolute; right:8px; top:8px; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options>button{ +.block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options>button{ background:#fff; border-radius:2px; display:none; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options>button.is-opened,.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options>button:focus{ +.block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options>button.is-opened,.block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options>button:focus{ display:block; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options>button:hover{ +.block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options>button:hover{ box-shadow:inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); outline:2px solid #0000; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__item{ + +.block-editor-inserter__media-list__item{ height:100%; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview{ +.block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview{ align-items:center; border-radius:2px; display:flex; overflow:hidden; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview>*{ +.block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview>*{ + border-radius:2px; margin:0 auto; max-width:100%; + outline:1px solid #0000001a; + outline-offset:-1px; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner{ +.block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner{ align-items:center; background:#ffffffb3; display:flex; @@ -3966,9 +3900,17 @@ iframe[name=editor-canvas].has-editor-padding{ position:absolute; width:100%; } -.block-editor-inserter__media-list .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview{ - box-shadow:inset 0 0 0 2px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - outline:2px solid #0000; +.block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview>*{ + outline-color:var(--wp-admin-theme-color); + outline-offset:calc(-1*var(--wp-admin-border-width-focus)); + outline-width:var(--wp-admin-border-width-focus); + transition:outline .1s linear; +} +@media (prefers-reduced-motion:reduce){ + .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview>*{ + transition-delay:0s; + transition-duration:0s; + } } .block-editor-inserter__media-list__item-preview-options__popover .components-menu-item__button .components-menu-item__item{ @@ -4022,6 +3964,22 @@ iframe[name=editor-canvas].has-editor-padding{ height:40px; } +.block-editor-inserter__pattern-panel-placeholder{ + display:none; +} + +.block-editor-inserter__menu.is-zoom-out{ + display:flex; +} +@media (min-width:782px){ + .block-editor-inserter__menu.is-zoom-out.show-panel:after{ + content:""; + display:block; + height:100%; + width:300px; + } +} + .spacing-sizes-control .spacing-sizes-control__custom-value-input,.spacing-sizes-control .spacing-sizes-control__label{ margin-bottom:0; } |