Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Address some styling conflicts in the description block editor toolbar on small viewports (#50435) 

* Some minor CSS changes to address GB styling conflicts

* Add changelog

* Address issue with sidebar not showing up sometimes
This commit is contained in:
louwie17 2024-08-08 14:41:18 -03:00 committed by GitHub
parent 623b1f320f
commit 003629efb3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/fix-49697_settings_button_on_mobile Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: tweak
Tweak header styling in description modal editor to address issues with smaller viewports.

4
packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss
View File

@ -31,8 +31,8 @@
align-items: center;
display: flex;
.woocommerce-iframe-editor-document-tools {
&__left {
.components-accessible-toolbar {
.woocommerce-iframe-editor-document-tools__left {
align-items: center;
display: inline-flex;
gap: 8px;

6
packages/js/product-editor/src/components/iframe-editor/iframe-editor.scss
View File

@ -75,4 +75,10 @@
display: none;
}
}
.woocommerce-iframe-editor__header-right
.interface-pinned-items
.components-button {
display: flex;
}
}

17
packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx
View File

@ -30,7 +30,6 @@ import {
// eslint-disable-next-line @woocommerce/dependency-group
import {
ComplementaryArea,
store as interfaceStore,
// @ts-expect-error No types for this exist yet.
} from '@wordpress/interface';
@ -118,18 +117,12 @@ export function IframeEditor( {
return select( blockEditorStore ).getSettings();
}, [] );
const { hasFixedToolbar, isRightSidebarOpen } = useSelect( ( select ) => {
const { hasFixedToolbar } = useSelect( ( select ) => {
// @ts-expect-error These selectors are available in the block data store.
const { get: getPreference } = select( preferencesStore );
// @ts-expect-error These selectors are available in the interface data store.
const { getActiveComplementaryArea } = select( interfaceStore );
return {
hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
isRightSidebarOpen: getActiveComplementaryArea(
SIDEBAR_COMPLEMENTARY_AREA_SCOPE
),
};
}, [] );
@ -264,11 +257,9 @@ export function IframeEditor( {
bounds. */ }
<div className="woocommerce-iframe-editor__content-inserter-clipper" />
</BlockTools>
{ isRightSidebarOpen && (
<ComplementaryArea.Slot
scope={ SIDEBAR_COMPLEMENTARY_AREA_SCOPE }
/>
) }
<ComplementaryArea.Slot
scope={ SIDEBAR_COMPLEMENTARY_AREA_SCOPE }
/>
</div>
{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
<PluginArea scope="woocommerce-product-editor-modal-block-editor" />