How to add custom class for FAQ Block

  • Resolved yumsun

    (@yumsun)


    2 years, 11 months ago

    Hi,

    I have implemented a fully designed layout for Yoast SEO’s FAQ block.
    If possible, I would like to add my own classes to the ‘schema-faq’, ‘schema-faq-question’, and ‘schema-faq-answer’ output by the block.

    I’ve been adding classes from Javascript and displaying them, but I’m having problems with the landing position of anchor links from external pages shifting on the iPhone. If possible, I would like to add my own classes in the filters of functions.

    Is there a filter to add the class?

    Best regards,
    yumsun

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Maybellyne

    (@maybellyne)

    Hello Yumsun,

    Thanks for reaching out about customizing the Yoast FAQ block. The styling of the different elements of a page (such as color, font, font size, headings), including the FAQ block, is usually controlled by your chosen theme. Changing the way your site and the FAQ blocks appear requires some knowledge of HTML and CSS. If you want to change the styling of the block, the following resources may be helpful to you:

    – Our developer guide
    – W3Schools Tutorials (HTML and CSS)
    – WPBeginner: How to Easily Add Custom CSS to Your WordPress Site

    Thread Starter yumsun

    (@yumsun)

    Hi Maybellyne,

    I’m using CSS, HTML and Javascript to create custom layouts.

    To display the FAQ in an accordion style, I am using UIKit, which is implemented throughout the site.

    To do this, I have added a class for UIKit to the ‘schema-faq’ class from Javascript. Because of this, the height of the document changes on the iPhone, so the anchor links from external pages show different position.

    If I could add class to YoastSEO’s FAQ block in the PHP output, that would solve the problem, but it means there is no filter function to customize the output of Gutenberg block…

    I’ll try another way. Thank you for your support.

    Best regards,
    Yumsun

    Plugin Support Michael Ti?a

    (@mikes41720)

    Hi,

    We do have some additional documentation in our developer blog regarding styling the Yoast FAQ & How-To blocks here – https://developer.yoast.com/blog/theming-gutenberg-the-faq-block/ & https://developer.yoast.com/blog/theming-gutenberg-the-howto-block/

    Sorry that we couldn’t be of much more help here. Best of luck in further optimizing your site!

    Thread Starter yumsun

    (@yumsun)

    Hi,

    Thank you for the additional support.

    I am comfortable implementing the accordion FAQ.
    I’ll be thinking about the linked issue on the iPhone for a long time.

    It would be helpful if there was a filter that could output an arbitrary class for FAQ Block as that would be a quick fix.

    Thanks,
    yumsun

    • This reply was modified 2 years, 10 months ago by yumsun.
    Plugin Support Michael Ti?a

    (@mikes41720)

    Hi,

    For feature requests or enhancements that aren’t covered in the developer portal, we recommend that you create a new issue in our GitHub repository so our developers can take a look.

    Thanks!

    Plugin Support devnihil

    (@devnihil)

    We are going ahead and marking this issue as resolved due to inactivity. If you require any further assistance please create a new issue.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to add custom class for FAQ Block’ is closed to new replies.