Product Editor: Modal block editor (description) small viewport (mobile) support (#49611)
* Add media query rules for mobile and fix rule for .block-editor-list-view-tree * Add missing translation call * Add small screen title to show product name on mobile * Add changelog * Add media-query for inserter-sidebar * Close inserter when is mobile viewport
This commit is contained in:
Nathan Silveira
GitHub
parent
74ee55d515
commit
98a0e96bc9
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Update description editing for mobile
|
||||
|
|
@ -355,6 +355,11 @@ export function BlockEditor( {
|
|||
dispatch( productEditorUiStore ).closeModalEditor
|
||||
}
|
||||
title={ __( 'Edit description', 'woocommerce' ) }
|
||||
name={
|
||||
product.name === 'AUTO-DRAFT'
|
||||
? __( '(no product name)', 'woocommerce' )
|
||||
: product.name
|
||||
}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -49,6 +49,11 @@
|
|||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
@media only screen and (max-width: $break-medium) {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.block-editor-block-contextual-toolbar.is-fixed {
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@ type IframeEditorProps = {
|
|||
onInput?: ( blocks: BlockInstance[] ) => void;
|
||||
settings?: Partial< EditorSettings & EditorBlockListSettings > | undefined;
|
||||
showBackButton?: boolean;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export function IframeEditor( {
|
||||
|
|
@ -70,6 +71,7 @@ export function IframeEditor( {
|
|||
onInput = () => {},
|
||||
settings: __settings,
|
||||
showBackButton = false,
|
||||
name,
|
||||
}: IframeEditorProps ) {
|
||||
const [ resizeObserver ] = useResizeObserver();
|
||||
const [ temporalBlocks, setTemporalBlocks ] = useState< BlockInstance[] >(
|
||||
|
|
@ -270,7 +272,7 @@ export function IframeEditor( {
|
|||
</div>
|
||||
{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
|
||||
<PluginArea scope="woocommerce-product-editor-modal-block-editor" />
|
||||
<SettingsSidebar />
|
||||
<SettingsSidebar smallScreenTitle={ name } />
|
||||
</BlockEditorProvider>
|
||||
</EditorContext.Provider>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export function DocumentOverviewSidebar() {
|
|||
tabs={ [
|
||||
{
|
||||
name: 'list-view',
|
||||
title: 'List View',
|
||||
title: __( 'List View', 'woocommerce' ),
|
||||
className:
|
||||
'woocommerce-iframe-editor__document-overview-sidebar-tab-item',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@
|
|||
width: 350px;
|
||||
height: 100%;
|
||||
border-right: 1px solid $gray-400;
|
||||
background: $studio-white;
|
||||
@media only screen and (max-width: $break-medium) {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&-close-button {
|
||||
position: absolute;
|
||||
|
|
@ -22,6 +28,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - $grid-unit-60);
|
||||
.block-editor-list-view-tree {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -30,10 +40,5 @@
|
|||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: $grid-unit calc($grid-unit - 2px);
|
||||
|
||||
.block-editor-list-view-tree {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
|
||||
&-content {
|
||||
height: 100%;
|
||||
@media only screen and (max-width: $break-medium) {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background-color: $studio-white;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -71,6 +71,11 @@ export default function InserterSidebar() {
|
|||
rootClientId={ rootClientId }
|
||||
ref={ libraryRef }
|
||||
onClose={ closeInserter }
|
||||
onSelect={ () => {
|
||||
if ( isMobileViewport ) {
|
||||
closeInserter();
|
||||
}
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ type PluginSidebarProps = {
|
|||
isActiveByDefault?: boolean;
|
||||
name?: string;
|
||||
title?: string;
|
||||
smallScreenTitle: string;
|
||||
};
|
||||
|
||||
export function PluginSidebar( { className, ...props }: PluginSidebarProps ) {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,11 @@ const SettingsHeader = () => {
|
|||
return <strong>{ __( 'Settings', 'woocommerce' ) }</strong>;
|
||||
};
|
||||
|
||||
export const SettingsSidebar = () => {
|
||||
export const SettingsSidebar = ( {
|
||||
smallScreenTitle,
|
||||
}: {
|
||||
smallScreenTitle: string;
|
||||
} ) => {
|
||||
return (
|
||||
<PluginSidebar
|
||||
// By not providing a name, the sidebar will not be listed in
|
||||
|
|
@ -30,6 +34,7 @@ export const SettingsSidebar = () => {
|
|||
// the pin button in the default header from being displayed.
|
||||
header={ <SettingsHeader /> }
|
||||
closeLabel={ __( 'Close settings', 'woocommerce' ) }
|
||||
smallScreenTitle={ smallScreenTitle }
|
||||
>
|
||||
<BlockInspector />
|
||||
</PluginSidebar>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ type ModalEditorProps = {
|
|||
onClose?: () => void;
|
||||
settings?: Partial< EditorSettings & EditorBlockListSettings > | undefined;
|
||||
title: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export function ModalEditor( {
|
||||
|
|
@ -30,6 +31,7 @@ export function ModalEditor( {
|
|||
onChange,
|
||||
onClose,
|
||||
title,
|
||||
name,
|
||||
}: ModalEditorProps ) {
|
||||
const { closeModalEditor } = useDispatch( productEditorUiStore );
|
||||
|
||||
|
|
@ -58,6 +60,7 @@ export function ModalEditor( {
|
|||
onInput={ debouncedOnChange }
|
||||
onChange={ debouncedOnChange }
|
||||
onClose={ handleClose }
|
||||
name={ name }
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,11 @@ $modal-editor-height: 60px;
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: calc( 100% - 40px );
|
||||
margin: 20px;
|
||||
margin: $gap-large;
|
||||
@media only screen and (max-width: $break-mobile) {
|
||||
margin: unset;
|
||||
max-height: unset;
|
||||
}
|
||||
border-radius: 8px;
|
||||
|
||||
.components-modal__header {
|
||||
|
|
|
|||
Loading…
Reference in New Issue