diff --git a/components/popover/index.js b/components/popover/index.js index f81798cf0deeb..6657899d6daea 100644 --- a/components/popover/index.js +++ b/components/popover/index.js @@ -16,6 +16,7 @@ import { focus, keycodes } from '@wordpress/utils'; import './style.scss'; import withFocusReturn from '../higher-order/with-focus-return'; import PopoverDetectOutside from './detect-outside'; +import IconButton from '../icon-button'; import { Slot, Fill } from '../slot-fill'; const FocusManaged = withFocusReturn( ( { children } ) => children ); @@ -300,6 +301,9 @@ class Popover extends Component { className="components-popover__content" tabIndex="-1" > + { this.state.isMobile && + + } { children } diff --git a/components/popover/style.scss b/components/popover/style.scss index c797cfb25b98c..3a24bd463d65f 100644 --- a/components/popover/style.scss +++ b/components/popover/style.scss @@ -102,8 +102,14 @@ } } - // The withFocusReturn div .components-popover__content > div { height: 100%; } + +.components-popover__close.components-icon-button { + position: absolute; + top: 0; + right: 0; + z-index: z-index( '.components-popover__close' ); +} diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss index db9a54cd2e76c..225154be996d5 100644 --- a/editor/assets/stylesheets/_z-index.scss +++ b/editor/assets/stylesheets/_z-index.scss @@ -20,6 +20,7 @@ $z-layers: ( '.blocks-format-toolbar__link-modal': 2, '.editor-block-contextual-toolbar': 2, '.editor-block-switcher__menu': 2, + '.components-popover__close': 2, '.editor-block-mover': 20, '.blocks-gallery-image__inline-menu': 20, '.editor-block-settings-menu__popover': 20, // Below the header diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss index 65d685b16cd22..e9c3127023590 100644 --- a/editor/components/inserter/style.scss +++ b/editor/components/inserter/style.scss @@ -49,6 +49,10 @@ input[type="search"].editor-inserter__search { &:focus { @include input-style__focus-active; } + + .components-popover.is-mobile & { + padding-right: 30px; + } } .editor-inserter__category-blocks { @@ -68,18 +72,6 @@ input[type="search"].editor-inserter__search { } } -.editor-inserter__menu.components-popover.is-center .components-popover__content { - @media ( max-width: #{ $break-medium - 1 } ) { - border-width: 0; - position: fixed; - left: 0; - right: 0; - top: $admin-bar-height-big + $header-height; - transform: none; - width: 100vw; - } -} - .editor-inserter__menu.is-bottom:after { border-bottom-color: $white; }