From 1dccb4d4e83104513fdea257de2859052068d76b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dami=C3=A1n=20Su=C3=A1rez?= Date: Fri, 17 May 2024 09:43:42 +0100 Subject: [PATCH 1/4] Components: introduce Combobox `expandOnFocus` property (#61705) Co-authored-by: retrofox Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 4 ++++ packages/components/src/combobox-control/README.md | 9 +++++++++ packages/components/src/combobox-control/index.tsx | 11 ++++++++++- .../src/combobox-control/stories/index.story.tsx | 14 ++++++++++++++ packages/components/src/combobox-control/types.ts | 7 +++++++ 5 files changed, 44 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 393c9f7e0797f1..7ada9626797d45 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Enhancements + +- `ComboboxControl`: Introduce Combobox expandOnFocus prop ([#61705](https://github.com/WordPress/gutenberg/pull/61705)). + ## 27.6.0 (2024-05-16) ### Internal diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md index fade4c66a796e3..68e1e08e599ab7 100644 --- a/packages/components/src/combobox-control/README.md +++ b/packages/components/src/combobox-control/README.md @@ -101,6 +101,15 @@ The current value of the control. - Type: `string | null` - Required: No +#### expandOnFocus + +Automatically expand the dropdown when the control is focused. +If the control is clicked, the dropdown will expand regardless of this prop. + +- Type: `Boolean` +- Required: No +- Default: `true` + #### __experimentalRenderItem Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop). diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx index b11a77b1dbdae6..a47e6ce5d8e451 100644 --- a/packages/components/src/combobox-control/index.tsx +++ b/packages/components/src/combobox-control/index.tsx @@ -127,6 +127,7 @@ function ComboboxControl( props: ComboboxControlProps ) { selected: __( 'Item selected.' ), }, __experimentalRenderItem, + expandOnFocus = true, } = useDeprecated36pxDefaultSizeProp( props ); const [ value, setValue ] = useControlledValue( { @@ -236,11 +237,18 @@ function ComboboxControl( props: ComboboxControlProps ) { const onFocus = () => { setInputHasFocus( true ); - setIsExpanded( true ); + if ( expandOnFocus ) { + setIsExpanded( true ); + } + onFilterValueChange( '' ); setInputValue( '' ); }; + const onClick = () => { + setIsExpanded( true ); + }; + const onFocusOutside = () => { setIsExpanded( false ); }; @@ -324,6 +332,7 @@ function ComboboxControl( props: ComboboxControlProps ) { value={ isExpanded ? inputValue : currentLabel } onFocus={ onFocus } onBlur={ onBlur } + onClick={ onClick } isExpanded={ isExpanded } selectedSuggestionIndex={ getIndexOfMatchingSuggestion( selectedSuggestion, diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx index e58f68277c916c..0f45c8a54a2ee3 100644 --- a/packages/components/src/combobox-control/stories/index.story.tsx +++ b/packages/components/src/combobox-control/stories/index.story.tsx @@ -139,3 +139,17 @@ WithDisabledOptions.args = { label: 'Select a country', options: optionsWithDisabledOptions, }; + +/** + * By default, the combobox expands when focused. + * You can disable this behavior by setting the `expandOnFocus` prop to `false`. + * This is useful when you want to show the suggestions only when the user interacts with the input. + */ +export const NotExpandOnFocus = Template.bind( {} ); + +NotExpandOnFocus.args = { + allowReset: false, + label: 'Select a country', + options: countryOptions, + expandOnFocus: false, +}; diff --git a/packages/components/src/combobox-control/types.ts b/packages/components/src/combobox-control/types.ts index ae20170629873c..61953ce9466293 100644 --- a/packages/components/src/combobox-control/types.ts +++ b/packages/components/src/combobox-control/types.ts @@ -45,6 +45,13 @@ export type ComboboxControlProps = Pick< * @default true */ allowReset?: boolean; + /** + * Automatically expand the dropdown when the control is focused. + * If the control is clicked, the dropdown will expand regardless of this prop. + * + * @default true + */ + expandOnFocus?: boolean; /** * Customizable UI messages. */ From f25f59d8680b0c4d9b68d1f3aaa94e209f3b9b80 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Fri, 17 May 2024 10:47:01 +0200 Subject: [PATCH 2/4] Block Bindings: Lock binding editing with functions (#61734) * Add lock as a function * Add edit value posibility for post meta, add function to check if is admin * Revert "Add edit value posibility for post meta, add function to check if is admin" This reverts commit 9659455eed4343c455760b2f9076fe3a5bdbf2d7. --------- Co-authored-by: cbravobernal Co-authored-by: SantosGuillamot --- packages/block-editor/src/components/rich-text/index.js | 2 +- packages/block-library/src/button/edit.js | 2 +- packages/block-library/src/image/edit.js | 2 +- packages/block-library/src/image/image.js | 6 +++--- packages/blocks/src/store/reducer.js | 5 ++++- packages/editor/src/bindings/pattern-overrides.js | 4 +++- 6 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index fd40eb7f1f49ad..2a0afcf24f0ddc 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -186,7 +186,7 @@ export function RichTextWrapper( ); if ( ! blockBindingsSource || - blockBindingsSource.lockAttributesEditing + blockBindingsSource.lockAttributesEditing() ) { _disableBoundBlocks = true; break; diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 45bc2b715e3ffb..155fe797e3147d 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -247,7 +247,7 @@ function ButtonEdit( props ) { lockUrlControls: !! metadata?.bindings?.url && ( ! blockBindingsSource || - blockBindingsSource?.lockAttributesEditing ), + blockBindingsSource?.lockAttributesEditing() ), }; }, [ isSelected ] diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index f6126195c09f9f..b5e7e6be095170 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -318,7 +318,7 @@ export function ImageEdit( { lockUrlControls: !! metadata?.bindings?.url && ( ! blockBindingsSource || - blockBindingsSource?.lockAttributesEditing ), + blockBindingsSource?.lockAttributesEditing() ), lockUrlControlsMessage: blockBindingsSource?.label ? sprintf( /* translators: %s: Label of the bindings source. */ diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 733c2f7e25a872..fc1199bb40fb01 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -463,7 +463,7 @@ export default function Image( { lockUrlControls: !! urlBinding && ( ! urlBindingSource || - urlBindingSource?.lockAttributesEditing ), + urlBindingSource?.lockAttributesEditing() ), lockHrefControls: // Disable editing the link of the URL if the image is inside a pattern instance. // This is a temporary solution until we support overriding the link on the frontend. @@ -475,7 +475,7 @@ export default function Image( { lockAltControls: !! altBinding && ( ! altBindingSource || - altBindingSource?.lockAttributesEditing ), + altBindingSource?.lockAttributesEditing() ), lockAltControlsMessage: altBindingSource?.label ? sprintf( /* translators: %s: Label of the bindings source. */ @@ -486,7 +486,7 @@ export default function Image( { lockTitleControls: !! titleBinding && ( ! titleBindingSource || - titleBindingSource?.lockAttributesEditing ), + titleBindingSource?.lockAttributesEditing() ), lockTitleControlsMessage: titleBindingSource?.label ? sprintf( /* translators: %s: Label of the bindings source. */ diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js index 9dd6dde6358a66..1d0d8cb2e968fc 100644 --- a/packages/blocks/src/store/reducer.js +++ b/packages/blocks/src/store/reducer.js @@ -381,7 +381,10 @@ export function blockBindingsSources( state = {}, action ) { setValue: action.setValue, setValues: action.setValues, getPlaceholder: action.getPlaceholder, - lockAttributesEditing: action.lockAttributesEditing ?? true, + lockAttributesEditing: () => + action.lockAttributesEditing + ? action.lockAttributesEditing() + : true, }, }; } diff --git a/packages/editor/src/bindings/pattern-overrides.js b/packages/editor/src/bindings/pattern-overrides.js index 7554da26481e3d..4065cefe362808 100644 --- a/packages/editor/src/bindings/pattern-overrides.js +++ b/packages/editor/src/bindings/pattern-overrides.js @@ -89,5 +89,7 @@ export default { }, } ); }, - lockAttributesEditing: false, + lockAttributesEditing() { + return false; + }, }; From 72612dc94ce38ab2419669b3f0e844e515c975d1 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Fri, 17 May 2024 12:28:56 +0200 Subject: [PATCH 3/4] [Mobile] - Remove circular dependencies within the components package (#61102) * Components - Move mobile global styles context to the block editor package * Components - Remove moved files * Components - Move mobile AudioPlayer to Block Editor components * Update moved components * Components - Update exports for native Block Editor and Component packages * Update imports in block files * Update imports for format library and color settings * Update imports in block editor and editor components * [Mobile] - Update components imports (#61109) * Components - AutoComplete - Fix components imports * Components - ColorIndicator - Fix components imports * Components - ColorPicker - Fix components imports * Components - CustomGradient - Fix components imports * Components - DashIcon - Fix components imports * Components - Draggable - Fix components imports * Components - DropdownMenu - Fix components imports * Components - FocalPointPicker - Fix components imports * Components - FontSizePicker - Fix components imports * Components - AutoCompletion - Fix components imports * Components - BottomSheet - Fix components imports * Components - ColorSettings - Fix components imports * Components - FocalPointSettingsPanel - Fix components imports * Components - Gradient - Fix components imports * Components - Image - Fix components imports * Components - LinkPicker - Fix components imports * Components - LinkSettings - Fix components imports * Components - MediaEdit - Fix components imports * Components - Picker - Fix components imports * Components - Panel - Fix components imports * Components - QueryControls - Fix components imports * Components - SearchControl - Fix components imports * Components - Tooltip - Fix components imports Co-authored-by: geriux Co-authored-by: twstokes * Mobile - Update changelog --------- Co-authored-by: geriux Co-authored-by: twstokes --- .../audio-player/audio-url-parser.native.js | 0 .../components}/audio-player/index.native.js | 3 +- .../audio-player/styles.native.scss} | 0 .../test/audio-url-parser.native.js | 0 .../src/components/block-list/block.native.js | 14 +- .../block-settings/container.native.js | 2 + .../global-styles/color-panel.native.js | 2 +- .../test/use-global-styles-context.native.js} | 174 +++++++++++++++++- .../use-global-styles-context.native.js} | 96 +++++++++- .../src/components/index.native.js | 7 + .../block-library/src/audio/edit.native.js | 2 +- .../src/block/edit-title.native.js | 3 +- .../block-library/src/button/edit.native.js | 2 +- .../block-library/src/columns/edit.native.js | 5 +- .../block-library/src/cover/edit.native.js | 7 +- .../cover/overlay-color-settings.native.js | 2 +- .../autocomplete/autocompleter-ui.native.js | 6 +- .../src/color-indicator/index.native.js | 2 +- .../src/color-picker/index.native.js | 2 +- .../custom-gradient-picker/index.native.js | 4 +- .../components/src/dashicon/index.native.js | 2 +- .../src/draggable/test/index.native.js | 4 +- .../src/dropdown-menu/index.native.js | 3 +- .../src/focal-point-picker/index.native.js | 3 +- .../src/font-size-picker/index.native.js | 2 +- packages/components/src/index.native.js | 14 -- .../src/mobile/autocompletion-items.native.js | 4 +- .../index.native.js | 3 +- .../bottom-sheet-text-control/index.native.js | 8 +- .../navigation-screen.native.js | 3 +- .../src/mobile/bottom-sheet/cell.native.js | 2 +- .../mobile/bottom-sheet/color-cell.native.js | 3 +- .../bottom-sheet/sub-sheet/index.native.js | 7 +- .../src/mobile/color-settings/index.native.js | 3 +- .../color-settings/palette.screen.native.js | 11 +- .../color-settings/picker-screen.native.js | 2 +- .../index.native.js | 3 +- .../global-styles-context/index.native.js | 103 ----------- .../test/utils.native.js | 168 ----------------- .../src/mobile/gradient/index.native.js | 2 +- .../src/mobile/image/icon-customize.native.js | 2 +- .../src/mobile/image/icon-retry.native.js | 2 +- .../image/image-editing-button.native.js | 2 +- .../src/mobile/image/index.native.js | 2 +- .../src/mobile/link-picker/index.native.js | 3 +- .../link-picker/link-picker-results.native.js | 3 +- .../mobile/link-settings/link-rel.native.js | 2 +- .../src/mobile/media-edit/index.native.js | 6 +- .../src/mobile/picker/index.android.js | 3 +- .../components/src/mobile/picker/index.ios.js | 2 +- .../use-unit-converter-to-mobile.native.js | 16 +- .../components/src/panel/actions.native.js | 2 +- .../src/query-controls/index.native.js | 3 +- .../src/search-control/index.native.js | 3 +- .../src/tooltip/test/index.native.js | 6 +- .../src/components/provider/index.native.js | 7 +- .../src/text-color/index.native.js | 8 +- .../src/text-color/inline.native.js | 8 +- packages/react-native-editor/CHANGELOG.md | 1 + 59 files changed, 365 insertions(+), 399 deletions(-) rename packages/{components/src/mobile => block-editor/src/components}/audio-player/audio-url-parser.native.js (100%) rename packages/{components/src/mobile => block-editor/src/components}/audio-player/index.native.js (97%) rename packages/{components/src/mobile/audio-player/styles.scss => block-editor/src/components/audio-player/styles.native.scss} (100%) rename packages/{components/src/mobile => block-editor/src/components}/audio-player/test/audio-url-parser.native.js (100%) rename packages/{components/src/mobile/global-styles-context/test/fixtures/theme.native.js => block-editor/src/components/global-styles/test/use-global-styles-context.native.js} (53%) rename packages/{components/src/mobile/global-styles-context/utils.native.js => block-editor/src/components/global-styles/use-global-styles-context.native.js} (85%) delete mode 100644 packages/components/src/mobile/global-styles-context/index.native.js delete mode 100644 packages/components/src/mobile/global-styles-context/test/utils.native.js diff --git a/packages/components/src/mobile/audio-player/audio-url-parser.native.js b/packages/block-editor/src/components/audio-player/audio-url-parser.native.js similarity index 100% rename from packages/components/src/mobile/audio-player/audio-url-parser.native.js rename to packages/block-editor/src/components/audio-player/audio-url-parser.native.js diff --git a/packages/components/src/mobile/audio-player/index.native.js b/packages/block-editor/src/components/audio-player/index.native.js similarity index 97% rename from packages/components/src/mobile/audio-player/index.native.js rename to packages/block-editor/src/components/audio-player/index.native.js index c5d7c0e8132c1e..0deea5df4bb518 100644 --- a/packages/components/src/mobile/audio-player/index.native.js +++ b/packages/block-editor/src/components/audio-player/index.native.js @@ -14,7 +14,7 @@ import { default as VideoPlayer } from 'react-native-video'; * WordPress dependencies */ import { View } from '@wordpress/primitives'; -import { Icon, useEditorColorScheme } from '@wordpress/components'; +import { Icon } from '@wordpress/components'; import { withPreferredColorScheme } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { audio, warning } from '@wordpress/icons'; @@ -30,6 +30,7 @@ import { useState } from '@wordpress/element'; */ import styles from './styles.scss'; import { parseAudioUrl } from './audio-url-parser.native'; +import { useEditorColorScheme } from '../global-styles/use-global-styles-context'; const isIOS = Platform.OS === 'ios'; diff --git a/packages/components/src/mobile/audio-player/styles.scss b/packages/block-editor/src/components/audio-player/styles.native.scss similarity index 100% rename from packages/components/src/mobile/audio-player/styles.scss rename to packages/block-editor/src/components/audio-player/styles.native.scss diff --git a/packages/components/src/mobile/audio-player/test/audio-url-parser.native.js b/packages/block-editor/src/components/audio-player/test/audio-url-parser.native.js similarity index 100% rename from packages/components/src/mobile/audio-player/test/audio-url-parser.native.js rename to packages/block-editor/src/components/audio-player/test/audio-url-parser.native.js diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 5660efb2ad3971..03456c9fb77aed 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -14,13 +14,7 @@ import { useRef, memo, } from '@wordpress/element'; -import { - GlobalStylesContext, - getMergedGlobalStyles, - useMobileGlobalStylesColors, - useGlobalStyles, - withFilters, -} from '@wordpress/components'; +import { withFilters } from '@wordpress/components'; import { __experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel, getBlockType, @@ -51,6 +45,12 @@ import { useSettings } from '../use-settings'; import { unlock } from '../../lock-unlock'; import BlockCrashBoundary from './block-crash-boundary'; import BlockCrashWarning from './block-crash-warning'; +import { + getMergedGlobalStyles, + GlobalStylesContext, + useGlobalStyles, + useMobileGlobalStylesColors, +} from '../global-styles/use-global-styles-context'; const EMPTY_ARRAY = []; diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index bb31bf0bc2bb84..aa2583c960559e 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -16,6 +16,7 @@ import styles from './container.native.scss'; import InspectorControls from '../inspector-controls'; import ImageLinkDestinationsScreen from '../image-link-destinations'; import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients'; +import { useMobileGlobalStylesColors } from '../global-styles/use-global-styles-context'; import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel'; export const blockSettingsScreens = { @@ -28,6 +29,7 @@ export const blockSettingsScreens = { export default function BottomSheetSettings( props ) { const colorSettings = useMultipleOriginColorsAndGradients(); + colorSettings.allAvailableColors = useMobileGlobalStylesColors(); const { closeGeneralSidebar } = useDispatch( 'core/edit-post' ); const editorSidebarOpened = useSelect( ( select ) => select( 'core/edit-post' ).isEditorSidebarOpened() diff --git a/packages/block-editor/src/components/global-styles/color-panel.native.js b/packages/block-editor/src/components/global-styles/color-panel.native.js index c69c9e26f902c0..fcbff4e5a07d78 100644 --- a/packages/block-editor/src/components/global-styles/color-panel.native.js +++ b/packages/block-editor/src/components/global-styles/color-panel.native.js @@ -4,7 +4,6 @@ import { useSelect } from '@wordpress/data'; import { useEffect, useState, useMemo, useCallback } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { useGlobalStyles } from '@wordpress/components'; import { store as blockEditorStore } from '@wordpress/block-editor'; /** @@ -21,6 +20,7 @@ import { useHasTextPanel, useHasBackgroundPanel, } from './color-panel.js'; +import { useGlobalStyles } from './use-global-styles-context'; const ColorPanel = ( { value, diff --git a/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js similarity index 53% rename from packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js rename to packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js index c9732f7825c35c..a247b4132b1ff7 100644 --- a/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js +++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js @@ -1,10 +1,20 @@ -export const DEFAULT_COLORS = [ +/** + * Internal dependencies + */ +import { + getBlockPaddings, + getBlockColors, + parseStylesVariables, + getGlobalStyles, +} from '../use-global-styles-context'; + +const DEFAULT_COLORS = [ { color: '#cd2653', name: 'Accent Color', slug: 'accent' }, { color: '#000000', name: 'Primary', slug: 'primary' }, { color: '#6d6d6d', name: 'Secondary', slug: 'secondary' }, ]; -export const GLOBAL_STYLES_PALETTE = [ +const GLOBAL_STYLES_PALETTE = [ { slug: 'green', color: '#D1E4DD', @@ -27,7 +37,7 @@ export const GLOBAL_STYLES_PALETTE = [ }, ]; -export const GLOBAL_STYLES_GRADIENTS = { +const GLOBAL_STYLES_GRADIENTS = { default: [ { name: 'Vivid cyan blue to vivid purple', @@ -58,7 +68,7 @@ export const GLOBAL_STYLES_GRADIENTS = { ], }; -export const DEFAULT_GLOBAL_STYLES = { +const DEFAULT_GLOBAL_STYLES = { color: { background: 'var(--wp--preset--color--green)', text: 'var(--wp--preset--color--blue)', @@ -104,7 +114,7 @@ export const DEFAULT_GLOBAL_STYLES = { }, }; -export const PARSED_GLOBAL_STYLES = { +const PARSED_GLOBAL_STYLES = { color: { background: '#D1E4DD', text: '#D1DFE4', @@ -150,7 +160,7 @@ export const PARSED_GLOBAL_STYLES = { }, }; -export const RAW_FEATURES = { +const RAW_FEATURES = { color: { palette: { default: [ @@ -262,7 +272,7 @@ export const RAW_FEATURES = { }, }; -export const MAPPED_VALUES = { +const MAPPED_VALUES = { color: { values: GLOBAL_STYLES_PALETTE, slug: 'color', @@ -272,3 +282,153 @@ export const MAPPED_VALUES = { slug: 'size', }, }; + +describe( 'getBlockPaddings', () => { + const PADDING = 12; + + it( 'returns no paddings for a block without background color', () => { + const paddings = getBlockPaddings( + { color: 'red' }, + { backgroundColor: 'red' }, + { textColor: 'primary' } + ); + expect( paddings ).toEqual( expect.objectContaining( {} ) ); + } ); + + it( 'returns paddings for a block with background color', () => { + const paddings = getBlockPaddings( + { color: 'red' }, + {}, + { backgroundColor: 'red', textColor: 'primary' } + ); + expect( paddings ).toEqual( + expect.objectContaining( { padding: PADDING } ) + ); + } ); + + it( 'returns no paddings for an inner block without background color within a parent block with background color', () => { + const paddings = getBlockPaddings( + { backgroundColor: 'blue', color: 'yellow', padding: PADDING }, + {}, + { textColor: 'primary' } + ); + + expect( paddings ).toEqual( + expect.not.objectContaining( { padding: PADDING } ) + ); + } ); +} ); + +describe( 'getBlockColors', () => { + it( 'returns the theme colors correctly', () => { + const blockColors = getBlockColors( + { backgroundColor: 'accent', textColor: 'secondary' }, + DEFAULT_COLORS + ); + expect( blockColors ).toEqual( + expect.objectContaining( { + backgroundColor: '#cd2653', + color: '#6d6d6d', + } ) + ); + } ); + + it( 'returns custom background color correctly', () => { + const blockColors = getBlockColors( + { backgroundColor: '#222222', textColor: 'accent' }, + DEFAULT_COLORS + ); + expect( blockColors ).toEqual( + expect.objectContaining( { + backgroundColor: '#222222', + color: '#cd2653', + } ) + ); + } ); + + it( 'returns custom text color correctly', () => { + const blockColors = getBlockColors( + { textColor: '#4ddddd' }, + DEFAULT_COLORS + ); + expect( blockColors ).toEqual( + expect.objectContaining( { + color: '#4ddddd', + } ) + ); + } ); +} ); + +describe( 'parseStylesVariables', () => { + it( 'returns the parsed preset values correctly', () => { + const customValues = parseStylesVariables( + JSON.stringify( RAW_FEATURES.custom ), + MAPPED_VALUES + ); + const blockColors = parseStylesVariables( + JSON.stringify( DEFAULT_GLOBAL_STYLES ), + MAPPED_VALUES, + customValues + ); + expect( blockColors ).toEqual( + expect.objectContaining( PARSED_GLOBAL_STYLES ) + ); + } ); + + it( 'returns the parsed custom color values correctly', () => { + const defaultStyles = { + ...DEFAULT_GLOBAL_STYLES, + color: { + text: 'var(--wp--custom--color--blue)', + background: 'var(--wp--custom--color--green)', + }, + }; + const customValues = parseStylesVariables( + JSON.stringify( RAW_FEATURES.custom ), + MAPPED_VALUES + ); + const styles = parseStylesVariables( + JSON.stringify( defaultStyles ), + MAPPED_VALUES, + customValues + ); + expect( styles ).toEqual( + expect.objectContaining( PARSED_GLOBAL_STYLES ) + ); + } ); +} ); + +describe( 'getGlobalStyles', () => { + it( 'returns the global styles data correctly', () => { + const rawFeatures = JSON.stringify( RAW_FEATURES ); + const gradients = parseStylesVariables( + JSON.stringify( GLOBAL_STYLES_GRADIENTS ), + MAPPED_VALUES + ); + + const globalStyles = getGlobalStyles( + JSON.stringify( DEFAULT_GLOBAL_STYLES ), + rawFeatures + ); + + expect( globalStyles ).toEqual( + expect.objectContaining( { + __experimentalFeatures: { + color: { + palette: RAW_FEATURES.color.palette, + gradients, + text: true, + background: true, + defaultPalette: true, + defaultGradients: true, + }, + typography: { + fontSizes: RAW_FEATURES.typography.fontSizes, + customLineHeight: RAW_FEATURES.custom[ 'line-height' ], + }, + }, + __experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES, + } ) + ); + } ); +} ); diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js similarity index 85% rename from packages/components/src/mobile/global-styles-context/utils.native.js rename to packages/block-editor/src/components/global-styles/use-global-styles-context.native.js index f03a2afa77c406..31bcd899fda7a9 100644 --- a/packages/components/src/mobile/global-styles-context/utils.native.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js @@ -8,20 +8,18 @@ import { colord } from 'colord'; /** * WordPress dependencies */ -import { - useSettings, - useMultipleOriginColorsAndGradients, - SETTINGS_DEFAULTS, -} from '@wordpress/block-editor'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; +import { createContext, useContext } from '@wordpress/element'; +import { getPxFromCssUnit } from '@wordpress/components'; /** * Internal dependencies */ -import { default as getPxFromCssUnit } from '../utils/get-px-from-css-unit'; -import { useGlobalStyles } from './index.native'; +import useMultipleOriginColorsAndGradients from '../colors-gradients/use-multiple-origin-colors-and-gradients'; +import { useSettings } from '../use-settings'; +import { SETTINGS_DEFAULTS } from '../../store/defaults'; -export const BLOCK_STYLE_ATTRIBUTES = [ +const BLOCK_STYLE_ATTRIBUTES = [ 'textColor', 'backgroundColor', 'style', @@ -29,6 +27,9 @@ export const BLOCK_STYLE_ATTRIBUTES = [ 'fontSize', ]; +export const GlobalStylesContext = createContext( { style: {} } ); +GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES; + // Mapping style properties name to native. const BLOCK_STYLE_ATTRIBUTES_MAPPING = { textColor: 'color', @@ -141,7 +142,7 @@ export function getBlockColors( return blockStyles; } -export function getBlockTypography( +function getBlockTypography( blockStyleAttributes, fontSizes, blockName, @@ -310,7 +311,7 @@ export function parseStylesVariables( styles, mappedValues, customValues ) { return JSON.parse( stylesBase ); } -export function getMappedValues( features, palette ) { +function getMappedValues( features, palette ) { const typography = features?.typography; const colors = [ ...( palette?.theme || [] ), @@ -472,6 +473,81 @@ export function getGlobalStyles( rawStyles, rawFeatures ) { }; } +export const getMergedGlobalStyles = ( + baseGlobalStyles, + globalStyle, + wrapperPropsStyle, + blockAttributes, + defaultColors, + blockName, + fontSizes +) => { + // Current support for general styles and blocks. + const baseGlobalColors = { + baseColors: { + color: baseGlobalStyles?.color, + typography: baseGlobalStyles?.typography, + elements: { + link: baseGlobalStyles?.elements?.link, + }, + blocks: { + 'core/button': baseGlobalStyles?.blocks?.[ 'core/button' ], + }, + }, + }; + + const blockStyleAttributes = Object.fromEntries( + Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) => + BLOCK_STYLE_ATTRIBUTES.includes( key ) + ) + ); + + // This prevents certain wrapper styles from being applied to blocks that + // don't support them yet. + const wrapperPropsStyleFiltered = Object.fromEntries( + Object.entries( wrapperPropsStyle ?? {} ).filter( ( [ key ] ) => + BLOCK_STYLE_ATTRIBUTES.includes( key ) + ) + ); + + const mergedStyle = { + ...baseGlobalColors, + ...globalStyle, + ...wrapperPropsStyleFiltered, + }; + const blockColors = getBlockColors( + blockStyleAttributes, + defaultColors, + blockName, + baseGlobalStyles + ); + const blockPaddings = getBlockPaddings( + mergedStyle, + wrapperPropsStyle, + blockStyleAttributes, + blockColors + ); + const blockTypography = getBlockTypography( + blockStyleAttributes, + fontSizes, + blockName, + baseGlobalStyles + ); + + return { + ...mergedStyle, + ...blockPaddings, + ...blockColors, + ...blockTypography, + }; +}; + +export const useGlobalStyles = () => { + const globalStyles = useContext( GlobalStylesContext ); + + return globalStyles; +}; + /** * Determine and apply appropriate color scheme based on global styles or device's light/dark mode. * diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index debf5a074a07a9..ae565cd9cc665a 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -71,6 +71,12 @@ export { default as Warning } from './warning'; export { default as ContrastChecker } from './contrast-checker'; export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients'; export { default as UnsupportedBlockDetails } from './unsupported-block-details'; +export { + useGlobalStyles, + getGlobalStyles, + getColorsAndGradients, + useMobileGlobalStylesColors, +} from './global-styles/use-global-styles-context'; export { BottomSheetSettings, @@ -78,6 +84,7 @@ export { blockSettingsScreens, } from './block-settings'; export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player'; +export { default as AudioPlayer } from './audio-player'; export { getSpacingPresetCssVar, diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js index 4de2fdcefe22f5..ab2b1b28441286 100644 --- a/packages/block-library/src/audio/edit.native.js +++ b/packages/block-library/src/audio/edit.native.js @@ -13,9 +13,9 @@ import { ToggleControl, ToolbarButton, ToolbarGroup, - AudioPlayer, } from '@wordpress/components'; import { + AudioPlayer, BlockCaption, BlockControls, BlockIcon, diff --git a/packages/block-library/src/block/edit-title.native.js b/packages/block-library/src/block/edit-title.native.js index d0c7d981202d99..9c33fd7164cccb 100644 --- a/packages/block-library/src/block/edit-title.native.js +++ b/packages/block-library/src/block/edit-title.native.js @@ -6,7 +6,8 @@ import { Text, View } from 'react-native'; /** * WordPress dependencies */ -import { Icon, useGlobalStyles } from '@wordpress/components'; +import { Icon } from '@wordpress/components'; +import { useGlobalStyles } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { withPreferredColorScheme } from '@wordpress/compose'; import { help, lock } from '@wordpress/icons'; diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index e975710f821e1e..26509a93de6864 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -17,6 +17,7 @@ import { getColorObjectByAttributeValues, getGradientValueBySlug, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, + useMobileGlobalStylesColors, } from '@wordpress/block-editor'; import { PanelBody, @@ -28,7 +29,6 @@ import { BottomSheetSelectControl, CSS_UNITS, filterUnitsWithSettings, - useMobileGlobalStylesColors, } from '@wordpress/components'; import { link } from '@wordpress/icons'; // eslint-disable-next-line no-restricted-imports diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index 1ab31bddbbe41a..07655981edcada 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/packages/block-library/src/columns/edit.native.js @@ -13,7 +13,6 @@ import { FooterMessageControl, UnitControl, getValueAndUnit, - GlobalStylesContext, alignmentHelpers, __experimentalUseCustomUnits as useCustomUnits, } from '@wordpress/components'; @@ -25,12 +24,12 @@ import { BlockVariationPicker, useSettings, store as blockEditorStore, + useGlobalStyles, } from '@wordpress/block-editor'; import { withDispatch, useSelect } from '@wordpress/data'; import { useEffect, useState, - useContext, useMemo, useCallback, memo, @@ -90,7 +89,7 @@ function ColumnsEditContainer( { const [ resizeListener, sizes ] = useResizeObserver(); const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUM ); const screenWidth = Math.floor( Dimensions.get( 'window' ).width ); - const globalStyles = useContext( GlobalStylesContext ); + const globalStyles = useGlobalStyles(); const { verticalAlignment, align } = attributes; const { width } = sizes || {}; diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 6e2c5520e27605..8e3a37a50c7c28 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -33,7 +33,6 @@ import { ColorPicker, BottomSheetConsumer, useConvertUnitToMobile, - useMobileGlobalStylesColors, } from '@wordpress/components'; import { BlockControls, @@ -47,6 +46,8 @@ import { getColorObjectByAttributeValues, getGradientValueBySlug, store as blockEditorStore, + useGlobalStyles, + useMobileGlobalStylesColors, } from '@wordpress/block-editor'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; import { useDispatch, withSelect, withDispatch } from '@wordpress/data'; @@ -156,9 +157,11 @@ const Cover = ( { mediaUploadSync(); }, [] ); + const globalStyles = useGlobalStyles(); const convertedMinHeight = useConvertUnitToMobile( minHeight || COVER_DEFAULT_HEIGHT, - minHeightUnit + minHeightUnit, + globalStyles ); const isImage = backgroundType === MEDIA_TYPE_IMAGE; diff --git a/packages/block-library/src/cover/overlay-color-settings.native.js b/packages/block-library/src/cover/overlay-color-settings.native.js index 7a68e207ffb276..a8acf8bf11b102 100644 --- a/packages/block-library/src/cover/overlay-color-settings.native.js +++ b/packages/block-library/src/cover/overlay-color-settings.native.js @@ -12,9 +12,9 @@ import { getGradientValueBySlug, getGradientSlugByValue, __experimentalPanelColorGradientSettings as PanelColorGradientSettings, + useMobileGlobalStylesColors, } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; -import { useMobileGlobalStylesColors } from '@wordpress/components'; function OverlayColorSettings( { overlayColor, diff --git a/packages/components/src/autocomplete/autocompleter-ui.native.js b/packages/components/src/autocomplete/autocompleter-ui.native.js index 1785d742d1ee44..1400c78e518d75 100644 --- a/packages/components/src/autocomplete/autocompleter-ui.native.js +++ b/packages/components/src/autocomplete/autocompleter-ui.native.js @@ -21,10 +21,6 @@ import { useCallback, } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; -import { - Icon, - __unstableAutocompletionItemsFill as AutocompletionItemsFill, -} from '@wordpress/components'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** @@ -33,6 +29,8 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import BackgroundView from './background-view'; import getDefaultUseItems from './get-default-use-items'; import styles from './style.scss'; +import Icon from '../icon'; +import { __unstableAutocompletionItemsFill as AutocompletionItemsFill } from '../mobile/autocompletion-items'; const { compose: stylesCompose } = StyleSheet; diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index 2a058f25ceec4c..b76915e87469e3 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -6,12 +6,12 @@ import { View, Animated } from 'react-native'; * WordPress dependencies */ import { Icon, check } from '@wordpress/icons'; -import { Gradient } from '@wordpress/components'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies */ import styles from './style.scss'; +import Gradient from '../mobile/gradient'; import { colorsUtils } from '../mobile/color-settings/utils'; function SelectedIcon( { opacity } ) { diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 92228ca669064d..46059a58520ba9 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -9,7 +9,6 @@ import namesPlugin from 'colord/plugins/names'; */ import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { BottomSheet } from '@wordpress/components'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { Icon, check, close } from '@wordpress/icons'; /** @@ -17,6 +16,7 @@ import { Icon, check, close } from '@wordpress/icons'; */ import styles from './style.scss'; import HsvColorPicker from './hsv-color-picker.native.js'; +import BottomSheet from '../mobile/bottom-sheet'; extend( [ namesPlugin ] ); diff --git a/packages/components/src/custom-gradient-picker/index.native.js b/packages/components/src/custom-gradient-picker/index.native.js index d10ade0aea7c2e..12b2e44e379e68 100644 --- a/packages/components/src/custom-gradient-picker/index.native.js +++ b/packages/components/src/custom-gradient-picker/index.native.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { PanelBody, RadioControl, RangeControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; @@ -16,6 +15,9 @@ import { HORIZONTAL_GRADIENT_ORIENTATION, } from './constants'; import styles from './style.scss'; +import PanelBody from '../panel/body'; +import RadioControl from '../radio-control'; +import RangeControl from '../range-control'; function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) { const [ gradientOrientation, setGradientOrientation ] = useState( diff --git a/packages/components/src/dashicon/index.native.js b/packages/components/src/dashicon/index.native.js index 35f9f6f99cb6f7..aba26313412602 100644 --- a/packages/components/src/dashicon/index.native.js +++ b/packages/components/src/dashicon/index.native.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { Icon } from '@wordpress/components'; +import { Icon } from '@wordpress/icons'; /** * Internal dependencies diff --git a/packages/components/src/draggable/test/index.native.js b/packages/components/src/draggable/test/index.native.js index 6fb20fc04e0b47..ca607960010d18 100644 --- a/packages/components/src/draggable/test/index.native.js +++ b/packages/components/src/draggable/test/index.native.js @@ -10,9 +10,9 @@ import { State } from 'react-native-gesture-handler'; import Animated from 'react-native-reanimated'; /** - * WordPress dependencies + * Internal dependencies */ -import { Draggable, DraggableTrigger } from '@wordpress/components'; +import Draggable, { DraggableTrigger } from '../../draggable'; // Touch event type constants have been extracted from original source code, as they are not exported in the package. // Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js index 6f360aa55ca599..1e9d6569afc932 100644 --- a/packages/components/src/dropdown-menu/index.native.js +++ b/packages/components/src/dropdown-menu/index.native.js @@ -6,7 +6,6 @@ import { Platform } from 'react-native'; /** * WordPress dependencies */ -import { BottomSheet, PanelBody } from '@wordpress/components'; import { withPreferredColorScheme } from '@wordpress/compose'; import { menu } from '@wordpress/icons'; @@ -15,6 +14,8 @@ import { menu } from '@wordpress/icons'; */ import Button from '../button'; import Dropdown from '../dropdown'; +import BottomSheet from '../mobile/bottom-sheet'; +import PanelBody from '../panel/body'; function mergeProps( defaultProps = {}, props = {} ) { const mergedProps = { diff --git a/packages/components/src/focal-point-picker/index.native.js b/packages/components/src/focal-point-picker/index.native.js index 834c962eae7b1c..9a11673aa41bb0 100644 --- a/packages/components/src/focal-point-picker/index.native.js +++ b/packages/components/src/focal-point-picker/index.native.js @@ -12,7 +12,6 @@ import { setFocalPointPickerTooltipShown, } from '@wordpress/react-native-bridge'; import { __ } from '@wordpress/i18n'; -import { Image, UnitControl } from '@wordpress/components'; import { useRef, useState, useMemo, useEffect } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; @@ -24,6 +23,8 @@ import Tooltip from './tooltip'; import styles from './style.scss'; import { isVideoType } from './utils'; import { clamp } from '../utils/math'; +import Image from '../mobile/image'; +import UnitControl from '../unit-control'; const MIN_POSITION_VALUE = 0; const MAX_POSITION_VALUE = 100; diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js index b6e9d5797564b0..ad9b7a54248d00 100644 --- a/packages/components/src/font-size-picker/index.native.js +++ b/packages/components/src/font-size-picker/index.native.js @@ -10,7 +10,6 @@ import { useNavigation } from '@react-navigation/native'; import { useState } from '@wordpress/element'; import { Icon, chevronRight, check } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; -import { BottomSheet } from '@wordpress/components'; /** * Internal dependencies @@ -18,6 +17,7 @@ import { BottomSheet } from '@wordpress/components'; import { default as getPxFromCssUnit } from '../mobile/utils/get-px-from-css-unit'; import { default as UnitControl, useCustomUnits } from '../unit-control'; import styles from './style.scss'; +import BottomSheet from '../mobile/bottom-sheet'; const DEFAULT_FONT_SIZE = 16; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 1421316d27b400..7c2866cbe98b13 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -111,7 +111,6 @@ export { default as Image } from './mobile/image'; export { IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image/constants'; export { default as ImageEditingButton } from './mobile/image/image-editing-button'; export { setClipboard, getClipboard } from './mobile/clipboard'; -export { default as AudioPlayer } from './mobile/audio-player'; export { default as Badge } from './mobile/badge'; export { default as Gridicons } from './mobile/gridicons'; @@ -131,18 +130,5 @@ export { getValueAndUnit, } from './mobile/utils/use-unit-converter-to-mobile'; -export { - default as GlobalStylesContext, - useGlobalStyles, - withGlobalStyles, - getMergedGlobalStyles, -} from './mobile/global-styles-context'; -export { - getGlobalStyles, - getColorsAndGradients, - useMobileGlobalStylesColors, - useEditorColorScheme, -} from './mobile/global-styles-context/utils'; - // Private APIs. export { privateApis } from './private-apis'; diff --git a/packages/components/src/mobile/autocompletion-items.native.js b/packages/components/src/mobile/autocompletion-items.native.js index 320dc6758ba5dd..9d010dc3a144eb 100644 --- a/packages/components/src/mobile/autocompletion-items.native.js +++ b/packages/components/src/mobile/autocompletion-items.native.js @@ -1,7 +1,7 @@ /** - * WordPress dependencies + * Internal dependencies */ -import { createSlotFill } from '@wordpress/components'; +import { createSlotFill } from '../slot-fill'; const { Fill, Slot } = createSlotFill( '__unstableAutocompletionItemsSlot' ); diff --git a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js index 8c3a29b85453db..3df0f47f2f363f 100644 --- a/packages/components/src/mobile/bottom-sheet-select-control/index.native.js +++ b/packages/components/src/mobile/bottom-sheet-select-control/index.native.js @@ -10,11 +10,12 @@ import { useNavigation } from '@react-navigation/native'; import { useState } from '@wordpress/element'; import { Icon, chevronRight, check } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; -import { BottomSheet } from '@wordpress/components'; + /** * Internal dependencies */ import styles from './style.scss'; +import BottomSheet from '../bottom-sheet'; const EMPTY_OPTION = { label: '', diff --git a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js index a66d3648afdcbf..6c42b1ff817834 100644 --- a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js +++ b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js @@ -10,16 +10,14 @@ import { useNavigation } from '@react-navigation/native'; import { useState } from '@wordpress/element'; import { Icon, chevronRight } from '@wordpress/icons'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { - BottomSheet, - PanelBody, - FooterMessageControl, -} from '@wordpress/components'; /** * Internal dependencies */ import styles from './styles.scss'; +import BottomSheet from '../bottom-sheet'; +import PanelBody from '../../panel/body'; +import FooterMessageControl from '../../footer-message-control'; const BottomSheetTextControl = ( { initialValue, diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js index bde7c2c67ee52c..353f145427a65d 100644 --- a/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js @@ -16,13 +16,14 @@ import { /** * WordPress dependencies */ -import { BottomSheetContext } from '@wordpress/components'; + import { useRef, useCallback, useContext, useMemo } from '@wordpress/element'; /** * Internal dependencies */ import { BottomSheetNavigationContext } from './bottom-sheet-navigation-context'; +import { BottomSheetContext } from '../bottom-sheet-context'; import styles from './styles.scss'; const BottomSheetNavigationScreen = ( { diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 30f061dc5c14b3..bfd0d00c0007f1 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -14,7 +14,6 @@ import { /** * WordPress dependencies */ -import { Icon } from '@wordpress/components'; import { check } from '@wordpress/icons'; import { Component } from '@wordpress/element'; import { __, _x, sprintf } from '@wordpress/i18n'; @@ -27,6 +26,7 @@ import styles from './styles.scss'; import platformStyles from './cellStyles.scss'; import TouchableRipple from './ripple'; import LockIcon from './lock-icon'; +import Icon from '../../icon'; const isIOS = Platform.OS === 'ios'; class BottomSheetCell extends Component { diff --git a/packages/components/src/mobile/bottom-sheet/color-cell.native.js b/packages/components/src/mobile/bottom-sheet/color-cell.native.js index 76cdc56930805a..0049a36cbb5711 100644 --- a/packages/components/src/mobile/bottom-sheet/color-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/color-cell.native.js @@ -3,12 +3,13 @@ */ import { __ } from '@wordpress/i18n'; import { Icon, chevronRight } from '@wordpress/icons'; -import { ColorIndicator } from '@wordpress/components'; + /** * Internal dependencies */ import Cell from './cell'; import styles from './styles.scss'; +import ColorIndicator from '../../color-indicator'; export default function BottomSheetColorCell( props ) { const { color, withColorIndicator = true, disabled, ...cellProps } = props; diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js index 64e3f609d167c3..d46b10cfb560f1 100644 --- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js @@ -7,7 +7,12 @@ import { SafeAreaView } from 'react-native'; * WordPress dependencies */ import { Children, useEffect, useContext } from '@wordpress/element'; -import { createSlotFill, BottomSheetContext } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { BottomSheetContext } from '../bottom-sheet-context'; +import { createSlotFill } from '../../../slot-fill'; const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' ); diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 171c4a011a7fe2..10cf776ed808c2 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -7,7 +7,6 @@ import { useRoute } from '@react-navigation/native'; * WordPress dependencies */ import { memo, useEffect, useContext } from '@wordpress/element'; -import { BottomSheetContext, BottomSheet } from '@wordpress/components'; /** * Internal dependencies @@ -15,6 +14,8 @@ import { BottomSheetContext, BottomSheet } from '@wordpress/components'; import PickerScreen from './picker-screen'; import GradientPickerScreen from './gradient-picker-screen'; import PaletteScreen from './palette.screen'; +import BottomSheet from '../bottom-sheet'; +import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context'; import { colorsUtils } from './utils'; diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index 1ec9421e87da5a..a780a4295dfba5 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -9,12 +9,6 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native'; import { __ } from '@wordpress/i18n'; import { useState, useContext } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { - ColorControl, - PanelBody, - BottomSheetContext, - useMobileGlobalStylesColors, -} from '@wordpress/components'; import { useRoute, useNavigation } from '@react-navigation/native'; /** @@ -25,6 +19,9 @@ import ColorIndicator from '../../color-indicator'; import NavBar from '../bottom-sheet/nav-bar'; import SegmentedControls from '../segmented-control'; import { colorsUtils } from './utils'; +import PanelBody from '../../panel/body'; +import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context'; +import ColorControl from '../../color-control'; import styles from './style.scss'; @@ -55,7 +52,7 @@ const PaletteScreen = () => { const currentSegmentColors = ! isGradientSegment ? defaultSettings.colors : defaultSettings.gradients; - const allAvailableColors = useMobileGlobalStylesColors(); + const allAvailableColors = defaultSettings?.allAvailableColors || []; const allAvailableGradients = currentSegmentColors .flatMap( ( { gradients } ) => gradients ) .filter( Boolean ); diff --git a/packages/components/src/mobile/color-settings/picker-screen.native.js b/packages/components/src/mobile/color-settings/picker-screen.native.js index f8626a67338a42..2d505621f6eda1 100644 --- a/packages/components/src/mobile/color-settings/picker-screen.native.js +++ b/packages/components/src/mobile/color-settings/picker-screen.native.js @@ -7,12 +7,12 @@ import { useRoute, useNavigation } from '@react-navigation/native'; * WordPress dependencies */ import { useContext, useMemo } from '@wordpress/element'; -import { BottomSheetContext } from '@wordpress/components'; /** * Internal dependencies */ import { ColorPicker } from '../../color-picker'; +import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context'; const PickerScreen = () => { const route = useRoute(); diff --git a/packages/components/src/mobile/focal-point-settings-panel/index.native.js b/packages/components/src/mobile/focal-point-settings-panel/index.native.js index c9b87a4793cdb4..0aefdc6188c22c 100644 --- a/packages/components/src/mobile/focal-point-settings-panel/index.native.js +++ b/packages/components/src/mobile/focal-point-settings-panel/index.native.js @@ -9,13 +9,14 @@ import { useRoute, useNavigation } from '@react-navigation/native'; */ import { __ } from '@wordpress/i18n'; import { memo, useContext, useState, useCallback } from '@wordpress/element'; -import { BottomSheetContext, FocalPointPicker } from '@wordpress/components'; /** * Internal dependencies */ import NavBar from '../bottom-sheet/nav-bar'; import styles from './styles.scss'; +import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context'; +import FocalPointPicker from '../../focal-point-picker'; const FocalPointSettingsPanelMemo = memo( ( { diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js deleted file mode 100644 index cc9f6baf93348b..00000000000000 --- a/packages/components/src/mobile/global-styles-context/index.native.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * WordPress dependencies - */ -import { createContext, useContext } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { - BLOCK_STYLE_ATTRIBUTES, - getBlockPaddings, - getBlockColors, - getBlockTypography, -} from './utils'; - -const GlobalStylesContext = createContext( { style: {} } ); - -GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES = BLOCK_STYLE_ATTRIBUTES; - -export const getMergedGlobalStyles = ( - baseGlobalStyles, - globalStyle, - wrapperPropsStyle, - blockAttributes, - defaultColors, - blockName, - fontSizes -) => { - // Current support for general styles and blocks. - const baseGlobalColors = { - baseColors: { - color: baseGlobalStyles?.color, - typography: baseGlobalStyles?.typography, - elements: { - link: baseGlobalStyles?.elements?.link, - }, - blocks: { - 'core/button': baseGlobalStyles?.blocks?.[ 'core/button' ], - }, - }, - }; - - const blockStyleAttributes = Object.fromEntries( - Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) => - BLOCK_STYLE_ATTRIBUTES.includes( key ) - ) - ); - - // This prevents certain wrapper styles from being applied to blocks that - // don't support them yet. - const wrapperPropsStyleFiltered = Object.fromEntries( - Object.entries( wrapperPropsStyle ?? {} ).filter( ( [ key ] ) => - BLOCK_STYLE_ATTRIBUTES.includes( key ) - ) - ); - - const mergedStyle = { - ...baseGlobalColors, - ...globalStyle, - ...wrapperPropsStyleFiltered, - }; - const blockColors = getBlockColors( - blockStyleAttributes, - defaultColors, - blockName, - baseGlobalStyles - ); - const blockPaddings = getBlockPaddings( - mergedStyle, - wrapperPropsStyle, - blockStyleAttributes, - blockColors - ); - const blockTypography = getBlockTypography( - blockStyleAttributes, - fontSizes, - blockName, - baseGlobalStyles - ); - - return { - ...mergedStyle, - ...blockPaddings, - ...blockColors, - ...blockTypography, - }; -}; - -export const useGlobalStyles = () => { - const globalStyles = useContext( GlobalStylesContext ); - - return globalStyles; -}; - -export const withGlobalStyles = ( WrappedComponent ) => ( props ) => ( - - { ( globalStyles ) => ( - - ) } - -); - -export default GlobalStylesContext; diff --git a/packages/components/src/mobile/global-styles-context/test/utils.native.js b/packages/components/src/mobile/global-styles-context/test/utils.native.js deleted file mode 100644 index 6144b9a13ae89e..00000000000000 --- a/packages/components/src/mobile/global-styles-context/test/utils.native.js +++ /dev/null @@ -1,168 +0,0 @@ -/** - * Internal dependencies - */ -import { - getBlockPaddings, - getBlockColors, - parseStylesVariables, - getGlobalStyles, -} from '../utils'; - -import { - DEFAULT_COLORS, - GLOBAL_STYLES_GRADIENTS, - DEFAULT_GLOBAL_STYLES, - PARSED_GLOBAL_STYLES, - RAW_FEATURES, - MAPPED_VALUES, -} from './fixtures/theme'; - -describe( 'getBlockPaddings', () => { - const PADDING = 12; - - it( 'returns no paddings for a block without background color', () => { - const paddings = getBlockPaddings( - { color: 'red' }, - { backgroundColor: 'red' }, - { textColor: 'primary' } - ); - expect( paddings ).toEqual( expect.objectContaining( {} ) ); - } ); - - it( 'returns paddings for a block with background color', () => { - const paddings = getBlockPaddings( - { color: 'red' }, - {}, - { backgroundColor: 'red', textColor: 'primary' } - ); - expect( paddings ).toEqual( - expect.objectContaining( { padding: PADDING } ) - ); - } ); - - it( 'returns no paddings for an inner block without background color within a parent block with background color', () => { - const paddings = getBlockPaddings( - { backgroundColor: 'blue', color: 'yellow', padding: PADDING }, - {}, - { textColor: 'primary' } - ); - - expect( paddings ).toEqual( - expect.not.objectContaining( { padding: PADDING } ) - ); - } ); -} ); - -describe( 'getBlockColors', () => { - it( 'returns the theme colors correctly', () => { - const blockColors = getBlockColors( - { backgroundColor: 'accent', textColor: 'secondary' }, - DEFAULT_COLORS - ); - expect( blockColors ).toEqual( - expect.objectContaining( { - backgroundColor: '#cd2653', - color: '#6d6d6d', - } ) - ); - } ); - - it( 'returns custom background color correctly', () => { - const blockColors = getBlockColors( - { backgroundColor: '#222222', textColor: 'accent' }, - DEFAULT_COLORS - ); - expect( blockColors ).toEqual( - expect.objectContaining( { - backgroundColor: '#222222', - color: '#cd2653', - } ) - ); - } ); - - it( 'returns custom text color correctly', () => { - const blockColors = getBlockColors( - { textColor: '#4ddddd' }, - DEFAULT_COLORS - ); - expect( blockColors ).toEqual( - expect.objectContaining( { - color: '#4ddddd', - } ) - ); - } ); -} ); - -describe( 'parseStylesVariables', () => { - it( 'returns the parsed preset values correctly', () => { - const customValues = parseStylesVariables( - JSON.stringify( RAW_FEATURES.custom ), - MAPPED_VALUES - ); - const blockColors = parseStylesVariables( - JSON.stringify( DEFAULT_GLOBAL_STYLES ), - MAPPED_VALUES, - customValues - ); - expect( blockColors ).toEqual( - expect.objectContaining( PARSED_GLOBAL_STYLES ) - ); - } ); - - it( 'returns the parsed custom color values correctly', () => { - const defaultStyles = { - ...DEFAULT_GLOBAL_STYLES, - color: { - text: 'var(--wp--custom--color--blue)', - background: 'var(--wp--custom--color--green)', - }, - }; - const customValues = parseStylesVariables( - JSON.stringify( RAW_FEATURES.custom ), - MAPPED_VALUES - ); - const styles = parseStylesVariables( - JSON.stringify( defaultStyles ), - MAPPED_VALUES, - customValues - ); - expect( styles ).toEqual( - expect.objectContaining( PARSED_GLOBAL_STYLES ) - ); - } ); -} ); - -describe( 'getGlobalStyles', () => { - it( 'returns the global styles data correctly', () => { - const rawFeatures = JSON.stringify( RAW_FEATURES ); - const gradients = parseStylesVariables( - JSON.stringify( GLOBAL_STYLES_GRADIENTS ), - MAPPED_VALUES - ); - - const globalStyles = getGlobalStyles( - JSON.stringify( DEFAULT_GLOBAL_STYLES ), - rawFeatures - ); - - expect( globalStyles ).toEqual( - expect.objectContaining( { - __experimentalFeatures: { - color: { - palette: RAW_FEATURES.color.palette, - gradients, - text: true, - background: true, - defaultPalette: true, - defaultGradients: true, - }, - typography: { - fontSizes: RAW_FEATURES.typography.fontSizes, - customLineHeight: RAW_FEATURES.custom[ 'line-height' ], - }, - }, - __experimentalGlobalStylesBaseStyles: PARSED_GLOBAL_STYLES, - } ) - ); - } ); -} ); diff --git a/packages/components/src/mobile/gradient/index.native.js b/packages/components/src/mobile/gradient/index.native.js index 830ea97253b47e..47e96558ce3fef 100644 --- a/packages/components/src/mobile/gradient/index.native.js +++ b/packages/components/src/mobile/gradient/index.native.js @@ -7,7 +7,6 @@ import gradientParser from 'gradient-parser'; /** * WordPress dependencies */ -import { colorsUtils } from '@wordpress/components'; import { RadialGradient, Stop, SVG, Defs, Rect } from '@wordpress/primitives'; import { useResizeObserver } from '@wordpress/compose'; import { useMemo } from '@wordpress/element'; @@ -16,6 +15,7 @@ import { useMemo } from '@wordpress/element'; * Internal dependencies */ import styles from './style.scss'; +import { colorsUtils } from '../color-settings/utils'; export function getGradientAngle( gradientValue ) { const angleBase = 45; diff --git a/packages/components/src/mobile/image/icon-customize.native.js b/packages/components/src/mobile/image/icon-customize.native.js index 57fc39c7c29f1b..0f33638041688b 100644 --- a/packages/components/src/mobile/image/icon-customize.native.js +++ b/packages/components/src/mobile/image/icon-customize.native.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { Path, SVG } from '@wordpress/components'; +import { SVG, Path } from '@wordpress/primitives'; export default ( diff --git a/packages/components/src/mobile/image/icon-retry.native.js b/packages/components/src/mobile/image/icon-retry.native.js index 580cd1fff188f5..37e4283bdb47a8 100644 --- a/packages/components/src/mobile/image/icon-retry.native.js +++ b/packages/components/src/mobile/image/icon-retry.native.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { Path, SVG } from '@wordpress/components'; +import { SVG, Path } from '@wordpress/primitives'; export default ( diff --git a/packages/components/src/mobile/image/image-editing-button.native.js b/packages/components/src/mobile/image/image-editing-button.native.js index fccc4fa2bfe334..0f29b117bd6138 100644 --- a/packages/components/src/mobile/image/image-editing-button.native.js +++ b/packages/components/src/mobile/image/image-editing-button.native.js @@ -6,7 +6,6 @@ import { TouchableWithoutFeedback, View, Platform } from 'react-native'; /** * WordPress dependencies */ -import { Icon } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** @@ -15,6 +14,7 @@ import { __ } from '@wordpress/i18n'; import { MediaEdit } from '../media-edit'; import SvgIconCustomize from './icon-customize'; import styles from './style.scss'; +import Icon from '../../icon'; const accessibilityHint = Platform.OS === 'ios' diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index c3e010c40c3b8a..57c83ddbec0a85 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -8,7 +8,6 @@ import FastImage from 'react-native-fast-image'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Icon } from '@wordpress/components'; import { image, offline } from '@wordpress/icons'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { useEffect, useState, Platform } from '@wordpress/element'; @@ -20,6 +19,7 @@ import { getImageWithFocalPointStyles } from './utils'; import styles from './style.scss'; import SvgIconRetry from './icon-retry'; import ImageEditingButton from './image-editing-button'; +import Icon from '../../icon'; const ICON_TYPE = { OFFLINE: 'offline', diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js index 404bbb1760c156..d6eb354287b9a3 100644 --- a/packages/components/src/mobile/link-picker/index.native.js +++ b/packages/components/src/mobile/link-picker/index.native.js @@ -9,7 +9,6 @@ import Clipboard from '@react-native-clipboard/clipboard'; */ import { useEffect, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; -import { BottomSheet, Icon } from '@wordpress/components'; import { getProtocol, isURL, prependHTTP } from '@wordpress/url'; import { link, cancelCircleFilled } from '@wordpress/icons'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; @@ -20,6 +19,8 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import LinkPickerResults from './link-picker-results'; import NavBar from '../bottom-sheet/nav-bar'; import styles from './styles.scss'; +import BottomSheet from '../bottom-sheet'; +import Icon from '../../icon'; // This creates a search suggestion for adding a url directly. export const createDirectEntry = ( value ) => { diff --git a/packages/components/src/mobile/link-picker/link-picker-results.native.js b/packages/components/src/mobile/link-picker/link-picker-results.native.js index c2d0b60f8a3dfb..1d411b97ff0667 100644 --- a/packages/components/src/mobile/link-picker/link-picker-results.native.js +++ b/packages/components/src/mobile/link-picker/link-picker-results.native.js @@ -6,7 +6,6 @@ import { ActivityIndicator, FlatList, View } from 'react-native'; /** * WordPress dependencies */ -import { BottomSheet, BottomSheetConsumer } from '@wordpress/components'; import { debounce } from '@wordpress/compose'; import { useState, useEffect, useRef } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; @@ -15,6 +14,8 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import styles from './styles.scss'; +import BottomSheet from '../bottom-sheet'; +import { BottomSheetConsumer } from '../bottom-sheet/bottom-sheet-context'; const PER_PAGE = 20; const REQUEST_DEBOUNCE_DELAY = 400; diff --git a/packages/components/src/mobile/link-settings/link-rel.native.js b/packages/components/src/mobile/link-settings/link-rel.native.js index bc8060ec405a88..041acb2b33aaad 100644 --- a/packages/components/src/mobile/link-settings/link-rel.native.js +++ b/packages/components/src/mobile/link-settings/link-rel.native.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { Path, SVG } from '@wordpress/components'; +import { Path, SVG } from '@wordpress/primitives'; export default ( diff --git a/packages/components/src/mobile/media-edit/index.native.js b/packages/components/src/mobile/media-edit/index.native.js index 5b81b7fb08bf1d..08bedbb804a1a3 100644 --- a/packages/components/src/mobile/media-edit/index.native.js +++ b/packages/components/src/mobile/media-edit/index.native.js @@ -3,12 +3,16 @@ */ import { Component } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Picker } from '@wordpress/components'; import { requestMediaEditor, mediaSources, } from '@wordpress/react-native-bridge'; +/** + * Internal dependencies + */ +import Picker from '../picker'; + export const MEDIA_TYPE_IMAGE = 'image'; export const MEDIA_EDITOR = 'MEDIA_EDITOR'; diff --git a/packages/components/src/mobile/picker/index.android.js b/packages/components/src/mobile/picker/index.android.js index 0db2826ddb16ca..997af1109f5435 100644 --- a/packages/components/src/mobile/picker/index.android.js +++ b/packages/components/src/mobile/picker/index.android.js @@ -9,13 +9,14 @@ import { View } from 'react-native'; import { __ } from '@wordpress/i18n'; import { Component, Fragment } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { PanelBody, TextControl } from '@wordpress/components'; /** * Internal dependencies */ import BottomSheet from '../bottom-sheet'; import styles from './styles.scss'; +import PanelBody from '../../panel/body'; +import TextControl from '../../text-control'; function Separator() { const separatorStyle = usePreferredColorSchemeStyle( diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js index dac31ded159be0..a6f98465e7e498 100644 --- a/packages/components/src/mobile/picker/index.ios.js +++ b/packages/components/src/mobile/picker/index.ios.js @@ -9,13 +9,13 @@ import { ActionSheetIOS } from 'react-native'; import { __ } from '@wordpress/i18n'; import { Component, forwardRef, useContext } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import { BottomSheetContext } from '@wordpress/components'; import { usePreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies */ import styles from './styles.scss'; +import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context'; class Picker extends Component { presentPicker() { diff --git a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js index 11d54f954215d4..891f11f502ebfe 100644 --- a/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js +++ b/packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js @@ -6,18 +6,7 @@ import { Dimensions } from 'react-native'; /** * WordPress dependencies */ -import { - useContext, - useEffect, - useState, - useMemo, - useCallback, -} from '@wordpress/element'; - -/** - * Internal dependencies - */ -import GlobalStylesContext from '../global-styles-context'; +import { useEffect, useState, useMemo, useCallback } from '@wordpress/element'; const getValueAndUnit = ( value, unit ) => { const regex = /(\d+\.?\d*)(.*)/; @@ -63,8 +52,7 @@ const convertUnitToMobile = ( containerSize, globalStyles, value, unit ) => { } }; -const useConvertUnitToMobile = ( value, unit ) => { - const { globalStyles: styles } = useContext( GlobalStylesContext ); +const useConvertUnitToMobile = ( value, unit, styles ) => { const [ windowSizes, setWindowSizes ] = useState( Dimensions.get( 'window' ) ); diff --git a/packages/components/src/panel/actions.native.js b/packages/components/src/panel/actions.native.js index cea78ce46fef0a..9e14932bfd5e19 100644 --- a/packages/components/src/panel/actions.native.js +++ b/packages/components/src/panel/actions.native.js @@ -6,7 +6,6 @@ import { View } from 'react-native'; /** * WordPress dependencies */ -import { TextControl } from '@wordpress/components'; import { withPreferredColorScheme } from '@wordpress/compose'; import { useMemo } from '@wordpress/element'; @@ -15,6 +14,7 @@ import { useMemo } from '@wordpress/element'; */ import styles from './actions.scss'; import BottomSeparatorCover from './bottom-separator-cover'; +import TextControl from '../text-control'; function PanelActions( { actions, getStylesFromColorScheme } ) { const mappedActions = useMemo( () => { diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js index ef34329706862c..4e687f4af09d57 100644 --- a/packages/components/src/query-controls/index.native.js +++ b/packages/components/src/query-controls/index.native.js @@ -7,7 +7,8 @@ import { useCallback, memo } from '@wordpress/element'; /** * Internal dependencies */ -import { RangeControl, SelectControl } from '../'; +import RangeControl from '../range-control'; +import SelectControl from '../select-control'; import CategorySelect from './category-select'; const DEFAULT_MIN_ITEMS = 1; diff --git a/packages/components/src/search-control/index.native.js b/packages/components/src/search-control/index.native.js index 495eb88bb6969c..487364bb07e44d 100644 --- a/packages/components/src/search-control/index.native.js +++ b/packages/components/src/search-control/index.native.js @@ -22,7 +22,6 @@ import { useCallback, } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Button, Gridicons } from '@wordpress/components'; import { Icon, cancelCircleFilled as cancelCircleFilledIcon, @@ -35,6 +34,8 @@ import { */ import allStyles from './style.scss'; import platformStyles from './platform-style.scss'; +import Button from '../button'; +import Gridicons from '../mobile/gridicons'; // Merge platform specific styles with the default styles. const baseStyles = { ...allStyles }; diff --git a/packages/components/src/tooltip/test/index.native.js b/packages/components/src/tooltip/test/index.native.js index 5827f5a8e5e99b..4b9691313e3d1e 100644 --- a/packages/components/src/tooltip/test/index.native.js +++ b/packages/components/src/tooltip/test/index.native.js @@ -4,15 +4,11 @@ import { fireEvent, render, act } from 'test/helpers'; import { Keyboard, Text } from 'react-native'; -/** - * WordPress dependencies - */ -import { SlotFillProvider } from '@wordpress/components'; - /** * Internal dependencies */ import Tooltip from '../index'; +import { Provider as SlotFillProvider } from '../../slot-fill'; // Minimal tree to render tooltip. const TooltipSlot = ( { children } ) => ( diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js index fe0b5fcf9f10bf..31c49fa3dc7fd3 100644 --- a/packages/editor/src/components/provider/index.native.js +++ b/packages/editor/src/components/provider/index.native.js @@ -34,8 +34,11 @@ import { import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { applyFilters } from '@wordpress/hooks'; -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { getGlobalStyles, getColorsAndGradients } from '@wordpress/components'; +import { + store as blockEditorStore, + getGlobalStyles, + getColorsAndGradients, +} from '@wordpress/block-editor'; import { NEW_BLOCK_TYPES } from '@wordpress/block-library'; import { __ } from '@wordpress/i18n'; diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index c84332398ff68e..aee0f26d5f439f 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -8,12 +8,12 @@ import { StyleSheet, View } from 'react-native'; */ import { __ } from '@wordpress/i18n'; import { useCallback, useMemo, useState } from '@wordpress/element'; -import { BlockControls, useSettings } from '@wordpress/block-editor'; import { - ToolbarGroup, - ToolbarButton, + BlockControls, + useSettings, useMobileGlobalStylesColors, -} from '@wordpress/components'; +} from '@wordpress/block-editor'; +import { ToolbarGroup, ToolbarButton } from '@wordpress/components'; import { Icon, color as colorIcon, diff --git a/packages/format-library/src/text-color/inline.native.js b/packages/format-library/src/text-color/inline.native.js index 4199ce413ee9f1..8324e0c3453c37 100644 --- a/packages/format-library/src/text-color/inline.native.js +++ b/packages/format-library/src/text-color/inline.native.js @@ -11,12 +11,9 @@ import { getColorClassName, getColorObjectByColorValue, useMultipleOriginColorsAndGradients, -} from '@wordpress/block-editor'; -import { - BottomSheet, - ColorSettings, useMobileGlobalStylesColors, -} from '@wordpress/components'; +} from '@wordpress/block-editor'; +import { BottomSheet, ColorSettings } from '@wordpress/components'; /** * Internal dependencies @@ -108,6 +105,7 @@ function ColorPicker( { name, value, onChange, contentRef } ) { const property = 'color'; const colors = useMobileGlobalStylesColors(); const colorSettings = useMultipleOriginColorsAndGradients(); + colorSettings.allAvailableColors = colors; const onColorChange = useCallback( ( color ) => { diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index d3e1a0a730584f..c7ae81c1bdbc76 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased +- [internal] Remove circular dependencies within the components package [#61102] ## 1.118.0 - [*] Fix a crash when pasting file images and special comment markup [#60476] From d538f429f018aba34814b360c5adf37eb6013427 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 May 2024 11:56:56 +0100 Subject: [PATCH 4/4] Site Editor: Use a consistent snackbar position (#61756) Co-authored-by: youknowriad Co-authored-by: jasmussen Co-authored-by: jameskoster Co-authored-by: ntsekouras --- packages/edit-site/src/components/editor/index.js | 2 -- .../edit-site/src/components/editor/style.scss | 15 --------------- packages/edit-site/src/components/layout/index.js | 7 ++++++- .../edit-site/src/components/layout/style.scss | 8 ++++++++ packages/edit-site/src/components/page/index.js | 6 +----- 5 files changed, 15 insertions(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index b7e9655919cf6b..7a215fdd9421ee 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -27,7 +27,6 @@ import { EditorKeyboardShortcutsRegister, EditorKeyboardShortcuts, EditorNotices, - EditorSnackbars, privateApis as editorPrivateApis, store as editorStore, } from '@wordpress/editor'; @@ -345,7 +344,6 @@ export default function Editor( { isLoading, onClick } ) { } /> } - notices={ } content={ <> diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss index 000c64fd8ae03d..92c7727be6be00 100644 --- a/packages/edit-site/src/components/editor/style.scss +++ b/packages/edit-site/src/components/editor/style.scss @@ -17,18 +17,3 @@ display: flex; justify-content: center; } - -// Adjust the position of the notices when breadcrumbs are present -.edit-site .has-block-breadcrumbs.is-full-canvas .components-editor-notices__snackbar { - bottom: 40px; -} - -// Adjust the position of the notices -.edit-site .components-editor-notices__snackbar { - position: absolute; - right: 0; - bottom: 16px; - padding-left: 16px; - padding-right: 16px; -} -@include editor-left(".edit-site .components-editor-notices__snackbar") diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index d8b0d85e484edb..83beee41642d30 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -30,7 +30,10 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; +import { + EditorSnackbars, + privateApis as editorPrivateApis, +} from '@wordpress/editor'; /** * Internal dependencies @@ -262,6 +265,8 @@ export default function Layout() { ) } + + { isMobileViewport && areas.mobile && (
{ areas.mobile } diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index fda34feeb28328..fdbf6b184aa211 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -277,3 +277,11 @@ margin: $canvas-padding $canvas-padding $canvas-padding 0; } } + +.edit-site .components-editor-notices__snackbar { + position: fixed; + right: 0; + bottom: 16px; + padding-left: 16px; + padding-right: 16px; +} diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js index 7ed4e9d2c2c922..6609abb8f52449 100644 --- a/packages/edit-site/src/components/page/index.js +++ b/packages/edit-site/src/components/page/index.js @@ -6,10 +6,7 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { - EditorSnackbars, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies @@ -41,7 +38,6 @@ export default function Page( { ) } { children }
- ); }