Install
This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.
Install straight from GitHub with WP-CLI:
wp plugin install https://github.com/chandrapatel/image-accordion-block/archive/refs/heads/main.zipNo built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Image Accordion Block allows user to add accordion with different images. In front-end, corresponding image will be displayed when user click on different accordion.
I have referred design and layout from Pixel 6a page. I really liked the layout and design so I have tried to create custom block for Block Editor.
I have developed this Gutenberg block for learning purpose. Such example(s) help developers to learn something new and different.
Important Notes / Limitation
- Currently design is not responsive and haven't tested with different themes and layout.
- Minimum two and maximum four accordion can be added.
- User need to select images based on the number of accordion and main image.
- User can't map image to accordion. It is based on images selection sequence.
Credits
- https://store.google.com/us/product/pixel_6a?hl=en-US - I have tried to replicate accordion with images from this link.
- How TO - Collapsible/Accordion - I have used code snippet for collapsible accordion from this link.
Demo
https://user-images.githubusercontent.com/9443225/192103909-d9b82343-9718-4772-82d3-35f4cad48727.mp4