Skip to content

Commit

Permalink
Block supports: ensure tools panel dropdown are visible on mobile (#6…
Browse files Browse the repository at this point in the history 
…2896)

* Remove the const `TOOLSPANEL_DROPDOWNMENU_PROPS` in favour of a hook that returns different popover props depending on the viewport width

* Remove offset completely

* Add to block support panels

* Replace in block library.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
  • Loading branch information
@ramonjd @talldan @gutenbergplugin
3 people authored and gutenbergplugin committed Jun 27, 2024
1 parent b5d75a0 commit 5640c95
Show file tree
Hide file tree
Showing 14 changed files with 66 additions and 38 deletions.
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/global-styles/background-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import { isBlobURL } from '@wordpress/blob';
/**
* Internal dependencies
*/
import { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import { useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';
import MediaReplaceFlow from '../media-replace-flow';
import { store as blockEditorStore } from '../../store';
Expand Down Expand Up @@ -600,6 +600,7 @@ function BackgroundToolsPanel( {
children,
headerLabel,
} ) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter( value );
onChange( updatedValue );
Expand All @@ -612,7 +613,7 @@ function BackgroundToolsPanel( {
label={ headerLabel }
resetAll={ resetAll }
panelId={ panelId }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
{ children }
</VStack>
Expand Down
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/global-styles/border-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
*/
import BorderRadiusControl from '../border-radius-control';
import { useColorsPerOrigin } from './hooks';
import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';
import { useBorderPanelLabel } from '../../hooks/border';
import { ShadowPopover, useShadowPresets } from './shadow-panel-components';
Expand Down Expand Up @@ -69,6 +69,7 @@ function BorderToolsPanel( {
children,
label,
} ) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter( value );
onChange( updatedValue );
Expand All @@ -79,7 +80,7 @@ function BorderToolsPanel( {
label={ label }
resetAll={ resetAll }
panelId={ panelId }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
{ children }
</ToolsPanel>
Expand Down
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/global-styles/color-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { __, sprintf } from '@wordpress/i18n';
*/
import ColorGradientControl from '../colors-gradients/control';
import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';
import { unlock } from '../../lock-unlock';

Expand Down Expand Up @@ -116,6 +116,7 @@ function ColorToolsPanel( {
panelId,
children,
} ) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter( value );
onChange( updatedValue );
Expand All @@ -131,7 +132,7 @@ function ColorToolsPanel( {
className="color-block-support-panel"
__experimentalFirstVisibleItemClass="first"
__experimentalLastVisibleItemClass="last"
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
<div className="color-block-support-panel__inner-wrapper">
{ children }
Expand Down
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/global-styles/dimensions-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { useCallback, useState, Platform } from '@wordpress/element';
/**
* Internal dependencies
*/
import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
import SpacingSizesControl from '../spacing-sizes-control';
import HeightControl from '../height-control';
import ChildLayoutControl from '../child-layout-control';
Expand Down Expand Up @@ -175,6 +175,7 @@ function DimensionsToolsPanel( {
panelId,
children,
} ) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter( value );
onChange( updatedValue );
Expand All @@ -185,7 +186,7 @@ function DimensionsToolsPanel( {
label={ __( 'Dimensions' ) }
resetAll={ resetAll }
panelId={ panelId }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
{ children }
</ToolsPanel>
Expand Down
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/global-styles/filters-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { useCallback, useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';

const EMPTY_ARRAY = [];
Expand Down Expand Up @@ -72,6 +72,7 @@ function FiltersToolsPanel( {
panelId,
children,
} ) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter( value );
onChange( updatedValue );
Expand All @@ -82,7 +83,7 @@ function FiltersToolsPanel( {
label={ _x( 'Filters', 'Name for applying graphical effects' ) }
resetAll={ resetAll }
panelId={ panelId }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
{ children }
</ToolsPanel>
Expand Down
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/global-styles/image-settings-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { __, _x } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import { useToolsPanelDropdownMenuProps } from './utils';

export function useHasImageSettingsPanel( name, value, inheritedValue ) {
// Note: If lightbox `value` exists, that means it was
Expand All @@ -30,6 +30,7 @@ export default function ImageSettingsPanel( {
inheritedValue,
panelId,
} ) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetLightbox = () => {
onChange( undefined );
};
Expand All @@ -52,7 +53,7 @@ export default function ImageSettingsPanel( {
label={ _x( 'Settings', 'Image settings' ) }
resetAll={ resetLightbox }
panelId={ panelId }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
// We use the `userSettings` prop instead of `settings`, because `settings`
Expand Down
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/global-styles/typography-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import TextAlignmentControl from '../text-alignment-control';
import TextTransformControl from '../text-transform-control';
import TextDecorationControl from '../text-decoration-control';
import WritingModeControl from '../writing-mode-control';
import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';

const MIN_TEXT_COLUMNS = 1;
Expand Down Expand Up @@ -135,6 +135,7 @@ function TypographyToolsPanel( {
panelId,
children,
} ) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetAll = () => {
const updatedValue = resetAllFilter( value );
onChange( updatedValue );
Expand All @@ -145,7 +146,7 @@ function TypographyToolsPanel( {
label={ __( 'Typography' ) }
resetAll={ resetAll }
panelId={ panelId }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
{ children }
</ToolsPanel>
Expand Down
23 changes: 17 additions & 6 deletions packages/block-editor/src/components/global-styles/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
*/
import fastDeepEqual from 'fast-deep-equal/es6';

/**
* WordPress dependencies
*/
import { useViewportMatch } from '@wordpress/compose';

/**
* Internal dependencies
*/
Expand Down Expand Up @@ -136,12 +141,18 @@ export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
'typography.fontFamily': 'fontFamily',
};

export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
popoverProps: {
placement: 'left-start',
offset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
},
};
export function useToolsPanelDropdownMenuProps() {
const isMobile = useViewportMatch( 'medium', '<' );
return ! isMobile
? {
popoverProps: {
placement: 'left-start',
// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
offset: 259,
},
}
: {};
}

function findInPresetsBy(
features,
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useCallback } from '@wordpress/element';
*/
import { store as blockEditorStore } from '../../store';
import { cleanEmptyObject } from '../../hooks/utils';
import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../global-styles/utils';
import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';

export default function BlockSupportToolsPanel( { children, group, label } ) {
const { updateBlockAttributes } = useDispatch( blockEditorStore );
Expand All @@ -20,7 +20,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
getSelectedBlockClientId,
hasMultiSelection,
} = useSelect( blockEditorStore );

const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const panelId = getSelectedBlockClientId();
const resetAll = useCallback(
( resetFilters = [] ) => {
Expand Down Expand Up @@ -72,7 +72,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
shouldRenderPlaceholderItems // Required to maintain fills ordering.
__experimentalFirstVisibleItemClass="first"
__experimentalLastVisibleItemClass="last"
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
{ children }
</ToolsPanel>
Expand Down
8 changes: 5 additions & 3 deletions packages/block-library/src/image/image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import { Caption } from '../utils/caption';
/**
* Module constants
*/
import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
import { evalAspectRatio } from './utils';

Expand Down Expand Up @@ -373,6 +373,8 @@ export default function Image( {
const lightboxChecked =
!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );

const dropdownMenuProps = useToolsPanelDropdownMenuProps();

const dimensionsControl = (
<DimensionsTool
value={ { width, height, scale, aspectRatio } }
Expand Down Expand Up @@ -419,7 +421,7 @@ export default function Image( {
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ resetAll }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
{ isResizable && dimensionsControl }
</ToolsPanel>
Expand Down Expand Up @@ -691,7 +693,7 @@ export default function Image( {
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ resetAll }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
{ isSingleSelected && (
<ToolsPanelItem
Expand Down
5 changes: 3 additions & 2 deletions packages/block-library/src/media-text/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import {
TEMPLATE,
} from './constants';
import { unlock } from '../lock-unlock';
import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';

const { ResolutionTool } = unlock( blockEditorPrivateApis );

Expand Down Expand Up @@ -276,6 +276,7 @@ function MediaTextEdit( {
mediaSizeSlug: newMediaSizeSlug,
} );
};
const dropdownMenuProps = useToolsPanelDropdownMenuProps();

const mediaTextGeneralSettings = (
<ToolsPanel
Expand All @@ -290,7 +291,7 @@ function MediaTextEdit( {
mediaSizeSlug: undefined,
} );
} }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
label={ __( 'Media width' ) }
Expand Down
5 changes: 3 additions & 2 deletions packages/block-library/src/query/edit/inspector-controls/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {
isControlAllowed,
useTaxonomies,
} from '../../utils';
import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../../../utils/constants';
import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';

const { BlockInfo } = unlock( blockEditorPrivateApis );

Expand Down Expand Up @@ -128,6 +128,7 @@ export default function QueryInspectorControls( props ) {
showAuthorControl ||
showSearchControl ||
showParentControl;
const dropdownMenuProps = useToolsPanelDropdownMenuProps();

return (
<>
Expand Down Expand Up @@ -221,7 +222,7 @@ export default function QueryInspectorControls( props ) {
} );
setQuerySearch( '' );
} }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
dropdownMenuProps={ dropdownMenuProps }
>
{ showTaxControl && (
<ToolsPanelItem
Expand Down
8 changes: 0 additions & 8 deletions packages/block-library/src/utils/constants.js
View file

This file was deleted.

14 changes: 14 additions & 0 deletions packages/block-library/src/utils/hooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useLayoutEffect, useEffect, useRef } from '@wordpress/element';
import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';
import { useViewportMatch } from '@wordpress/compose';

/**
* Returns whether the current user can edit the given entity.
Expand Down Expand Up @@ -84,3 +85,16 @@ export function useUploadMediaFromBlobURL( args = {} ) {
} );
}, [ getSettings ] );
}

export function useToolsPanelDropdownMenuProps() {
const isMobile = useViewportMatch( 'medium', '<' );
return ! isMobile
? {
popoverProps: {
placement: 'left-start',
// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
offset: 259,
},
}
: {};
}

0 comments on commit 5640c95

Please sign in to comment.