In this case I think it would be easiest to simply ignore any Gutenberg-specific implementation and set up the button’s click event to click()
the first linked image in the gallery listing.
The following searches the page for “gallery buttons” and the first linked image in a gallery block, then sets up the buttons to execute a click
event on the first linked image when clicked.
const initPostGalleryButtons = () => {
const btns = document.querySelectorAll( '.fl-module-fl-post-content .gallery-btn' )
const first_gallery_link = document.querySelector( '.fl-module-fl-post-content .wp-block-gallery .wp-block-image>a' )
if( ! btns.length || ! first_gallery_link )
return
const openGallery = () => first_gallery_link.click()
for ( const btn of btns )
btn.addEventListener( 'click', openGallery )
}
document.addEventListener( 'DOMContentLoaded', initPostGalleryButtons )
Related Posts:
- How to trigger JS in gutenberg page load
- Gutenberg: Block validation failed
- Change order/position of Gutenberg inspector control panel
- Gutenberg Inspector Controls
- serialize_blocks breaking html tags in content
- How to use getBlockIndex
- Hide or show Gutenberg custom block using date range
- Use page Title in Gutenberg custom banner block
- How to add code to `head` with WordPress 5.9 FSE (Full Site Editing)
- Block Editor: add an aria-label to an option inside a SelectControl
- Gutenberg: Get All Attributes From «core/image» Block
- How to make the Preview button automatically open new tab?
- Gutenberg: How can I disable backspace key from deleting an empty paragraph block?
- Where on Github, or elsewhere, can I find the code for core-blocks?
- Gutenberg translation is not working
- How to add javascript function in the “save()” of gutenberg block?
- How to check if current admin page is Gutenberg editor? [duplicate]
- Possible add color palette for a block’s inner div instead of outer?
- Programmatically trigger the gutenberg save
- Gutenberg : in the backend, I just want to store a JSON object
- wordpress gutenberg url popover custom options
- Text Editors Are Hiding Text
- Disabling deleting reusable blocks except on the reusable block manager
- Gutenberg. How To Register A Custom Block Style For Specific Post Type Only
- get used blocks in post and detect changing
- How to know whether you are editing a page or a post?
- Gutenberg get block name
- How has my WordPress editor become so basic? Cannot add blocks or see anything visual
- Block Validation Fails: ‘
- Insert SVG code (not img) in HTML block
- How to enable Block Editor on the Posts page
- React to a change of the block alignment
- Object type for block Attribute (Gutenberg)
- Controlling the RichText component outside of blocks
- Custom Gutenberg Block: How to return plain HTML with save(), without escaping?
- Removing advanced section from brand new gutenberg block
- How to allow to add gradients to core/heading block?
- Gutenberg: How to update associated Terms of Custom Taxonomy to Current Post
- Gutenberg: How to float core table block in front-end of site?
- Guttenberg Implementation on Front Page
- How do I access onMerge, onReplace, onRemove functions for a Rich Text component in Gutenberg block code?
- How can Reusable Blocks be fully deleted?
- Make a Gutenberg Block that do WP_User_Query
- Extend Gutenberg block core/quote block
- How to get all attributes of a block in PHP?
- reload the gutenberg editer on taxonomy change
- Gutenberg Block Get Author Details
- Gutenberg Block Toolbar – remove button
- Cannot enable Gutenberg editor [closed]
- Gutenberg and FSE: How to exclude a block from full site editing
- Disable only one Gutenberg block programatically / coblock/maps not listed in blocks
- How to select block variation from BlockVariationPicker
- WordPress Full Site Editing: How can I access my posts listing page?
- How Do I Prevent An Image From Automatically Adjusting In Guttenberg Block Gallery?
- How to reload data stored for a sever side gutenberg block in the editor
- Using wp_set_script_translations without manually registering the script
- How to remove the old “Custom CSS” from customizer after the theme has been migrated to Gutenberg FSE
- Why am I getting the error: Cannot update a component (`Unknown`) while rendering a different component (`Edit`)?
- Update number of posts when attribute changed
- Connect WordPress and react front-end
- Gutenberg editor auto remove wrapping tags like
- Unable to edit server side rendered block
- WordPress Dynamic Block with multiple checkboxes
- Embedded block editor in block editor
- useSelect in block Edit always returns default store value
- Count Gutenberg blocks on the front-end?
- How to call a react hook on edit of registerBlockType?
- Why does the paragraph block automatically add class?
- How can I block embeds and show an individual preview image per block?
- add arrow icon next to read more link on latest posts gutenberg block
- Create a trailing block with programatically generated Gutenberg columns
- How to make attributes unique to Gutenberg blocks
- How to check title is being entered in Title Case?
- Create Gutenburg Block to render inline SVG
- Gutenberg blocks not full width
- How to extend the URLPopover render settings for the paragraph Gutenberg block?
- How to make a block similar to another block
- Gutenberg: How to enqueue scripts conditionally in render_callback by checking for an attribute?
- How can I reintroduce autocompletion of Gutenberg components in Visual Code?
- Blocks – any way to have editor honor width percentages on child blocks?
- Using `esc_attr( get_block_wrapper_attributes() )`, results in `class=””wp-block-foo””`
- How to display dynamic block editor on front-end?
- Enable varying text for Phone, Tablet and Desktop
- Debouncing Input value with block attributes
- Using the block theme in production
- When using the MediaPlaceholder component, will skipping blobUrl handling break something?
- Pass component name in onChange [closed]
- Add another option to default link control settings panel?
- With full-site-editing menus, how do I create a non-linking top-level menu item with linking sub-pages
- How can I render a built-in Gutenberg block with InnerBlocks outside of the block editor?
- How do I add filters in Twenty-Twenty-Three without a functions.php?
- Different style options for the same block depending where it is used
- How to extract ‘intro’ block from page content, but later strip from page main content
- Add a new option to Social Link block
- Editing Inline fonts/typeface using the block editor
- What is the proper way of using React Hooks in Gutenberg on frontend?
- How to add Gutenberg editor on frontend page?
- WordPress gutenberg block serverside rendering html elements not showing up
- Gutenberg: change block Components Popover properties
- Unable to register a block using block.json in Block Editor