Remove dependencies to block-editor package in native files within the components package

[fluiddot]

Description

The following native files (i.e. *.native.js) are importing the @wordpress/block-editor package, however, this package is not included in the package.json of the @wordpress/components package. We should remove these dependencies as their importation could result in undefined, and to avoid circular dependencies since @wordpress/block-editor imports @wordpress/components package

• font-size-picker/index.native.js
• mobile/global-styles-context/utils.native.js
• mobile/inserter-button/index.native.js
• mobile/link-settings/image-link-destinations-screen.native.js

[derekblank]

I can update these as part of #56072:

• Enable import/no-extraneous-dependencies for *.native.js files #56072

@fluiddot I'm curious if you feel we should just update these block-editor imports to their relative paths as was done here, or if you have an example of a better import path to remove the block-editor dependency.

[fluiddot]

@fluiddot I'm curious if you feel we should just update these block-editor imports to their relative paths as was done here, or if you have an example of a better import path to remove the block-editor dependency.

I think it depends on each case. In general, I feel that most of the above-referenced components/tools under the components package could be under the block-editor package.

I noticed that the following items are only imported in the block-editor package, so makes sense to relocate them there:

• mobile/inserter-button/index.native.js: Here is the import reference
• mobile/link-settings/image-link-destinations-screen.native.js: Here is the import reference

The other two would need a deeper analysis:

• font-size-picker/index.native.js: The web version is also located in components package, so looks like it makes sense to keep it in its current location. However, we should update this import of getPxFromCssUnit. The utility function getPxFromCssUnit, along the rest located in packages/block-editor/src/utils/parse-css-unit-to-px.js seem could be located in the components package as seem to provide a generic functionality (i.e. not strictly related to the block editor).

• mobile/global-styles-context/utils.native.js: This item is to me the more complex one to resolve, as it imports several items from the block-editor package. I see two options here:

  • Move global-styles-context to block-editor package. We could consider the global styles as block-editor-specific, although this might introduce new circular dependencies.
  • Analyze the usage of the imported functionality from the block-editor package in global-styles-context. Identify if any should be located in the components package, or if the values provided by them could be passed directly as function arguments.

[dcalhoun]

Noting that this issue relates to #27751.