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

Additional CSS Class(es) not working on Navigation Block #19858

Closed
phpbits opened this issue Jan 24, 2020 · 4 comments · Fixed by #20076
Closed

Additional CSS Class(es) not working on Navigation Block #19858

phpbits opened this issue Jan 24, 2020 · 4 comments · Fixed by #20076
Assignees
Labels
[Block] Navigation Affects the Navigation Block Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Bug An existing feature does not function as intended

Comments

@phpbits
Copy link
Contributor

phpbits commented Jan 24, 2020

Describe the bug
Adding Additional CSS Class(es) on Navigation block isn't reflecting on the editor and only added on the frontend. While on the Navigation link, adding custom classes were not applied on both editor and frontend. Thanks!

@youknowriad youknowriad added [Block] Navigation Affects the Navigation Block [Type] Bug An existing feature does not function as intended Good First Issue An issue that's suitable for someone looking to contribute for the first time labels Jan 24, 2020
@pagelab
Copy link
Contributor

pagelab commented Jan 28, 2020

I was able to reproduce this using Gutenberg version 7.3.0. Related: #18629

@roo2
Copy link
Contributor

roo2 commented Feb 2, 2020

I had a look at fixing this, there are two issues:

  1. The Navigation Block's Additional CSS Class(es) are not rendered in the editor.
    ** The addisional CSS Classes are rendered on the live page correctly [x]
    ** This one is very easy to fix but I think the impact is very low since custom CSS is not applied in the editor anyway
  2. Navigation Link components do not have their Additional CSS Class applied at all
    ** this is much more involved to fix, I looked into packages/block-library/src/navigation/index.php but it looks like the Navigation Link's Additional css class is currently passed in to this function.

For people coming from google, a workaround would be to style the Navigation Link's using e.g. nth child selectors.

@draganescu
Copy link
Contributor

Hi @phpbits can you take a look at #20076 and let me know if it solves this as expected?

@phpbits
Copy link
Contributor Author

phpbits commented Feb 7, 2020

@draganescu Tested and seems to be working fine. Custom classnames are being added. Thanks!

@draganescu draganescu self-assigned this Feb 7, 2020
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 Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants