Dashicons use wp.element.Component instead of importing it

[jaschaio]

I noticed the Following inconsistency which gives me errors if I try to reutilize certain components in a different context than the WordPress Admin. All other components within the components directory import { Component } from '@wordpress/element';. But the Dashicons directly extends wp.element.Component instead of importing and using the { Component } class from @wordpress/element.

That makes almost any component that imports the Dashicons depending on that the wp.element object is defined. Maybe I am overlooking something here but I felt that its an inconsistency and couldn't immediately understand why.

Please let me know as well if this issue should be raised in the Dashicon repro instead as apparently that's where the file is coming from.

[danielbachhuber]

Hi @jaschaio,

Thanks for the report. How'd you end up on this? Did you try git blame to track down the source of each implementation?

[gziolo]

@jasmussen should know the details. I think that Dashicons are automatically generated outside of Gutenberg and that's why they reference wp.element.Component.

[jasmussen]

Not sure if this answers your questions, but Dashicons are built from this repo: https://github.com/WordPress/dashicons — you clone that, npm install and npm run build. That then converts a folder of SVGs into a React component.

We can adjust what that React component contains, though, so if changes need to happen in how that component is built, we can fix it upstream.

[gziolo]

It might be tricky to fix it at the moment because we don't publish @wordpress/element to npm. We should get back to it later when we start merging this code into core.

[danielbachhuber]

@gziolo Do you know if this was addressed, or needs further action?

[gziolo]

We should publish the first alpha version of @wordpress/element later this week. It should unblock this issue.

[gziolo]

Depends on #6708.

[gziolo]

We can use @wordpress/element published to NPM: https://www.npmjs.com/package/@wordpress/element.

Related code line to update: https://github.com/WordPress/gutenberg/blob/master/components/dashicon/index.js#L16.

@jasmussen does it require any external changes, too?

[jasmussen]

Sorry I missed the ping.

I'm not sure what change needs to be made, but if a change to the dashicons component needs to happen I can do that change quickly. Just let me know what to change that line to.

[gziolo]

import { Component } from '@wordpress/element'; - you need to use this import statement instead oglf WP global.

[jasmussen]

@gziolo Apologies for being slow. I think it's the following file that needs to be updated: https://github.com/WordPress/dashicons/blob/master/sources/react/index-header.jsx#L16 — this is a source file that is being used to build the React component with a grunt script. I can add the import, but I still need an export, no?

[gziolo]

I think that import is fine. I think @aduth should know better what is the best way to tackle it. I have no background knowledge of when and how this repository is used. You might need to set @wordpress/element as a dependency for the repository. Do you copy output file each time you want to regenerate it?

[jasmussen]

Right now the process for creating a new dashicon is:

• Save new SVG icon file in sources/gutenberg — when put in that directory it lands ONLY in the react component. This was done to avoid having to get design approval on a per-icon basis, and instead get design approval for all of them at once, come merge-time.
• npm run build in the dashicons repo puts together the react component header file, a for loop with output of each of the icons inline, then the react component footer file.
• This process bakes a .js file which I then manually copy to the Gutenberg project, where the file is incidentally a jsx file.

It doesn't have to be this way — I'm just confused as to how to proceed.

[gziolo]

I'm confused, too. Maybe @mtias can help, too?

[aduth]

See WordPress/dashicons#305