Support » Fixing WordPress » Customizing Gutenberg gallery markup

  • I need to add a data attribute to an anchor element of the Gutenberg gallery block. Unfortunately, Gutenberg generates the markup on editing time and not when the page is requested. I see the following options of working around this issue:
    1. Search and replace gallery markup with PHP on post request.
    2. Adding the data attribute with javascript on document ready
    3. Extending the gallery block, requires to update all exisiting posts.
    Any other ideas?

    To me storing non-editable HTML in the database is bad idea as you have no way of customizing the output anymore. The gallery block before Gutenberg only stored the image IDs which seemed the better approach in my mind. Opinions on this?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The gallery shortcode is obviously dynamic. The gallery block, however, is static. Think of it as a way to group images. Don’t assume that they are the same thing.

    Since your usage is for Javascript, it’s probably best added on the client side, as the effect is only available when your plugin is active anyway.

    Thread Starter janc76


    Hello Joy, thank you for your feedback. The gallery shortcode is not an option as I don’t want create the galleries manually but with Gutenberg. I don’t quite get your last point. What plugin are you refering to?

    You can create galleries with the gallery shortcode from within Gutenberg. And all the ones created in the editor are “manual”, regardless. The shortcode is the only automatic way, meaning that if you don’t specify IDs, it will show all the attached images, so it’s easier than any other method. (Use a Classic block and click Add Media. You will get a different media flow than if you start with a Gallery block.)

    I mentioned a plugin, because it sounded like you were either writing one or using one that needed a data attribute. That’s the only thing I could figure why you would want to change your gallery markup. Blocks are not very forgiving of inconsistent markup. You would need some code to do some of your suggested options, and custom code lives in plugins.

    Thread Starter janc76


    Hey Joy, I think I see what you mean, the shortcode doesn’t have the gallery blocks features though and is probably no longer maintained.
    I am using the Genesis framework and currently still have all my customizations inside the child theme. I was thinking of moving them to a plugin so I don’t have to bother with child theme updates. Looks like you are recommending this approach.
    I am using a JavaScript lightbox gallery on top of the WordPress gallery and that requires a data attribute to pass some information to the lightbox gallery. Are you favouring a client side markup modifications for this purpose?

    • This reply was modified 1 year, 3 months ago by janc76.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Customizing Gutenberg gallery markup’ is closed to new replies.