{"id":141139,"date":"2021-05-21T02:18:46","date_gmt":"2021-05-21T02:18:46","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/masonry-gallery\/"},"modified":"2026-10-08T22:58:05","modified_gmt":"2026-10-08T22:58:05","slug":"block-for-masonry-gallery","status":"publish","type":"plugin","link":"https:\/\/nl.wordpress.org\/plugins\/block-for-masonry-gallery\/","author":12121308,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.8.0","stable_tag":"2.8.0","tested":"7.1.3","requires":"5.7.2","requires_php":"7.4.9","requires_plugins":null,"header_name":"CTC Masonry Gallery","header_author":"Ujwol Bastakoti","header_description":"Masonry Image Gallery for WordPress","assets_banners_color":"fbdbd8","last_updated":"2026-10-08 22:58:05","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.paypal.com\/donate\/?hosted_button_id=VUJCB99MC6R48","header_plugin_uri":"https:\/\/github.com\/ujw0l\/masonry-gallery","header_author_uri":"https:\/\/ujw0l.github.io\/","rating":5,"author_block_rating":5,"active_installs":1000,"downloads":17723,"num_ratings":3,"support_threads":0,"support_threads_resolved":0,"author_block_count":12,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"ujw0l","date":"2022-06-30 13:06:53","revision":2750257},"2.0.0":{"tag":"2.0.0","author":"ujw0l","date":"2023-04-30 07:07:40","revision":2906235},"2.5.0":{"tag":"2.5.0","author":"ujw0l","date":"2023-05-21 02:40:15","revision":2915307},"2.5.1":{"tag":"2.5.1","author":"ujw0l","date":"2023-06-23 03:03:50","revision":2929901},"2.6.0":{"tag":"2.6.0","author":"ujw0l","date":"2024-06-10 00:14:10","revision":3100213},"2.7.0":{"tag":"2.7.0","author":"ujw0l","date":"2026-10-07 02:42:14","revision":3731779},"2.8.0":{"tag":"2.8.0","author":"ujw0l","date":"2026-10-08 22:58:05","revision":3735667}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":3},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3735667,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3735667,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3735667,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":2535145,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":2535145,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3735667,"resolution":false,"location":"assets","locale":"","contents":"{\"landingPage\":\"\\\/wp-admin\\\/plugins.php\",\"preferredVersions\":{\"php\":\"8.0\",\"wp\":\"latest\"},\"phpExtensionBundles\":[\"kitchen-sink\"],\"features\":{\"networking\":true},\"steps\":[{\"step\":\"installPlugin\",\"options\":{\"activate\":true},\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"block-for-masonry-gallery\"}},{\"step\":\"login\",\"username\":\"admin\",\"password\":\"password\"}]}"}},"all_blocks":{"masonry-gallery\/ctc-gal-block":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":2,"name":"masonry-gallery\/ctc-gal-block","version":"2.8.0","title":"CTC Masonry Gallery","category":"media","icon":"layout","description":"Create a flowing masonry image gallery with hover enlargement and an optional full-screen viewer.","example":{},"supports":{"html":false},"textdomain":"ctc-gal","editorScript":"file:.\/index.js","editorStyle":"file:.\/index.css","style":"file:.\/style-index.css","viewScript":"file:.\/frontend.js"}},"tagged_versions":["1.0.0","2.0.0","2.5.0","2.5.1","2.6.0","2.7.0","2.8.0"],"block_files":["\/tags\/2.8.0\/build\/index.js","\/tags\/2.8.0\/build\/index.css","\/tags\/2.8.0\/build\/style-index.css","\/tags\/2.8.0\/src\/index.js","\/tags\/2.8.0\/src\/index.css","\/tags\/2.8.0\/src\/style-index.css"],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3735667,"resolution":"1","location":"plugin","width":1440,"height":1000},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3735667,"resolution":"4","location":"plugin","width":1440,"height":1000},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3735667,"resolution":"5","location":"plugin","width":1440,"height":1000},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3735667,"resolution":"2","location":"plugin","width":2218,"height":1352},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3735667,"resolution":"3","location":"plugin","width":1440,"height":1000}},"screenshots":{"1":"Refined Gutenberg gallery editor with a live masonry preview and collection details.","2":"Grouped Layout, Interaction, and Appearance settings alongside the gallery preview.","3":"A published masonry gallery with rounded image corners and balanced spacing.","4":"The full-screen image viewer with thumbnails, captions, navigation, zoom, and slideshow controls.","5":"The image-selection screen for starting a new collection."}},"plugin_section":[172757],"plugin_tags":[1220,210,7800,6822,8773],"plugin_category":[50],"plugin_contributors":[83923],"plugin_business_model":[],"class_list":["post-141139","plugin","type-plugin","status-publish","hentry","plugin_section-block","plugin_tags-block","plugin_tags-gallery","plugin_tags-image-album","plugin_tags-masonry","plugin_tags-overlay","plugin_category-media","plugin_contributors-ujw0l","plugin_committers-ujw0l"],"banners":{"banner":"https:\/\/ps.w.org\/block-for-masonry-gallery\/assets\/banner-772x250.png?rev=2535145","banner_2x":"https:\/\/ps.w.org\/block-for-masonry-gallery\/assets\/banner-1544x500.png?rev=2535145","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/block-for-masonry-gallery\/assets\/icon.svg?rev=3735667","icon":"https:\/\/ps.w.org\/block-for-masonry-gallery\/assets\/icon.svg?rev=3735667","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/block-for-masonry-gallery\/trunk\/screenshot-1.png?rev=3735667","caption":"Refined Gutenberg gallery editor with a live masonry preview and collection details."},{"src":"https:\/\/ps.w.org\/block-for-masonry-gallery\/trunk\/screenshot-2.png?rev=3735667","caption":"Grouped Layout, Interaction, and Appearance settings alongside the gallery preview."},{"src":"https:\/\/ps.w.org\/block-for-masonry-gallery\/trunk\/screenshot-3.png?rev=3735667","caption":"A published masonry gallery with rounded image corners and balanced spacing."},{"src":"https:\/\/ps.w.org\/block-for-masonry-gallery\/trunk\/screenshot-4.png?rev=3735667","caption":"The full-screen image viewer with thumbnails, captions, navigation, zoom, and slideshow controls."},{"src":"https:\/\/ps.w.org\/block-for-masonry-gallery\/trunk\/screenshot-5.png?rev=3735667","caption":"The image-selection screen for starting a new collection."}],"raw_content":"<!--section=description-->\n<p>CTC Masonry Gallery creates flowing image collections in the WordPress Gutenberg editor. Version 2.8.0 brings a refined editor, a polished image viewer, and more reliable image loading while preserving the existing gallery features and saved block markup.<\/p>\n\n<h3>Key Features<\/h3>\n\n<ul>\n<li><strong>Masonry layout:<\/strong> Images retain their proportions and arrange automatically as the gallery resizes.<\/li>\n<li><strong>Refined editor:<\/strong> A welcoming image-selection state, a live gallery preview, an image count, and a clear Edit gallery action.<\/li>\n<li><strong>Grouped settings:<\/strong> Layout, Interaction, and Appearance panels keep every existing control easy to find.<\/li>\n<li><strong>Image viewer:<\/strong> Browse thumbnails, navigate to the first or last image, zoom in or out, and play or pause a slideshow.<\/li>\n<li><strong>Keyboard access:<\/strong> Open the viewer with Enter or Space; use Left\/Right to browse, Up\/Down to zoom, and Escape to close. Tab stays within the viewer and focus returns to the selected image on close.<\/li>\n<li><strong>Hover enlargement:<\/strong> Optionally enlarge images on hover. Hover enlargement and the image viewer remain mutually exclusive.<\/li>\n<li><strong>Custom shadows:<\/strong> Adjust shadow size and color, including transparency.<\/li>\n<li><strong>Flexible spacing:<\/strong> Set image width from 1\u2013100% and the gutter from 1\u201350 pixels.<\/li>\n<li><strong>Reliable loading:<\/strong> Cached, slow, and failed image loads no longer keep the entire gallery hidden.<\/li>\n<li><strong>Existing galleries preserved:<\/strong> No migration is needed; the original masonry and viewer libraries remain in the plugin.<\/li>\n<\/ul>\n\n<h3>What's Next<\/h3>\n\n<p>Explore my other WordPress projects:<\/p>\n\n<ul>\n<li><a href=\"https:\/\/ujwol.gumroad.com\/l\/brrfn\">CTC Gallery \ud83c\udfa8<\/a> - Four unique premium galleries block in same plugin<\/li>\n<li><a href=\"https:\/\/gfaddon.ujwolb.com.np\/\">Gravity Forms Add-ons<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/ctc-lite\/\">CT Commerce Lite \ud83d\uded2<\/a> - A block-based eCommerce plugin.<\/li>\n<\/ul>\n\n<h3>Development<\/h3>\n\n<pre><code>`sh\n<\/code><\/pre>\n\n<p>npm ci\nnpm run build\nnpm run lint:js\nnpm run lint:css\n    `<\/p>\n\n<p>The <code>src\/<\/code> directory contains the editable source. Commit the generated <code>build\/<\/code> assets with source changes so the plugin can be installed without Node.js. The webpack adapter in <code>tooling\/<\/code> exposes the classes from the existing <code>js-masonry<\/code> and <code>ctc-gallery-viewer<\/code> packages; both dependencies and all existing npm scripts are retained.<\/p>\n\n<!--section=installation-->\n<p>To install and activate CTC Masonry Gallery:<\/p>\n\n<ol>\n<li>Upload the plugin files to the <code>\/wp-content\/plugins\/masonry-gallery<\/code> directory, or install the plugin through the WordPress plugins screen directly.<\/li>\n<li>Activate the plugin through the 'Plugins' screen in WordPress.<\/li>\n<li>Go to the Post screen and look for the Masonry Gallery block in the Gutenberg section.<\/li>\n<li>Add the block to your post or page.<\/li>\n<li>Use <strong>Edit gallery<\/strong> to add, remove, or reorder images in the media library.<\/li>\n<li>Adjust image width and spacing under <strong>Layout<\/strong>, choose hover enlargement or the viewer under <strong>Interaction<\/strong>, and configure shadows under <strong>Appearance<\/strong>.<\/li>\n<li>Save or publish the post to display the gallery.<\/li>\n<\/ol>\n\n<p>To update an existing installation, replace the plugin files with the new release. Existing galleries keep their images and settings.<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id=\"q%3A%20how%20do%20i%20adjust%20the%20gutter%20width%20between%20images%3F\"><h3>Q: How do I adjust the gutter width between images?<\/h3><\/dt>\n<dd><p>A: You can adjust the gutter width in the block settings under the Gutenberg editor.<\/p><\/dd>\n<dt id=\"q%3A%20can%20i%20customize%20the%20modal%20view%3F\"><h3>Q: Can I customize the modal view?<\/h3><\/dt>\n<dd><p>A: Enable <strong>Open in image viewer<\/strong> in the Interaction panel. The viewer includes thumbnail navigation, zoom controls, and a slideshow.<\/p><\/dd>\n<dt id=\"q%3A%20where%20can%20i%20get%20support%3F\"><h3>Q: Where can I get support?<\/h3><\/dt>\n<dd><p>A: For support or to report issues, please visit the <a href=\"https:\/\/wordpress.org\/support\/plugin\/block-for-masonry-gallery\">Support Forum<\/a>.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h3>2.8.0<\/h3>\n\n<ul>\n<li>Redesigned the editor with a refined empty state, gallery header, live preview, and collection details.<\/li>\n<li>Organized all existing controls into Layout, Interaction, and Appearance panels.<\/li>\n<li>Polished image corners and hover transitions while preserving the enlargement option.<\/li>\n<li>Refined the existing overlay viewer with responsive controls, thumbnail selection, and a dark backdrop.<\/li>\n<li>Added keyboard activation, dialog focus handling, accessible control names, and reduced-motion support.<\/li>\n<li>Improved masonry initialization for cached, slow, and failed images, and fixed full-width layouts.<\/li>\n<li>Fixed source-library exports so production rebuilds retain both original scripts.<\/li>\n<li>Preserved saved block markup and existing gallery settings.<\/li>\n<li>Updated project links and documentation.<\/li>\n<\/ul>\n\n<h3>2.7.0<\/h3>\n\n<ul>\n<li>Enhanced gallery display on image load \ud83d\udce5<\/li>\n<\/ul>\n\n<h3>2.6.0<\/h3>\n\n<ul>\n<li>Added image box shadow background effect \ud83d\udd8d\ufe0f<\/li>\n<li>Added optional image enlargement on hover \ud83d\udd0d<\/li>\n<li>Added optional display of images in overlay \ud83d\uddbc\ufe0f<\/li>\n<\/ul>\n\n<h3>2.5.1<\/h3>\n\n<ul>\n<li>Minor bug fixes \ud83d\udc1e<\/li>\n<\/ul>\n\n<h3>2.5.0<\/h3>\n\n<ul>\n<li>Added JSX support for development \ud83d\udee0\ufe0f<\/li>\n<li>Minified version of JavaScript included \u26a1<\/li>\n<\/ul>\n\n<h3>2.0.0<\/h3>\n\n<ul>\n<li>Introduced CTC Overlay viewer \ud83c\udfa5<\/li>\n<li>Added gutter width adjustment option \ud83d\udccf<\/li>\n<\/ul>\n\n<h3>1.0.0<\/h3>\n\n<ul>\n<li>Initial stable release \ud83d\ude80<\/li>\n<\/ul>","raw_excerpt":"Create refined masonry galleries in Gutenberg with hover enlargement, custom shadows, and a full-screen image viewer.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/141139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=141139"}],"author":[{"embeddable":true,"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/ujw0l"}],"wp:attachment":[{"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=141139"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=141139"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=141139"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=141139"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=141139"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/nl.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=141139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}