-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Add Icon APIs: registry and /wp/v2/icons endpoint #10909
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: trunk
Are you sure you want to change the base?
Changes from all commits
615e544
f7d5a91
3bc226a
2a04dd6
a0ab11e
5cc4fdc
8446d5e
970944b
7962d77
7b941e4
15a38c3
9ab1f42
61c6766
3439ab9
1265558
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,308 @@ | ||
| <?php | ||
|
|
||
| /** | ||
| * Icons API: WP_Icons_Registry class | ||
| * | ||
| * @package WordPress | ||
| * @since 7.0.0 | ||
| */ | ||
|
|
||
| /** | ||
| * Core class used for interacting with registered icons. | ||
| * | ||
| * @since 7.0.0 | ||
| */ | ||
| class WP_Icons_Registry { | ||
| /** | ||
| * Registered icons array. | ||
| * | ||
| * @var array[] | ||
| */ | ||
| private $registered_icons = array(); | ||
|
|
||
|
|
||
| /** | ||
| * Container for the main instance of the class. | ||
| * | ||
| * @var WP_Icons_Registry|null | ||
| */ | ||
| private static $instance = null; | ||
|
|
||
| /** | ||
| * Constructor. | ||
| * | ||
| * WP_Icons_Registry is a singleton class, so keep this private. | ||
| */ | ||
| private function __construct() { | ||
| $icons_directory = __DIR__ . '/icons/'; | ||
| $icons_directory = trailingslashit( $icons_directory ); | ||
| $manifest_path = $icons_directory . 'manifest.php'; | ||
|
|
||
| if ( ! is_readable( $manifest_path ) ) { | ||
| wp_trigger_error( | ||
| __METHOD__, | ||
| __( 'Core icon collection manifest is missing or unreadable.' ) | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| $collection = include $manifest_path; | ||
|
|
||
| if ( empty( $collection ) ) { | ||
| wp_trigger_error( | ||
| __METHOD__, | ||
| __( 'Core icon collection manifest is empty or invalid.' ) | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| foreach ( $collection as $icon_name => $icon_data ) { | ||
| if ( | ||
| empty( $icon_data['filePath'] ) | ||
| || ! is_string( $icon_data['filePath'] ) | ||
| ) { | ||
| _doing_it_wrong( | ||
| __METHOD__, | ||
| __( 'Core icon collection manifest must provide valid a "filePath" for each icon.' ), | ||
| '7.0.0' | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| if ( ! ( $icon_data['public'] ?? false ) ) { | ||
| continue; | ||
| } | ||
|
|
||
| $this->register( | ||
| 'core/' . $icon_name, | ||
| array( | ||
| 'label' => $icon_data['label'], | ||
| 'filePath' => $icons_directory . $icon_data['filePath'], | ||
| ) | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Registers an icon. | ||
| * | ||
| * @param string $icon_name Icon name including namespace. | ||
| * @param array $icon_properties { | ||
| * List of properties for the icon. | ||
| * | ||
| * @type string $label Required. A human-readable label for the icon. | ||
| * @type string $content Optional. SVG markup for the icon. | ||
| * If not provided, the content will be retrieved from the `filePath` if set. | ||
| * If both `content` and `filePath` are not set, the icon will not be registered. | ||
| * @type string $filePath Optional. The full path to the file containing the icon content. | ||
| * } | ||
| * @return bool True if the icon was registered with success and false otherwise. | ||
| */ | ||
| private function register( $icon_name, $icon_properties ) { | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I do not think we should merge in this API without a public method for registering icons. The icon library we are shipping with Core is the gutenberg icons. Those icons were never meant to be frontend design icons. They are editor interface icons. From my POV there is very little utility to the icon block in core without the ability to register custom icons.
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I understand where you're coming from, but I'd argue that the Icon block is already useful in its initial form, having access to 321 core icons. Though Keeping the Icons registry closed was a way to conserve some more room for adjustments, as the icon block itself gets adopted. It should be understood as an intermediate step, so that we can confidently expand the scope of the registry in 7.1 (third-party registration, but possibly also categories, etc.). There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for the ping. As happens more often than I like, I find myself agreeing with both ends of the spectrum. On the one hand, let's be honest that the utility of this first iteration is limited: there are many inline contexts where I would like to use icons, but can't. There's just that one set, and although there are many nice icons there, the majority of them were designed for blocks, or WordPress specific features. On the other hand, while this effort is also about adding a block that lets you intiutively create decorative bullets and expanded patterns, it's also a mammoth infrastructure effort, to bring SVG support to WordPress, to wrap it in a UI that we can grow, expand, and iterate. Most of this work may not be quite as exciting and immediately useful, but wait til you see what we can do with it. We're building a mountain, moving dirt to one place, and eventually what we build will be visible on the horison. In saying that, I'm validating every aspect of Fabian's point. I think this is especially important if we were to land in 7.0 and market this new feature: we should be very honest that this is a small first step, not the end-state. There are shortcomings: SVG support is the big deal. But with that, I'm also validating Miguel's instinct: this ground work is critical, and there's no better test crucible than to ship this in a major release, so we can work out the inevitable issues. None of this is strongly felt. There's always another release. But it's a soft appeal: I'd rather take 4 deliberate, but small steps, than make one big jump and risk landing in the wrong place.
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. After talking with Joen, I also opened WordPress/gutenberg#75526 to distinguish "front-end-ready" icons from internal ones.
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I also agree with this approach. To get attention and move this PR forward, we might want to submit a core ticket first.
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think the incremental approach @mcsf is suggesting is a good call. Shipping the registry and REST endpoint now gives an initial foundation to build on, and keeping register() private for this first iteration is a good way to leave room for refinement before committing to a public API surface. |
||
| if ( ! isset( $icon_name ) || ! is_string( $icon_name ) ) { | ||
| _doing_it_wrong( | ||
| __METHOD__, | ||
| __( 'Icon name must be a string.' ), | ||
| '7.0.0' | ||
| ); | ||
| return false; | ||
| } | ||
|
|
||
| $allowed_keys = array_fill_keys( array( 'label', 'content', 'filePath' ), 1 ); | ||
| foreach ( array_keys( $icon_properties ) as $key ) { | ||
| if ( ! array_key_exists( $key, $allowed_keys ) ) { | ||
| _doing_it_wrong( | ||
| __METHOD__, | ||
| sprintf( | ||
| // translators: %s is the name of any user-provided key | ||
| __( 'Invalid icon property: "%s".' ), | ||
| $key | ||
| ), | ||
| '7.0.0' | ||
| ); | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| if ( ! isset( $icon_properties['label'] ) || ! is_string( $icon_properties['label'] ) ) { | ||
| _doing_it_wrong( | ||
| __METHOD__, | ||
| __( 'Icon label must be a string.' ), | ||
| '7.0.0' | ||
| ); | ||
| return false; | ||
| } | ||
|
|
||
| if ( | ||
| ( ! isset( $icon_properties['content'] ) && ! isset( $icon_properties['filePath'] ) ) || | ||
| ( isset( $icon_properties['content'] ) && isset( $icon_properties['filePath'] ) ) | ||
| ) { | ||
| _doing_it_wrong( | ||
| __METHOD__, | ||
| __( 'Icons must provide either `content` or `filePath`.' ), | ||
| '7.0.0' | ||
| ); | ||
| return false; | ||
| } | ||
|
|
||
| if ( isset( $icon_properties['content'] ) ) { | ||
| if ( ! is_string( $icon_properties['content'] ) ) { | ||
| _doing_it_wrong( | ||
| __METHOD__, | ||
| __( 'Icon content must be a string.' ), | ||
| '7.0.0' | ||
| ); | ||
| return false; | ||
| } | ||
|
|
||
| $sanitized_icon_content = $this->sanitize_icon_content( $icon_properties['content'] ); | ||
| if ( empty( $sanitized_icon_content ) ) { | ||
| _doing_it_wrong( | ||
| __METHOD__, | ||
| __( 'Icon content does not contain valid SVG markup.' ), | ||
| '7.0.0' | ||
| ); | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| $icon = array_merge( | ||
| $icon_properties, | ||
| array( 'name' => $icon_name ) | ||
| ); | ||
|
|
||
| $this->registered_icons[ $icon_name ] = $icon; | ||
|
|
||
| return true; | ||
| } | ||
|
|
||
| /** | ||
| * Sanitizes the icon SVG content. | ||
| * | ||
| * Logic borrowed from twentytwenty. | ||
| * @see twentytwenty_get_theme_svg | ||
| * | ||
| * @param string $icon_content The icon SVG content to sanitize. | ||
| * @return string The sanitized icon SVG content. | ||
| */ | ||
| private function sanitize_icon_content( $icon_content ) { | ||
| $allowed_tags = array( | ||
| 'svg' => array( | ||
| 'class' => true, | ||
| 'xmlns' => true, | ||
| 'width' => true, | ||
| 'height' => true, | ||
| 'viewbox' => true, | ||
| 'aria-hidden' => true, | ||
| 'role' => true, | ||
| 'focusable' => true, | ||
| ), | ||
| 'path' => array( | ||
| 'fill' => true, | ||
| 'fill-rule' => true, | ||
| 'd' => true, | ||
| 'transform' => true, | ||
| ), | ||
| 'polygon' => array( | ||
| 'fill' => true, | ||
| 'fill-rule' => true, | ||
| 'points' => true, | ||
| 'transform' => true, | ||
| 'focusable' => true, | ||
| ), | ||
| ); | ||
| return wp_kses( $icon_content, $allowed_tags ); | ||
| } | ||
|
|
||
| /** | ||
| * Retrieves the content of a registered icon. | ||
| * | ||
| * @param string $icon_name Icon name including namespace. | ||
| * @return string|null The content of the icon, if found. | ||
| */ | ||
| private function get_content( $icon_name ) { | ||
| if ( ! isset( $this->registered_icons[ $icon_name ]['content'] ) ) { | ||
| $content = file_get_contents( | ||
| $this->registered_icons[ $icon_name ]['filePath'] | ||
| ); | ||
| $content = $this->sanitize_icon_content( $content ); | ||
|
|
||
| if ( empty( $content ) ) { | ||
| wp_trigger_error( | ||
| __METHOD__, | ||
| __( 'Icon content does not contain valid SVG markup.' ) | ||
| ); | ||
| return null; | ||
| } | ||
|
|
||
| $this->registered_icons[ $icon_name ]['content'] = $content; | ||
| } | ||
| return $this->registered_icons[ $icon_name ]['content']; | ||
| } | ||
|
|
||
| /** | ||
| * Retrieves an array containing the properties of a registered icon. | ||
| * | ||
| * | ||
| * @param string $icon_name Icon name including namespace. | ||
| * @return array|null Registered icon properties or `null` if the icon is not registered. | ||
| */ | ||
| public function get_registered_icon( $icon_name ) { | ||
| if ( ! $this->is_registered( $icon_name ) ) { | ||
| return null; | ||
| } | ||
|
|
||
| $icon = $this->registered_icons[ $icon_name ]; | ||
| $icon['content'] = $icon['content'] ?? $this->get_content( $icon_name ); | ||
|
|
||
| return $icon; | ||
| } | ||
|
|
||
| /** | ||
| * Retrieves all registered icons. | ||
| * | ||
| * @param string $search Optional. Search term by which to filter the icons. | ||
| * @return array[] Array of arrays containing the registered icon properties. | ||
| */ | ||
| public function get_registered_icons( $search = '' ) { | ||
| $icons = array(); | ||
|
|
||
| foreach ( $this->registered_icons as $icon ) { | ||
| if ( ! empty( $search ) && false === stripos( $icon['name'], $search ) ) { | ||
| continue; | ||
| } | ||
|
|
||
| $icon['content'] = $icon['content'] ?? $this->get_content( $icon['name'] ); | ||
| $icons[] = $icon; | ||
| } | ||
|
|
||
| return $icons; | ||
| } | ||
|
|
||
| /** | ||
| * Checks if an icon is registered. | ||
| * | ||
| * | ||
| * @param string $icon_name Icon name including namespace. | ||
| * @return bool True if the icon is registered, false otherwise. | ||
| */ | ||
| public function is_registered( $icon_name ) { | ||
| return isset( $this->registered_icons[ $icon_name ] ); | ||
| } | ||
|
|
||
| /** | ||
| * Utility method to retrieve the main instance of the class. | ||
| * | ||
| * The instance will be created if it does not exist yet. | ||
| * | ||
| * | ||
| * @return WP_Icons_Registry The main instance. | ||
| */ | ||
| public static function get_instance() { | ||
| if ( null === self::$instance ) { | ||
| self::$instance = new self(); | ||
| } | ||
|
|
||
| return self::$instance; | ||
| } | ||
| } | ||
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this code caused the unit test to fail.
GitHub Action Example: https://github.com/WordPress/wordpress-develop/actions/runs/22104294772/job/63882418252?pr=10909
I think the reason is that the Gutenberg commit hash defined in WordPress core does not yet have an icon marked as
public->trueinmanifest.php. I think there are two ways to solve this. What do you think?