CSS glitch in Gutenberg

  • Resolved Gin

    (@rawdolphe)


    9 months, 2 weeks ago

    Hi Ernest,

    I have been testing your Ajax Search Lite plugin today, it’s really great thank you so much for such a powerful tool! More than I need…

    Pretty much ‘everything’ worked for me, I used it in Gutenberg with the theme 2024. The output (search results) was fine visually, all settings worked as they should, however there is an annoying styling glitch and I am not able to fix it, I’ll explain and it’s pretty straight forward.

    When I insert a ShortCode Block in Gutenberg to show the search bar, in a normal Page it looks fine, however, when I try this in the default Gutenberg Search Template (front end template) there are some styling issues, please see above screenshots. Most likely a problem with Gutenberg, possibly some Classes clashing…?

    I tried to Inspect the CSS in Google Chrome, but was not successful in finding out what was going on. I am pretty sure it’s ‘simple’ to fix, but not for me ??

    Could you please advise, I am testing locally, I could share some snapshots here for you if you tell me where to look?

    Thank you,
    Gin

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author wpdreams

    (@wpdreams)

    Hi Gin,

    Thank you for the details!

    It is because of the shortcode block. Interestingly, shortcode blocks are not very well suited for complex HTML outputs, because a so called autop feature is executed on the output. Autop basically adds automatic paragraph/line breaks, treating the output as if it was text and not HTML.

    The easiest way to get around this is by changing the shortcode block to custom HTML block instead, and it will resolve the issue ??

    I will address this in an upcoming release, but unfortunately it’s not possible to fix it to a 100%, as the paragraphing happens after the shortcode is processed.

    All the best,
    Ernest

    Thread Starter Gin

    (@rawdolphe)

    Hi Ernest,

    Thanks a lot for your reply.

    I did think it was something a bit more involved! The strange thing is, the Shortcode is outputting fine on the Page though (but ot in the template…).

    So I guess I just copy the shortcode in an html Block?

    EDIT: Yes! I just tried the Custom HTML BLock and so far so good! I didn’t know we could stick Shortcode in Custom HTML Blocks.

    — I’ll be checking the Ajax Search Pro version —

    Thank you again Ernest and Happy Chinese New Year!

    Yours sincerely,
    Gin

    • This reply was modified 9 months, 2 weeks ago by Gin. Reason: Fixed!
    Plugin Author wpdreams

    (@wpdreams)

    Great ??

    The good news is that I am adding a possible change in an upcoming release to try to prevent the autop adding those paragraphs. Will see how it goes.

    All the best,
    Ernest

    Thread Starter Gin

    (@rawdolphe)

    Thanks Ernest,

    Will you consider adding Gutenberg Blocks? It’s the future of WordPress I believe ??

    I have used Oxygen and Elementor before (no more builders for me…), and now for the past two months I have been ‘playing’ with Gutenberg with the 2024 theme and it’s incredible what you can do with it!

    WIth TTF, for layouts you can achieve pretty much anything out of the box, the only downside is that there are no dedicated breakpoints options for responsiveness in general, but it’s superfast (I am super in can be tweaked further…).

    Gutenberg 2024 + your Ajax Search Pro it’s going to be a very powerful combo. You’ll be one of the first to know when my site goes live properly.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS glitch in Gutenberg’ is closed to new replies.

Tags