Font Awesome v7

[laravdiemen]

We hebben twee keer een IconPickerControl, eentje voor fusion en eentje voor brave. Beide zijn nu geüpdatet naar Font Awesome 7.

Ik kwam er ook achter dat de search die nu gebruikt was deprecated is dus dat het alternatief searchPaginated is. Voor de brave variant was dit relatief eenvoudig aan te passen, de fusion variant had iets meer werk. Dat komt omdat de allowedStyles daar nog op de oude manier gaan.

Ik had problemen met gutenberg-core symlinken, het werd opgelost door create-emotion en invariant aan de package.json toe te voegen.

Nadat deze PR gemerged is en nieuwe versies zijn gereleased moet nog het volgende gebeuren (wat dan wel gelijk gedaan moet worden):

• yard-gutenberg updaten met de nieuwste release van @yardinternet/gutenberg-components
• yard-blocks updaten met nieuwe css file en webfonts + @yardinternet/gutenberg-core en @yardinternet/gutenberg-editor-components naar de nieuwste release
• De kits in Font Awesome zelf update naar 7

[Copilot]

Pull request overview

This PR updates both the deprecated and current IconPickerControl implementations to use Font Awesome v7, including migrating the Font Awesome GraphQL query from deprecated search to searchPaginated, and updating bundled Font Awesome assets accordingly. It also adds a couple of dependencies to @yardinternet/gutenberg-core to resolve local linking/symlink issues.

Changes:

• Migrated Font Awesome GraphQL queries from search (v6) to searchPaginated (v7) and adapted response handling to the new schema.
• Updated the deprecated icon picker’s bundled Font Awesome stylesheet from SCSS import to a v7 minified CSS asset.
• Added create-emotion and invariant dependencies to packages/deprecated/core.

Reviewed changes

Copilot reviewed 4 out of 32 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/deprecated/editor-components/src/icon-picker-control/index.js	Switches to FA v7 searchPaginated, updates parsing/mapping to classnames, and imports the new CSS bundle.
packages/deprecated/editor-components/src/icon-picker-control/assets/scss/all.min.css	Adds the Font Awesome v7 minified CSS bundle (and corresponding @font-face references).
packages/deprecated/core/package.json	Adds create-emotion and invariant dependencies (symlink workaround).
packages/components/src/icon-picker-control/utils/api.js	Updates the shared API helper to query FA v7 via searchPaginated and request familyStylesByLicense.
packages/components/src/icon-picker-control/index.jsx	Updates response traversal to searchPaginated.icons and adds __nextHasNoMarginBottom to SearchControl.
package-lock.json	Locks new dependencies and transitive packages introduced by create-emotion / invariant.

Comments suppressed due to low confidence (2)

packages/deprecated/editor-components/src/icon-picker-control/index.js:50

• response.data.searchPaginated.icons.reduce(...) will throw if the API response shape changes or searchPaginated/icons is missing. Since this is user-driven input, it’s safer to default to an empty array and still update state (so the UI can show “no icons found” instead of crashing).
  packages/components/src/icon-picker-control/index.jsx:79
• Using optional chaining on .reduce() can yield result === undefined when searchPaginated/icons is missing, and the function then returns without updating state or opening the popover—leaving the user with no feedback. Defaulting icons to an empty array avoids this silent failure and still allows the UI to render the “no icons found” message.

			const result = response?.data?.searchPaginated?.icons?.reduce(
				( iconResults, iconData ) => {
					convertResponseToClassnames(
						iconData,
						allowedFamilyStyles
					).forEach( ( value ) => {
						iconResults.push( value );
					} );

					return iconResults;
				},
				[]
			);
			if ( ! result ) return;

			setSearchResults( result );
			setOpen( true );

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[YvetteNikolov]

Lekker bezig!