Dynamically show innerblocks within custom Gutenberg block

  • Resolved mlinnell

    (@mlinnell)


    1 year, 2 months ago

    Question: How might I dynamically show some innerblocks (say, innerblocks 1 and 2) within a custom Gutenberg block and hide other innerblocks (say, innerblocks 3 and 4)?

    Context: I’m trying to create a custom Gutenberg block using React that reveals/hides content based on the click of button/s — and the content is different innerblocks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    Sounds like you want to implement an “accordion” effect. Visibility is managed with CSS. You code would add or remove a particular class attribute for affected elements based on user interaction.

    Do a general internet search for “react accordion”. You’ll find many examples and pre-built components you could use.

    Thread Starter mlinnell

    (@mlinnell)

    Hi bcworkz, this is a good call. We did some accordian research which eventually led us to find a good template to use for creating our custom block. Much appreciated! Cheers

    Thread Starter mlinnell

    (@mlinnell)

    (This is resolved)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Dynamically show innerblocks within custom Gutenberg block’ is closed to new replies.