diff -r 48c4eec2b7e6 -r 8c2e4d02f4ef wp/wp-includes/css/dist/block-editor/style.css --- a/wp/wp-includes/css/dist/block-editor/style.css Fri Sep 05 18:40:08 2025 +0200 +++ b/wp/wp-includes/css/dist/block-editor/style.css Fri Sep 05 18:52:52 2025 +0200 @@ -22,6 +22,9 @@ .block-editor-autocompleters__block .block-editor-block-icon{ margin-right:8px; } +.block-editor-autocompleters__block[aria-selected=true] .block-editor-block-icon{ + color:inherit !important; +} .block-editor-autocompleters__link{ white-space:nowrap; @@ -30,17 +33,158 @@ margin-right:8px; } +.block-editor-global-styles-background-panel__inspector-media-replace-container{ + border:1px solid #ddd; + border-radius:2px; + grid-column:1 / -1; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container.is-open{ + background-color:#f0f0f0; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item{ + border:0; + flex-grow:1; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown{ + display:block; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container .block-editor-global-styles-background-panel__inspector-preview-inner{ + height:100%; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown{ + display:block; +} +.block-editor-global-styles-background-panel__inspector-media-replace-container .components-dropdown .block-editor-global-styles-background-panel__dropdown-toggle{ + height:40px; +} + +.block-editor-global-styles-background-panel__image-tools-panel-item{ + border:1px solid #ddd; + grid-column:1 / -1; + position:relative; +} +.block-editor-global-styles-background-panel__image-tools-panel-item .components-drop-zone__content-icon{ + display:none; +} +.block-editor-global-styles-background-panel__image-tools-panel-item .components-dropdown{ + display:block; +} +.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button{ + color:#1e1e1e; + display:block; + width:100%; +} +.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover{ + color:var(--wp-admin-theme-color); +} +.block-editor-global-styles-background-panel__image-tools-panel-item 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__image-tools-panel-item .block-editor-global-styles-background-panel__loading{ + height:100%; + padding:10px 0 0; + position:absolute; + width:100%; + z-index:1; +} +.block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading svg{ + margin:0; +} + +.block-editor-global-styles-background-panel__dropdown-toggle,.block-editor-global-styles-background-panel__image-preview-content{ + height:100%; + padding-left:12px; + width:100%; +} + +.block-editor-global-styles-background-panel__dropdown-toggle{ + background:#0000; + border:none; + cursor:pointer; +} + +.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-preview-inner .block-editor-global-styles-background-panel__inspector-image-indicator-wrapper{ + height:20px; + min-width:auto; + 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-global-styles-background-panel__dropdown-content-wrapper{ + min-width:260px; + overflow-x:hidden; +} +.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper{ + background-color:#f0f0f0; + border:1px solid #ddd; + border-radius:2px; + width:100%; +} +.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker__media--image{ + max-height:180px; +} +.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker:after{ + content:none; +} + +.modal-open .block-editor-global-styles-background-panel__popover{ + z-index:159890; +} + +.block-editor-global-styles-background-panel__media-replace-popover .components-popover__content{ + width:226px; +} +.block-editor-global-styles-background-panel__media-replace-popover .components-button{ + padding:0 8px; +} +.block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right{ + margin-left:16px; +} + .block-editor-block-alignment-control__menu-group .components-menu-item__info{ margin-top:0; } iframe[name=editor-canvas]{ - background-color:initial; + background-color:#ddd; box-sizing:border-box; display:block; height:100%; width:100%; } +@media not (prefers-reduced-motion){ + iframe[name=editor-canvas]{ + transition:all .4s cubic-bezier(.46, .03, .52, .96); + } +} .block-editor-block-icon{ align-items:center; @@ -72,11 +216,8 @@ font-size:13px; margin-bottom:1.5em; } -.block-editor-block-inspector .components-base-control{ - margin-bottom:24px; -} -.block-editor-block-inspector .components-base-control:last-child{ - margin-bottom:8px; +.block-editor-block-inspector .components-base-control:where(:not(:last-child)),.block-editor-block-inspector .components-radio-control:where(:not(:last-child)){ + margin-bottom:16px; } .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,.block-editor-block-inspector .components-query-controls .components-base-control,.block-editor-block-inspector .components-range-control .components-base-control{ margin-bottom:0; @@ -98,10 +239,6 @@ .block-editor-block-inspector__no-block-tools{ border-top:1px solid #ddd; } - -.block-editor-block-inspector__tab-item{ - flex:1 1 0px; -} .block-editor-block-list__insertion-point{ bottom:0; left:0; @@ -151,9 +288,18 @@ pointer-events:all; } +.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter{ + line-height:0; + position:absolute; + right:0; + top:0; +} +.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter:disabled{ + display:none; +} + .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon{ background:#1e1e1e; - border-radius:2px; color:#fff; height:24px; min-width:24px; @@ -170,59 +316,6 @@ .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover{ background:#1e1e1e; } -.block-editor-block-list__block-selection-button{ - background-color:#1e1e1e; - border-radius:2px; - display:inline-flex; - font-size:13px; - height:48px; - padding:0 12px; - z-index:22; -} -.block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content{ - align-items:center; - display:inline-flex; - margin:auto; -} -.block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content>.components-flex__item{ - margin-right:6px; -} -.block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle{ - cursor:grab; - height:24px; - margin-left:-2px; - min-width:24px; - padding:0; -} -.block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle svg{ - min-height:18px; - min-width:18px; -} -.block-editor-block-list__block-selection-button .block-editor-block-icon{ - color:#fff; - font-size:13px; - height:48px; -} -.block-editor-block-list__block-selection-button .components-button{ - color:#fff; - display:flex; - height:48px; - min-width:36px; -} -.block-editor-block-list__block-selection-button .components-button:focus{ - border:none; - box-shadow:none; -} -.block-editor-block-list__block-selection-button .components-button:active,.block-editor-block-list__block-selection-button .components-button[aria-disabled=true]:hover{ - color:#fff; -} -.block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button{ - padding:0; -} -.block-editor-block-list__block-selection-button .block-editor-block-mover{ - background:unset; - border:none; -} @keyframes hide-during-dragging{ to{ @@ -230,15 +323,13 @@ transform:translate(9999px, 9999px); } } -.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:8px; - margin-top:8px; - pointer-events:all; -} .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar{ border:1px solid #1e1e1e; border-radius:2px; + margin-bottom:8px; + margin-top:8px; overflow:visible; + pointer-events:all; position:static; width:auto; } @@ -254,13 +345,49 @@ .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar,.components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar-group{ border-right-color:#1e1e1e; } +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar{ + background-color:#1e1e1e; + color:#f0f0f0; +} +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar.block-editor-block-contextual-toolbar{ + border-color:#2f2f2f; +} +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button{ + color:#ddd; +} +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:hover{ + color:#fff; +} +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:focus:before{ + box-shadow:inset 0 0 0 1px #1e1e1e, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); +} +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button:disabled,.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar button[aria-disabled=true]{ + color:#757575; +} +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-parent-selector .block-editor-block-parent-selector__button{ + background-color:#1e1e1e; + border-color:#2f2f2f; +} +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .block-editor-block-switcher__toggle{ + color:#f0f0f0; +} +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar,.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .components-toolbar-group{ + border-right-color:#2f2f2f !important; +} +.components-popover.block-editor-block-list__block-popover .is-inverted-toolbar .is-pressed{ + color:var(--wp-admin-theme-color); +} .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible{ visibility:hidden; } .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover{ - animation:hide-during-dragging 1ms linear forwards; opacity:0; } +@media not (prefers-reduced-motion){ + .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover{ + animation:hide-during-dragging 1ms linear forwards; + } +} .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector{ left:-57px; position:absolute; @@ -308,14 +435,19 @@ } } +.block-editor-block-lock-modal__options legend{ + margin-bottom:16px; + padding:0; +} + .block-editor-block-lock-modal__checklist{ margin:0; } -.block-editor-block-lock-modal__options-title{ +.block-editor-block-lock-modal__options-all{ padding:12px 0; } -.block-editor-block-lock-modal__options-title .components-checkbox-control__label{ +.block-editor-block-lock-modal__options-all .components-checkbox-control__label{ font-weight:600; } @@ -340,7 +472,7 @@ .block-editor-block-lock-modal__template-lock{ border-top:1px solid #ddd; margin-top:16px; - padding:12px 0; + padding-top:16px; } .block-editor-block-lock-modal__actions{ @@ -380,37 +512,11 @@ display:none; } -.block-editor-block-breadcrumb__button.components-button{ - height:24px; - line-height:24px; - padding:0; - position:relative; -} -.block-editor-block-breadcrumb__button.components-button:hover:not(:disabled){ - box-shadow:none; - text-decoration:underline; -} -.block-editor-block-breadcrumb__button.components-button:focus{ - box-shadow:none; -} -.block-editor-block-breadcrumb__button.components-button:focus:before{ - border-radius:2px; - bottom:1px; - box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - content:""; - display:block; - left:1px; - outline:2px solid #0000; - position:absolute; - right:1px; - top:1px; -} - .block-editor-block-breadcrumb__current{ cursor:default; } -.block-editor-block-breadcrumb__button.components-button,.block-editor-block-breadcrumb__current{ +.block-editor-block-breadcrumb__button.block-editor-block-breadcrumb__button,.block-editor-block-breadcrumb__current{ color:#1e1e1e; font-size:inherit; padding:0 8px; @@ -424,12 +530,19 @@ } .block-editor-block-card__title{ + align-items:center; + display:flex; + flex-wrap:wrap; font-weight:500; + gap:4px 8px; } .block-editor-block-card__title.block-editor-block-card__title{ font-size:13px; line-height:1.4; margin:0; +} + +.block-editor-block-card__name{ padding:3px 0; } @@ -513,7 +626,7 @@ .block-editor-block-draggable-chip{ background-color:#1e1e1e; border-radius:2px; - box-shadow:0 6px 8px #0000004d; + box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005; color:#fff; cursor:grabbing; display:inline-flex; @@ -557,7 +670,11 @@ position:absolute; right:0; top:0; - transition:all .1s linear .1s; +} +@media not (prefers-reduced-motion){ + .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled{ + transition:all .1s linear .1s; + } } .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled .block-editor-block-draggable-chip__disabled-icon{ background:#0000 linear-gradient(-45deg, #0000 47.5%, #fff 0, #fff 52.5%, #0000 0); @@ -571,10 +688,84 @@ .block-draggable-invalid-drag-token .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled{ background-color:#757575; - box-shadow:0 4px 8px #0003; + box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005; opacity:1; } +.block-editor-block-manager__no-results{ + font-style:italic; + padding:24px 0; + text-align:center; +} + +.block-editor-block-manager__search{ + margin:16px 0; +} + +.block-editor-block-manager__disabled-blocks-count{ + background-color:#fff; + border:1px solid #ddd; + border-width:1px 0; + box-shadow:-32px 0 0 0 #fff,32px 0 0 0 #fff; + padding:8px; + position:sticky; + text-align:center; + top:-5px; + z-index:2; +} +.block-editor-block-manager__disabled-blocks-count~.block-editor-block-manager__results .block-editor-block-manager__category-title{ + top:31px; +} +.block-editor-block-manager__disabled-blocks-count .is-link{ + margin-left:12px; +} + +.block-editor-block-manager__category{ + margin:0 0 24px; +} + +.block-editor-block-manager__category-title{ + background-color:#fff; + padding:16px 0; + position:sticky; + top:-4px; + z-index:1; +} +.block-editor-block-manager__category-title .components-checkbox-control__label{ + font-weight:600; +} + +.block-editor-block-manager__checklist{ + margin-top:0; +} + +.block-editor-block-manager__category-title,.block-editor-block-manager__checklist-item{ + border-bottom:1px solid #ddd; +} + +.block-editor-block-manager__checklist-item{ + align-items:center; + display:flex; + justify-content:space-between; + margin-bottom:0; + padding:8px 0 8px 16px; +} +.components-modal__content .block-editor-block-manager__checklist-item.components-checkbox-control__input-container{ + margin:0 8px; +} +.block-editor-block-manager__checklist-item .block-editor-block-icon{ + margin-right:10px; + fill:#1e1e1e; +} + +.block-editor-block-manager__results{ + border-top:1px solid #ddd; +} + +.block-editor-block-manager__disabled-blocks-count+.block-editor-block-manager__results{ + border-top-width:0; +} + .block-editor-block-mover__move-button-container{ border:none; display:flex; @@ -636,9 +827,10 @@ } } +.components-button.block-editor-block-mover-button{ + overflow:hidden; +} .components-button.block-editor-block-mover-button:before{ - animation:components-button__appear-animation .1s ease; - animation-fill-mode:forwards; border-radius:2px; content:""; display:block; @@ -648,10 +840,10 @@ right:8px; z-index:-1; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-button.block-editor-block-mover-button:before{ - animation-delay:0s; - animation-duration:1ms; + animation:components-button__appear-animation .1s ease; + animation-fill-mode:forwards; } } .components-button.block-editor-block-mover-button:focus,.components-button.block-editor-block-mover-button:focus:before,.components-button.block-editor-block-mover-button:focus:enabled{ @@ -689,6 +881,7 @@ .block-editor-block-patterns-list__item{ height:100%; + outline:0; scroll-margin-bottom:56px; scroll-margin-top:24px; } @@ -699,29 +892,32 @@ } .block-editor-block-patterns-list__item .block-editor-block-preview__container{ align-items:center; - border-radius:2px; + border-radius:4px; display:flex; overflow:hidden; } .block-editor-block-patterns-list__item .block-editor-block-preview__container:after{ - border-radius:2px; + border-radius:4px; outline:1px solid #0000001a; outline-offset:-1px; } -.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:after{ - outline-color:var(--wp-admin-theme-color); - outline-offset:calc(-1*var(--wp-admin-border-width-focus)); +@media not (prefers-reduced-motion){ + .block-editor-block-patterns-list__item .block-editor-block-preview__container:after{ + transition:outline .1s linear; + } +} +.block-editor-block-patterns-list__item.is-selected .block-editor-block-preview__container:after{ + outline-color:#1e1e1e; + outline-offset:calc(var(--wp-admin-border-width-focus)*-1); outline-width:var(--wp-admin-border-width-focus); - transition:outline .1s linear; -} -@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:hover .block-editor-block-preview__container:after{ + outline-color:#0000004d; +} +.block-editor-block-patterns-list__item[data-focus-visible] .block-editor-block-preview__container:after{ + outline-color:var(--wp-admin-theme-color); + outline-offset:calc(var(--wp-admin-border-width-focus)*-1); + outline-width:var(--wp-admin-border-width-focus); } .block-editor-block-patterns-list__item .block-editor-patterns__pattern-details:not(:empty){ align-items:center; @@ -741,29 +937,14 @@ justify-content:center; padding:4px; } -.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary{ - height:32px; - justify-content:center; + +.show-icon-labels .block-editor-patterns__grid-pagination-button{ width:auto; } -.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary:disabled{ - background:none; - color:#949494; -} -.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled){ - background-color:#757575; - color:#fff; -} -.show-icon-labels .block-editor-patterns__grid-pagination,.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next,.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous{ - flex-direction:column; -} -.show-icon-labels .block-editor-patterns__grid-pagination .components-button{ - width:auto; -} -.show-icon-labels .block-editor-patterns__grid-pagination .components-button span{ +.show-icon-labels .block-editor-patterns__grid-pagination-button span{ display:none; } -.show-icon-labels .block-editor-patterns__grid-pagination .components-button:before{ +.show-icon-labels .block-editor-patterns__grid-pagination-button:before{ content:attr(aria-label); } @@ -903,13 +1084,6 @@ margin:auto; } -.block-editor-block-switcher__toggle-text{ - margin-left:8px; -} -.show-icon-labels .block-editor-block-switcher__toggle-text{ - display:none; -} - .components-button.block-editor-block-switcher__no-switcher-icon{ display:flex; } @@ -918,67 +1092,42 @@ margin-right:auto; min-width:24px !important; } - -.components-button.block-editor-block-switcher__no-switcher-icon:disabled{ - opacity:1; -} -.components-button.block-editor-block-switcher__no-switcher-icon:disabled,.components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors{ +.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true],.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true]:hover{ color:#1e1e1e; } -.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon,.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon{ - align-items:center; - display:flex; - height:100%; - margin:0 auto; - min-width:100%; - position:relative; -} -.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon:before,.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon:before,.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon:before,.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon:before{ - bottom:8px; - left:8px; - right:8px; - top:8px; -} - .components-popover.block-editor-block-switcher__popover .components-popover__content{ min-width:300px; } -.block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container{ - left:calc(100% + 16px); +.block-editor-block-switcher__popover-preview-container{ + bottom:0; + left:0; + pointer-events:none; position:absolute; - top:-12px; -} - -.block-editor-block-switcher__preview__popover{ - display:none; + top:-1px; + width:100%; +} + +.block-editor-block-switcher__popover-preview{ overflow:hidden; } -.block-editor-block-switcher__preview__popover.components-popover{ - margin-top:11px; -} -@media (min-width:782px){ - .block-editor-block-switcher__preview__popover{ - display:block; - } -} -.block-editor-block-switcher__preview__popover .components-popover__content{ +.block-editor-block-switcher__popover-preview .components-popover__content{ background:#fff; border:1px solid #1e1e1e; - border-radius:2px; + border-radius:4px; box-shadow:none; outline:none; overflow:auto; width:300px; } -.block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview{ +.block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview{ margin:16px 0; max-height:468px; overflow:hidden; padding:0 16px; } -.block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview.is-pattern-list-preview{ +.block-editor-block-switcher__popover-preview .block-editor-block-switcher__preview.is-pattern-list-preview{ overflow:unset; } @@ -1018,7 +1167,11 @@ border-radius:2px; height:100%; position:relative; - transition:all .05s ease-in-out; +} +@media not (prefers-reduced-motion){ + .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item{ + transition:all .05s ease-in-out; + } } .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:focus,.block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:hover{ box-shadow:inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); @@ -1106,7 +1259,7 @@ } .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{ border:1px solid #ddd; - border-radius:2px; + border-radius:4px; min-height:100px; } .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{ @@ -1166,10 +1319,14 @@ padding:0; position:absolute; top:0; - transition:transform .5s,z-index .5s; width:100%; z-index:100; } +@media not (prefers-reduced-motion){ + .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide{ + transition:transform .5s,z-index .5s; + } +} .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide{ opacity:1; position:relative; @@ -1245,14 +1402,6 @@ flex:1; margin-right:12px; } -.components-border-radius-control .components-border-radius-control__wrapper .components-border-radius-control__range-control>div{ - align-items:center; - display:flex; - height:40px; -} -.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:grid; gap:16px; @@ -1304,6 +1453,7 @@ border-right:1px solid #ddd; max-width:100%; padding:0; + position:relative; } .block-editor-tools-panel-color-gradient-settings__item:nth-child(1 of .block-editor-tools-panel-color-gradient-settings__item){ border-top:1px solid #ddd; @@ -1334,6 +1484,7 @@ color:var(--wp-admin-theme-color); } .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name{ + max-width:calc(100% - 44px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; @@ -1346,29 +1497,48 @@ flex-shrink:0; } +.block-editor-panel-color-gradient-settings__reset{ + margin:auto 8px; + opacity:0; + position:absolute; + right:0; + top:8px; +} +@media not (prefers-reduced-motion){ + .block-editor-panel-color-gradient-settings__reset{ + transition:opacity .1s ease-in-out; + } +} +.block-editor-panel-color-gradient-settings__reset.block-editor-panel-color-gradient-settings__reset{ + border-radius:2px; +} +.block-editor-panel-color-gradient-settings__dropdown:hover+.block-editor-panel-color-gradient-settings__reset,.block-editor-panel-color-gradient-settings__reset:focus,.block-editor-panel-color-gradient-settings__reset:hover{ + opacity:1; +} +@media (hover:none){ + .block-editor-panel-color-gradient-settings__reset{ + opacity:1; + } +} + .block-editor-date-format-picker{ - margin-bottom:16px; + border:none; + margin:0 0 16px; + padding:0; } .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:left; -} - -.block-editor-duotone-control__popover>.components-popover__content{ - padding:16px; + +.block-editor-duotone-control__popover.components-popover>.components-popover__content{ + padding:8px; width:260px; } -.block-editor-duotone-control__popover .components-menu-group__label{ +.block-editor-duotone-control__popover.components-popover .components-menu-group__label{ padding:0; } -.block-editor-duotone-control__popover .components-circular-option-picker__swatches{ +.block-editor-duotone-control__popover.components-popover .components-circular-option-picker__swatches{ display:grid; gap:12px; grid-template-columns:repeat(6, 28px); @@ -1379,11 +1549,15 @@ background:linear-gradient(-45deg, #0000 48%, #ddd 0, #ddd 52%, #0000 0); } -.components-font-appearance-control ul li{ +.components-font-appearance-control [role=option]{ color:#1e1e1e; text-transform:capitalize; } +.block-editor-font-family-control:not(.is-next-has-no-margin-bottom){ + margin-bottom:8px; +} + .block-editor-global-styles__toggle-icon{ fill:currentColor; } @@ -1406,6 +1580,7 @@ .block-editor-global-styles-filters-panel__dropdown,.block-editor-global-styles__shadow-dropdown{ display:block; padding:0; + position:relative; } .block-editor-global-styles-filters-panel__dropdown button,.block-editor-global-styles__shadow-dropdown button{ padding:8px; @@ -1415,19 +1590,53 @@ background-color:#f0f0f0; } +.block-editor-global-styles__shadow-editor__remove-button{ + margin:auto 8px; + opacity:0; + position:absolute; + right:0; + top:8px; +} +@media not (prefers-reduced-motion){ + .block-editor-global-styles__shadow-editor__remove-button{ + transition:opacity .1s ease-in-out; + } +} +.block-editor-global-styles__shadow-dropdown:hover .block-editor-global-styles__shadow-editor__remove-button,.block-editor-global-styles__shadow-editor__remove-button:focus,.block-editor-global-styles__shadow-editor__remove-button:hover{ + opacity:1; +} +@media (hover:none){ + .block-editor-global-styles__shadow-editor__remove-button{ + opacity:1; + } +} + +.block-editor-global-styles-filters-panel__dropdown{ + border:1px solid #ddd; + border-radius:2px; +} + .block-editor-global-styles__shadow-indicator{ + align-items:center; + appearance:none; + background:none; border:1px solid #e0e0e0; border-radius:2px; box-sizing:border-box; color:#2f2f2f; cursor:pointer; + display:inline-flex; height:26px; padding:0; transform:scale(1); - transition:transform .1s ease; width:26px; will-change:transform; } +@media not (prefers-reduced-motion){ + .block-editor-global-styles__shadow-indicator{ + transition:transform .1s ease; + } +} .block-editor-global-styles__shadow-indicator:focus{ border:2px solid #757575; } @@ -1443,95 +1652,227 @@ 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; +.block-editor-panel-duotone-settings__reset{ + margin:auto 8px; + opacity:0; 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; + right:0; + top:8px; +} +@media not (prefers-reduced-motion){ + .block-editor-panel-duotone-settings__reset{ + transition:opacity .1s ease-in-out; + } +} +.block-editor-global-styles-filters-panel__dropdown:hover .block-editor-panel-duotone-settings__reset,.block-editor-panel-duotone-settings__reset:focus,.block-editor-panel-duotone-settings__reset:hover{ + opacity:1; +} +@media (hover:none){ + .block-editor-panel-duotone-settings__reset{ + opacity:1; + } +} + +.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer{ + z-index:30; +} +.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content *{ + pointer-events:none; +} +.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer.is-dropping-allowed .block-editor-grid-visualizer__drop-zone{ + pointer-events:all; +} +.block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .block-editor-inserter *{ + pointer-events:auto; } .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; + position:absolute; +} + +.block-editor-grid-visualizer__cell{ + display:grid; + position:relative; +} +.block-editor-grid-visualizer__cell .block-editor-inserter{ + bottom:0; + color:inherit; + left:0; + overflow:hidden; + position:absolute; + right:0; + top:0; + z-index:32; +} +.block-editor-grid-visualizer__cell .block-editor-inserter .block-editor-grid-visualizer__appender{ + box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 20%, #0000); + color:inherit; + height:100%; + opacity:0; + overflow:hidden; + padding:0 !important; + width:100%; +} +.block-editor-grid-visualizer__cell.is-highlighted .block-editor-grid-visualizer__drop-zone,.block-editor-grid-visualizer__cell.is-highlighted .block-editor-inserter{ + background:var(--wp-admin-theme-color); +} +.block-editor-grid-visualizer__cell .block-editor-grid-visualizer__appender:focus,.block-editor-grid-visualizer__cell:hover .block-editor-grid-visualizer__appender{ + background-color:color-mix(in srgb, currentColor 20%, #0000); + opacity:1; +} + +.block-editor-grid-visualizer__drop-zone{ + background:#cccccc1a; + grid-column:1; + grid-row:1; + height:100%; + min-height:8px; + min-width:8px; + width:100%; +} + +.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer{ + z-index:30; +} +.block-editor-grid-item-resizer.block-editor-grid-item-resizer.block-editor-grid-item-resizer .components-popover__content *{ + pointer-events:none; } .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-grid-item-resizer__box .components-resizable-box__handle.components-resizable-box__handle.components-resizable-box__handle{ + pointer-events:all; +} + +.block-editor-grid-item-mover__move-button-container{ + border:none; + display:flex; + justify-content:center; + padding:0; +} +.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button{ + min-width:0 !important; + padding-left:0; + padding-right:0; + width:24px; +} +.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button svg{ + min-width:24px; +} +.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:before{ + border-radius:2px; + content:""; + display:block; + height:32px; + left:8px; + position:absolute; + right:8px; + z-index:-1; +} +@media not (prefers-reduced-motion){ + .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:before{ + animation:components-button__appear-animation .1s ease; + animation-fill-mode:forwards; + } +} +.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus,.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus:before,.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus:enabled{ + box-shadow:none; + outline:none; +} +.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible:before{ + 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-grid-item-mover__move-vertical-button-container{ + display:flex; + position:relative; +} +@media (min-width:600px){ + .block-editor-grid-item-mover__move-vertical-button-container{ + flex-direction:column; + justify-content:space-around; + } + .block-editor-grid-item-mover__move-vertical-button-container>.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button{ + height:20px !important; + min-width:0 !important; + width:100%; + } + .block-editor-grid-item-mover__move-vertical-button-container>.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button:before{ + height:calc(100% - 4px); + } + .block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-down-button svg,.block-editor-grid-item-mover__move-vertical-button-container .block-editor-grid-item-mover-button.is-up-button svg{ + flex-shrink:0; + height:20px; + } + .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container{ + height:40px; + position:relative; + top:-5px; + } +} + +.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container{ + position:relative; +} +@media (min-width:600px){ + .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container:before{ + background:#e0e0e0; + content:""; + height:100%; + position:absolute; + top:0; + width:1px; + } +} +@media (min-width:782px){ + .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container:before{ + background:#1e1e1e; + } +} +.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left{ + padding-right:6px; +} +.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left:before{ + right:0; +} +.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right{ + padding-left:6px; +} +.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right:before{ + left:0; +} +@media (min-width:600px){ + .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container:before{ + background:#e0e0e0; + content:""; + height:1px; + left:50%; + margin-top:-.5px; + position:absolute; + top:50%; + transform:translate(-50%); + width:100%; + } +} +@media (min-width:782px){ + .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container:before{ + background:#1e1e1e; + } +} +.show-icon-labels .block-editor-grid-item-mover-button{ + white-space:nowrap; +} +.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container:before{ + background:#ddd; + height:24px; + top:4px; +} +.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container:before{ + background:#ddd; + width:calc(100% - 24px); } .block-editor-height-control{ @@ -1540,6 +1881,21 @@ padding:0; } +.block-editor-iframe__container{ + height:100%; + width:100%; +} + +.block-editor-iframe__scale-container{ + height:100%; +} + +.block-editor-iframe__scale-container.is-zoomed-out{ + position:absolute; + right:0; + width:var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw); +} + .block-editor-image-size-control{ margin-bottom:1em; } @@ -1570,7 +1926,6 @@ .components-button.block-editor-block-types-list__item{ align-items:stretch; background:#0000; - border-radius:2px; color:#1e1e1e; cursor:pointer; display:flex; @@ -1580,14 +1935,12 @@ justify-content:center; padding:8px; position:relative; - transition:all .05s ease-in-out; width:100%; word-break:break-word; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .components-button.block-editor-block-types-list__item{ - transition-delay:0s; - transition-duration:0s; + transition:all .05s ease-in-out; } } .components-button.block-editor-block-types-list__item:disabled{ @@ -1624,28 +1977,21 @@ } .block-editor-block-types-list__item-icon{ - border-radius:2px; color:#1e1e1e; padding:12px 20px; - transition:all .05s ease-in-out; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .block-editor-block-types-list__item-icon{ - transition-delay:0s; - transition-duration:0s; + transition:all .05s ease-in-out; } } .block-editor-block-types-list__item-icon .block-editor-block-icon{ margin-left:auto; margin-right:auto; } -.block-editor-block-types-list__item-icon svg{ - transition:all .15s ease-out; -} -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .block-editor-block-types-list__item-icon svg{ - transition-delay:0s; - transition-duration:0s; + transition:all .15s ease-out; } } .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon{ @@ -1654,47 +2000,18 @@ .block-editor-block-types-list__item-title{ font-size:12px; + hyphens:auto; padding:4px 2px 8px; } -.show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button{ - justify-content:center; -} - -.block-editor-inspector-controls-tabs__hint{ - align-items:flex-start; - background:#f0f0f0; - border-radius:2px; - color:#1e1e1e; - display:flex; - flex-direction:row; - font-size:13px; - margin:16px; -} - -.block-editor-inspector-controls-tabs__hint-content{ - margin:12px 0 12px 12px; -} - -.block-editor-inspector-controls-tabs__hint-dismiss{ - margin:4px 4px 4px 0; +.block-editor-block-inspector__tabs [role=tablist]{ + width:100%; } .block-editor-inspector-popover-header{ margin-bottom:16px; } -[class].block-editor-inspector-popover-header__action{ - height:24px; -} -[class].block-editor-inspector-popover-header__action.has-icon{ - min-width:24px; - padding:0; -} -[class].block-editor-inspector-popover-header__action:not(.has-icon){ - text-decoration:underline; -} - .items-justified-left{ justify-content:flex-start; } @@ -1765,62 +2082,11 @@ .block-editor-link-control__field .components-base-control__label{ color:#1e1e1e; } -.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{ - border:1px solid #949494; - border-radius:2px; - box-shadow:0 0 0 #0000; - display:block; - font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; - font-size:16px; - height:40px; - line-height:normal; - margin:0; - padding:8px 40px 8px 16px; - position:relative; - transition:box-shadow .1s linear; - width:100%; -} -@media (prefers-reduced-motion:reduce){ - .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-delay:0s; - transition-duration:0s; - } -} -@media (min-width:600px){ - .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; - line-height:normal; - } -} -.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 .5px var(--wp-admin-theme-color); - outline:2px solid #0000; -} -.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:#1e1e1e9e; -} -.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{ - color:#1e1e1e9e; - opacity:1; -} -.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:#1e1e1e9e; -} -.has-actions .block-editor-link-control__field input[type=text],.has-actions .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input{ - padding-right:16px; -} .block-editor-link-control__search-error{ margin:-8px 16px 16px; } -.block-editor-link-control__search-enter{ - position:absolute; - right:19px; - top:3px; -} - .block-editor-link-control__search-actions{ padding:8px 16px 16px; } @@ -1942,7 +2208,6 @@ width:32px; } .block-editor-link-control__search-item .block-editor-link-control__search-item-title{ - border-radius:2px; line-height:1.1; } .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus{ @@ -1983,8 +2248,6 @@ opacity:0; } .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon:before{ - animation:loadingpulse 1s linear infinite; - animation-delay:.5s; background-color:#f0f0f0; border-radius:100%; bottom:0; @@ -1995,6 +2258,12 @@ right:0; top:0; } +@media not (prefers-reduced-motion){ + .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon:before{ + animation:loadingpulse 1s linear infinite; + animation-delay:.5s; + } +} .block-editor-link-control__loading{ align-items:center; @@ -2066,24 +2335,20 @@ } .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg{ transform:rotate(90deg); - transition:transform .1s ease; visibility:visible; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg{ - transition-delay:0s; - transition-duration:0s; + transition:transform .1s ease; } } .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg{ transform:rotate(0deg); - transition:transform .1s ease; visibility:visible; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg{ - transition-delay:0s; - transition-duration:0s; + transition:transform .1s ease; } } @@ -2130,6 +2395,14 @@ .block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover{ color:var(--wp-admin-theme-color); } +.block-editor-list-view-leaf .block-editor-list-view-block-select-button svg{ + fill:currentColor; +} +@media (forced-colors:active){ + .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg{ + fill:CanvasText; + } +} .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover{ color:inherit; } @@ -2198,62 +2471,50 @@ } .block-editor-list-view-leaf.is-displacement-normal{ transform:translateY(0); - transition:transform .2s; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .block-editor-list-view-leaf.is-displacement-normal{ - transition-delay:0s; - transition-duration:0s; + transition:transform .2s; } } .block-editor-list-view-leaf.is-displacement-up{ transform:translateY(-32px); - transition:transform .2s; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .block-editor-list-view-leaf.is-displacement-up{ - transition-delay:0s; - transition-duration:0s; + transition:transform .2s; } } .block-editor-list-view-leaf.is-displacement-down{ transform:translateY(32px); - transition:transform .2s; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .block-editor-list-view-leaf.is-displacement-down{ - transition-delay:0s; - transition-duration:0s; + transition:transform .2s; } } .block-editor-list-view-leaf.is-after-dragged-blocks{ transform:translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px)*-1)); - transition:transform .2s; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .block-editor-list-view-leaf.is-after-dragged-blocks{ - transition-delay:0s; - transition-duration:0s; + transition:transform .2s; } } .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up{ transform:translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px)*-1)); - transition:transform .2s; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up{ - transition-delay:0s; - transition-duration:0s; + transition:transform .2s; } } .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down{ transform:translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px)*-1)); - transition:transform .2s; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down{ - transition-delay:0s; - transition-duration:0s; + transition:transform .2s; } } .block-editor-list-view-leaf.is-dragging{ @@ -2265,23 +2526,25 @@ .block-editor-list-view-leaf .block-editor-list-view-block-contents{ align-items:center; border-radius:2px; + box-sizing:border-box; + color:inherit; display:flex; + font-family:inherit; + font-size:13px; + font-weight:400; height:32px; + margin:0; padding:6px 4px 6px 0; position:relative; text-align:left; + text-decoration:none; white-space:nowrap; width:100%; } -.block-editor-list-view-leaf .block-editor-list-view-block-contents.is-dropping-before:before{ - border-top:4px solid var(--wp-admin-theme-color); - content:""; - left:0; - pointer-events:none; - position:absolute; - right:0; - top:-2px; - transition:border-color .1s linear,border-style .1s linear,box-shadow .1s linear; +@media not (prefers-reduced-motion){ + .block-editor-list-view-leaf .block-editor-list-view-block-contents{ + transition:box-shadow .1s linear; + } } .components-modal__content .block-editor-list-view-leaf .block-editor-list-view-block-contents{ padding-left:0; @@ -2310,14 +2573,20 @@ z-index:1; } .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents{ - animation:edit-post__fade-in-animation .2s ease-out 0s; - animation-fill-mode:forwards; opacity:1; } -@media (prefers-reduced-motion:reduce){ +@keyframes __wp-base-styles-fade-in{ + 0%{ + opacity:0; + } + to{ + opacity:1; + } +} +@media not (prefers-reduced-motion){ .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents{ - animation-delay:0s; - animation-duration:1ms; + animation:__wp-base-styles-fade-in .08s linear 0s; + animation-fill-mode:forwards; } } .block-editor-list-view-leaf .block-editor-block-icon{ @@ -2413,19 +2682,15 @@ width:100%; } .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor{ - background:#0000001a; - border-radius:2px; - box-sizing:border-box; - max-width:100%; - padding:2px 6px; position:absolute; right:0; transform:translateY(-50%); } .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor{ background:#0000004d; -} -.block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock{ + color:#fff; +} +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,.block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky{ line-height:0; } .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images{ @@ -2433,7 +2698,7 @@ } .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image{ background-size:cover; - border-radius:2px; + border-radius:1px; height:18px; width:18px; } @@ -2503,25 +2768,21 @@ .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg{ transform:rotate(90deg); - transition:transform .2s ease; visibility:visible; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg{ - transition-delay:0s; - transition-duration:0s; + transition:transform .2s ease; } } .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg{ transform:rotate(0deg); - transition:transform .2s ease; visibility:visible; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg{ - transition-delay:0s; - transition-duration:0s; + transition:transform .2s ease; } } @@ -2558,19 +2819,36 @@ .list-view-appender .block-editor-inserter__toggle{ background-color:#1e1e1e; - border-radius:2px; color:#fff; height:24px; margin:8px 0 0 24px; + padding:0; +} +.list-view-appender .block-editor-inserter__toggle.has-icon.is-next-40px-default-size{ min-width:24px; - padding:0; } .list-view-appender .block-editor-inserter__toggle:focus,.list-view-appender .block-editor-inserter__toggle:hover{ background:var(--wp-admin-theme-color); color:#fff; } -.list-view-appender__description,.modal-open .block-editor-media-replace-flow__options{ +.list-view-appender__description{ + display:none; +} + +.block-editor-media-placeholder__url-input-form{ + min-width:260px; +} +@media (min-width:600px){ + .block-editor-media-placeholder__url-input-form{ + width:300px; + } +} +.block-editor-media-placeholder__url-input-form input{ + direction:ltr; +} + +.modal-open .block-editor-media-replace-flow__options{ display:none; } @@ -2578,16 +2856,17 @@ margin-left:4px; } +.block-editor-media-replace-flow__media-upload-menu:not(:empty)+.block-editor-media-flow__url-input{ + border-top:1px solid #1e1e1e; + margin-top:8px; + padding-bottom:8px; +} + .block-editor-media-flow__url-input{ margin-left:-8px; margin-right:-8px; padding:16px; } -.block-editor-media-flow__url-input.has-siblings{ - border-top:1px solid #1e1e1e; - margin-top:8px; - padding-bottom:8px; -} .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label{ display:block; margin-bottom:8px; @@ -2637,28 +2916,16 @@ } .block-editor-multi-selection-inspector__card{ - align-items:flex-start; - display:flex; padding:16px; } -.block-editor-multi-selection-inspector__card-content{ - flex-grow:1; -} - .block-editor-multi-selection-inspector__card-title{ font-weight:500; - margin-bottom:5px; -} - -.block-editor-multi-selection-inspector__card-description{ - font-size:13px; } .block-editor-multi-selection-inspector__card .block-editor-block-icon{ height:24px; margin-left:-2px; - margin-right:10px; padding:0 3px; width:36px; } @@ -2693,7 +2960,6 @@ .block-editor-responsive-block-control .components-base-control__help{ border:0; - clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%); height:1px; margin:-1px; @@ -2708,6 +2974,7 @@ z-index:99998; } .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content{ + border-radius:2px; box-shadow:none; margin-bottom:8px; min-width:auto; @@ -2717,6 +2984,9 @@ .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar{ border-radius:2px; } +.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group{ + background:none; +} .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle,.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control{ min-height:48px; min-width:48px; @@ -2738,39 +3008,51 @@ 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; } .block-editor-skip-to-selected-block:focus{ background:#f1f1f1; - box-shadow:0 0 2px 2px #0009; - color:var(--wp-admin-theme-color); - display:block; font-size:14px; font-weight:600; - height:auto; - line-height:normal; - outline:none; - padding:15px 23px 14px; - text-decoration:none; - width:auto; z-index:100000; } +.block-editor-tabbed-sidebar{ + background-color:#fff; + display:flex; + flex-direction:column; + flex-grow:1; + height:100%; + overflow:hidden; +} + +.block-editor-tabbed-sidebar__tablist-and-close-button{ + border-bottom:1px solid #ddd; + display:flex; + justify-content:space-between; + padding-right:8px; +} + +.block-editor-tabbed-sidebar__close-button{ + align-self:center; + background:#fff; + order:1; +} + +.block-editor-tabbed-sidebar__tablist{ + margin-bottom:-1px; +} + +.block-editor-tabbed-sidebar__tabpanel{ + display:flex; + flex-direction:column; + flex-grow:1; + overflow-y:auto; + scrollbar-gutter:auto; +} + .block-editor-tool-selector__help{ border-top:1px solid #ddd; color:#757575; @@ -2779,28 +3061,23 @@ padding:16px; } +.block-editor-tool-selector__menu .components-menu-item__info{ + margin-left:36px; + text-align:left; +} + .block-editor-block-list__block .block-editor-url-input,.block-editor-url-input,.components-popover .block-editor-url-input{ flex-grow:1; padding:1px; position:relative; } -.block-editor-block-list__block .block-editor-url-input input[type=text],.block-editor-url-input input[type=text],.components-popover .block-editor-url-input input[type=text]{ - font-size:16px; - margin-left:0; - margin-right:0; - padding:8px 8px 8px 12px; - width:100%; -} @media (min-width:600px){ - .block-editor-block-list__block .block-editor-url-input input[type=text],.block-editor-url-input input[type=text],.components-popover .block-editor-url-input input[type=text]{ - font-size:13px; - width:300px; + .block-editor-block-list__block .block-editor-url-input,.block-editor-url-input,.components-popover .block-editor-url-input{ + min-width:300px; + width:auto; } } -.block-editor-block-list__block .block-editor-url-input input[type=text]::-ms-clear,.block-editor-url-input input[type=text]::-ms-clear,.components-popover .block-editor-url-input input[type=text]::-ms-clear{ - display:none; -} -.block-editor-block-list__block .block-editor-url-input.is-full-width,.block-editor-block-list__block .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text],.block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,.block-editor-url-input.is-full-width,.block-editor-url-input.is-full-width .block-editor-url-input__input[type=text],.block-editor-url-input.is-full-width__suggestions,.components-popover .block-editor-url-input.is-full-width,.components-popover .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text],.components-popover .block-editor-url-input.is-full-width__suggestions{ +.block-editor-block-list__block .block-editor-url-input.is-full-width,.block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,.block-editor-url-input.is-full-width,.block-editor-url-input.is-full-width__suggestions,.components-popover .block-editor-url-input.is-full-width,.components-popover .block-editor-url-input.is-full-width__suggestions{ width:100%; } .block-editor-block-list__block .block-editor-url-input .components-spinner,.block-editor-url-input .components-spinner,.components-popover .block-editor-url-input .components-spinner{ @@ -2810,55 +3087,15 @@ top:calc(50% - 8px); } -.block-editor-url-input__input[type=text]{ - border:1px solid #949494; - border-radius:2px; - box-shadow:0 0 0 #0000; - font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; - font-size:16px; - line-height:normal; - padding:6px 8px; - transition:box-shadow .1s linear; -} -@media (prefers-reduced-motion:reduce){ - .block-editor-url-input__input[type=text]{ - transition-delay:0s; - transition-duration:0s; - } -} -@media (min-width:600px){ - .block-editor-url-input__input[type=text]{ - font-size:13px; - line-height:normal; - } -} -.block-editor-url-input__input[type=text]:focus{ - border-color:var(--wp-admin-theme-color); - box-shadow:0 0 0 .5px var(--wp-admin-theme-color); - outline:2px solid #0000; -} -.block-editor-url-input__input[type=text]::-webkit-input-placeholder{ - color:#1e1e1e9e; -} -.block-editor-url-input__input[type=text]::-moz-placeholder{ - color:#1e1e1e9e; - opacity:1; -} -.block-editor-url-input__input[type=text]:-ms-input-placeholder{ - color:#1e1e1e9e; -} - .block-editor-url-input__suggestions{ max-height:200px; overflow-y:auto; padding:4px 0; - transition:all .15s ease-in-out; width:302px; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .block-editor-url-input__suggestions{ - transition-delay:0s; - transition-duration:0s; + transition:all .15s ease-in-out; } } @@ -2914,7 +3151,7 @@ .block-editor-url-input__button-modal{ background:#fff; border:1px solid #ddd; - box-shadow:0 .7px 1px #0000001a,0 1.2px 1.7px -.2px #0000001a,0 2.3px 3.3px -.5px #0000001a; + box-shadow:0 1px 1px #00000008,0 1px 2px #00000005,0 3px 3px #00000005,0 4px 4px #00000003; } .block-editor-url-input__button-modal-line{ @@ -2925,11 +3162,6 @@ flex-shrink:1; min-width:0; } -.block-editor-url-input__button-modal-line .components-button{ - flex-shrink:0; - height:36px; - width:36px; -} .block-editor-url-popover__additional-controls{ border-top:1px solid #1e1e1e; @@ -2941,6 +3173,7 @@ } .block-editor-url-popover__row{ + align-items:center; display:flex; gap:4px; } @@ -3010,13 +3243,6 @@ color:#757575; font-size:12px; } - -.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; -} .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack{ flex-direction:row; } @@ -3026,13 +3252,19 @@ margin-bottom:16px; } +div.block-editor-bindings__panel{ + grid-template-columns:repeat(auto-fit, minmax(100%, 1fr)); +} +div.block-editor-bindings__panel button:hover .block-editor-bindings__item span{ + color:inherit; +} + .border-block-support-panel .single-column{ grid-column:span 1; } .color-block-support-panel .block-editor-contrast-checker{ grid-column:span 2; margin-top:16px; - order:9999; } .color-block-support-panel .block-editor-contrast-checker .components-notice__content{ margin-right:0; @@ -3048,32 +3280,14 @@ grid-column:span 1; } -.block-editor-hooks__layout-controls{ - display:flex; - margin-bottom:8px; -} -.block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit{ - display:flex; - margin-right:24px; -} -.block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit svg{ - margin:auto 0 4px 8px; -} - -.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input{ +.block-editor-hooks__layout-constrained .components-base-control{ margin-bottom:0; } -.block-editor-hooks__layout-controls-reset{ - display:flex; - justify-content:flex-end; - margin-bottom:24px; -} - -.block-editor-hooks__layout-controls-helptext{ +.block-editor-hooks__layout-constrained-helptext{ color:#757575; font-size:12px; - margin-bottom:16px; + margin-bottom:0; } .block-editor-hooks__flex-layout-justification-controls,.block-editor-hooks__flex-layout-orientation-controls{ @@ -3083,24 +3297,6 @@ margin-bottom:8px; } -.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control{ - margin-bottom:16px; -} - -.block-editor-hooks__position-selection__select-control .components-custom-select-control__hint{ - display:none; -} - -.block-editor-hooks__position-selection__select-control__option.has-hint{ - grid-template-columns:auto 30px; - line-height:1.4; - margin-bottom:0; -} -.block-editor-hooks__position-selection__select-control__option .components-custom-select-control__item-hint{ - grid-row:2; - text-align:left; -} - .block-editor__spacing-visualizer{ border-color:var(--wp-admin-theme-color); border-style:solid; @@ -3123,13 +3319,11 @@ overflow-x:auto; overflow-y:hidden; position:relative; - transition:border-color .1s linear,box-shadow .1s linear; width:100%; } -@media (prefers-reduced-motion:reduce){ +@media not (prefers-reduced-motion){ .block-editor-block-toolbar{ - transition-delay:0s; - transition-duration:0s; + transition:border-color .1s linear,box-shadow .1s linear; } } @media (min-width:600px){ @@ -3141,16 +3335,22 @@ background:none; border:0; border-right:1px solid #ddd; - line-height:0; margin-bottom:-1px; margin-top:-1px; } +.block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button:before{ + background:color-mix(in srgb, var(--wp-block-synced-color) 10%, #0000); + border-radius:2px; +} .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{ +.block-editor-block-toolbar:has(>:last-child:empty)>:nth-last-child(2),.block-editor-block-toolbar:has(>:last-child:empty)>:nth-last-child(2) .components-toolbar,.block-editor-block-toolbar:has(>:last-child:empty)>:nth-last-child(2) .components-toolbar-group,.block-editor-block-toolbar>:last-child,.block-editor-block-toolbar>:last-child .components-toolbar,.block-editor-block-toolbar>:last-child .components-toolbar-group{ border-right:none; } +.block-editor-block-toolbar .components-toolbar-group:empty{ + display:none; +} .block-editor-block-contextual-toolbar{ background-color:#fff; @@ -3163,9 +3363,11 @@ } .block-editor-block-contextual-toolbar.components-accessible-toolbar{ border:none; - border-bottom:1px solid #e0e0e0; border-radius:0; } +.block-editor-block-contextual-toolbar.is-unstyled{ + box-shadow:0 1px 0 0 rgba(0,0,0,.133); +} .block-editor-block-contextual-toolbar .block-editor-block-toolbar{ overflow:auto; overflow-y:hidden; @@ -3238,13 +3440,7 @@ } .block-editor-block-toolbar__slot{ - display:inline-block; - line-height:0; -} -@supports (position:sticky){ - .block-editor-block-toolbar__slot{ - display:inline-flex; - } + display:inline-flex; } .show-icon-labels .block-editor-block-toolbar .components-button.has-icon{ @@ -3326,6 +3522,22 @@ margin-left:6px; } +.block-editor-block-toolbar-change-design-content-wrapper{ + padding:12px; + width:320px; +} +.block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list{ + display:grid; + grid-template-columns:1fr 1fr; + grid-gap:12px; +} +.block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item{ + margin-bottom:0; +} +.block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-inserter__media-list__list-item{ + min-height:100px; +} + .block-editor-inserter{ background:none; border:none; @@ -3342,8 +3554,6 @@ } .block-editor-inserter__main-area{ - display:flex; - flex-direction:column; gap:16px; height:100%; position:relative; @@ -3352,14 +3562,14 @@ gap:0; } @media (min-width:782px){ - .block-editor-inserter__main-area{ + .block-editor-inserter__main-area .block-editor-tabbed-sidebar{ width:350px; } } .block-editor-inserter__popover.is-quick .components-popover__content{ border:none; - box-shadow:0 .7px 1px #0000001a,0 1.2px 1.7px -.2px #0000001a,0 2.3px 3.3px -.5px #0000001a; + box-shadow:0 1px 1px #00000008,0 1px 2px #00000005,0 3px 3px #00000005,0 4px 4px #00000003; outline:none; } .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter>*{ @@ -3367,12 +3577,12 @@ border-right:1px solid #ccc; } .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter>:first-child{ - border-radius:2px 2px 0 0; + border-radius:4px 4px 0 0; border-top:1px solid #ccc; } .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter>:last-child{ border-bottom:1px solid #ccc; - border-radius:0 0 2px 2px; + border-radius:0 0 4px 4px; } .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter>.components-button{ border:1px solid #1e1e1e; @@ -3399,12 +3609,10 @@ display:inline-flex; outline:none; padding:0; - transition:color .2s ease; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .block-editor-inserter__toggle.components-button{ - transition-delay:0s; - transition-duration:0s; + transition:color .2s ease; } } @@ -3413,6 +3621,11 @@ overflow:visible; position:relative; } +@media (min-width:782px){ + .block-editor-inserter__menu.show-panel{ + width:630px; + } +} .block-editor-inserter__inline-elements{ margin-top:-1px; @@ -3430,41 +3643,6 @@ padding:16px 16px 0; } -.block-editor-inserter__tabs{ - display:flex; - flex-direction:column; - flex-grow:1; - overflow:hidden; -} -.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 .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 .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 .block-editor-inserter__tabpanel{ - display:flex; - flex-direction:column; - flex-grow:1; - overflow-y:auto; -} - .block-editor-inserter__no-tab-container{ flex-grow:1; overflow-y:auto; @@ -3475,6 +3653,7 @@ align-items:center; display:inline-flex; padding:16px 16px 0; + position:relative; } .block-editor-inserter__panel-content{ @@ -3503,24 +3682,11 @@ text-align:right; } -.block-editor-inserter__manage-reusable-blocks-container{ - margin:auto 16px 16px; -} - -.block-editor-inserter__manage-reusable-blocks{ - justify-content:center; - width:100%; -} - .block-editor-inserter__no-results,.block-editor-inserter__patterns-loading{ padding:32px; text-align:center; } -.block-editor-inserter__no-results-icon{ - fill:#949494; -} - .block-editor-inserter__child-blocks{ padding:0 16px; } @@ -3568,95 +3734,58 @@ .block-editor-inserter__block-patterns-tabs-container,.block-editor-inserter__media-tabs-container{ display:flex; flex-direction:column; - height:100%; + flex-grow:1; justify-content:space-between; padding:16px; } .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__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__category-tablist .block-editor-inserter__category-tab[aria-selected=true] svg{ - fill:var(--wp-admin-theme-color); -} -.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__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__category-tablist .block-editor-inserter__category-tab:after,.block-editor-inserter__category-tablist .block-editor-inserter__category-tab:before{ - display:none; -} .block-editor-inserter__category-panel{ - background:#f0f0f0; - 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:-1px; - width:100%; } @media (min-width:782px){ .block-editor-inserter__category-panel{ + background:#f0f0f0; border-left:1px solid #e0e0e0; - left:100%; + border-top:1px solid #e0e0e0; + height:calc(100% + 1px); + left:350px; padding:0; - width:300px; + position:absolute; + top:-1px; + width:280px; } -} -.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-inserter__category-panel .block-editor-block-patterns-list,.block-editor-inserter__category-panel .block-editor-inserter__media-list{ + padding:0 24px 16px; + } } .block-editor-inserter__patterns-category-panel-header{ - padding:8px 24px; + padding:8px 0; +} +@media (min-width:782px){ + .block-editor-inserter__patterns-category-panel-header{ + padding:8px 24px; + } } .block-editor-inserter__patterns-category-no-results{ margin-top:24px; } +.block-editor-inserter__patterns-filter-help{ + border-top:1px solid #ddd; + color:#757575; + min-width:280px; + padding:16px; +} + .block-editor-block-patterns-list,.block-editor-inserter__media-list{ flex-grow:1; height:100%; @@ -3668,7 +3797,6 @@ background:#f0f0f0; display:grid; flex-grow:1; - min-height:144px; } .block-editor-inserter__preview-content-missing{ @@ -3734,7 +3862,6 @@ border-radius:0; color:#fff; display:block; - height:44px; width:100%; } .block-editor-inserter__quick-inserter-expand.components-button:hover{ @@ -3833,10 +3960,16 @@ 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; + margin-bottom:24px; +} +@media (min-width:782px){ + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search{ + margin-bottom:0; + padding:16px 24px; + } + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within){ + --wp-components-color-background:#fff; + } } .block-editor-inserter__media-list__list-item{ @@ -3863,7 +3996,6 @@ } .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__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{ @@ -3884,7 +4016,6 @@ overflow:hidden; } .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; @@ -3902,14 +4033,12 @@ } .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-offset:calc(var(--wp-admin-border-width-focus)*-1); outline-width:var(--wp-admin-border-width-focus); - transition:outline .1s linear; -} -@media (prefers-reduced-motion:reduce){ +} +@media not (prefers-reduced-motion){ .block-editor-inserter__media-list__item:focus .block-editor-inserter__media-list__item-preview>*{ - transition-delay:0s; - transition-duration:0s; + transition:outline .1s linear; } } @@ -3938,28 +4067,6 @@ margin:16px 16px 0; } -.reusable-blocks-menu-items__rename-hint{ - align-items:top; - background:#f0f0f0; - border-radius:2px; - color:#1e1e1e; - display:flex; - flex-direction:row; - max-width:380px; -} - -.reusable-blocks-menu-items__rename-hint-content{ - margin:12px 0 12px 12px; -} - -.reusable-blocks-menu-items__rename-hint-dismiss{ - margin:4px 4px 4px 0; -} - -.components-menu-group .reusable-blocks-menu-items__rename-hint{ - margin:0; -} - .block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input{ height:40px; } @@ -3980,34 +4087,32 @@ } } +@media (max-width:959px){ + .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination,.show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next,.show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous{ + flex-direction:column; + } +} +.show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination,.show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next,.show-icon-labels .block-editor-inserter__category-panel .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous{ + flex-direction:column; +} + +.block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text{ + display:none; + padding:0 24px 16px; +} +@media (min-width:480px){ + .block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text{ + display:block; + } +} + .spacing-sizes-control .spacing-sizes-control__custom-value-input,.spacing-sizes-control .spacing-sizes-control__label{ margin-bottom:0; } .spacing-sizes-control .spacing-sizes-control__custom-value-range,.spacing-sizes-control .spacing-sizes-control__range-control{ - align-items:center; - display:flex; flex:1; - height:40px; margin-bottom:0; } -.spacing-sizes-control .spacing-sizes-control__custom-value-range>.components-base-control__field,.spacing-sizes-control .spacing-sizes-control__range-control>.components-base-control__field{ - flex:1; -} -.spacing-sizes-control .components-range-control__mark{ - background-color:#fff; - height:4px; - width:3px; - z-index:1; -} -.spacing-sizes-control .components-range-control__marks{ - margin-top:17px; -} -.spacing-sizes-control .components-range-control__marks :first-child{ - display:none; -} -.spacing-sizes-control .components-range-control__thumb-wrapper{ - z-index:3; -} .spacing-sizes-control__header{ height:16px;