Skip to content
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

Add a few filters to make it possible to change the default navigation icons #44228

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from

Conversation

SGr33n
Copy link

@SGr33n SGr33n commented Sep 16, 2022

Added a few filters to make it possible to programmatically change the navigation icons.

At time #43674 there is no chance to change the default navigation icons. The only way to customize them is filtering inside render_block_core/navigation and making a string replacement on $block_content... not really the cleanest way.

So I added a few filters to make it possible.

They are:

  • block_core_navigation_render_submenu_icon : The submeu Chevron
  • block_core_navigation_render_toggle_button_icon : The first icon option
  • block_core_navigation_render_toggle_button_icon_menu : The second icon option
  • block_core_navigation_render_toggle_button_more_vertical : The third icon option
  • block_core_navigation_render_toggle_button_more_horizontal : The fourth icon option
  • block_core_navigation_render_toggle_close_button_icon : The close button (X)

Added a few filters to make it possible to programmatically change the navigation icons.
@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 16, 2022
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @SGr33n! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

Fix lint check errors.
@@ -619,14 +619,34 @@ function render_block_core_navigation( $attributes, $content, $block ) {
);

$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
$toggle_button_icon = apply_filters(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for picking this up.

The problem with filtering here is that the user could have selected a particular icon in the editor, but then a filter applied by a plugin renders something completely different on the frontend, which results in a very confusing experience.

I think ideally the solution would be a filter that modifies the array of available icons for the user to select.

That may require JS and PHP code though.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, or replace filters with making possible to upload custom icons on Gutenberg.

@skorasaurus skorasaurus added the [Block] Navigation Affects the Navigation Block label Sep 22, 2023
@github-actions
Copy link

Warning: Type of PR label error

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Type-related labels to choose from: [Type] Accessibility (a11y), [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
  • Labels found: [Block] Navigation, First-time Contributor.

Read more about Type labels in Gutenberg.

@skorasaurus
Copy link
Member

If you're still interested in this; there's active discussion about this at #53510

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants