Browser Shots 1.7 Released With Gutenberg Support

Posted by Ronald Huereca / June 9, 2019 / , ,

The popular Browser Shots plugin, with 7,000+ installs, was just released with Gutenberg support.

Me, (MediaRon LLC) contacted Ben through his contact form to see if he would be open to adding a Gutenberg block to his plugin. He contacted me back and mentioned his code wasn’t hosted anywhere, and I asked him to host it on GitHub so I can could do some pull requests.

The Block Building Process

I created the block using Create Guten Block, which recently had one of my pull requests merged that allowed for JavaScript translations.

I integrated the plugin using the REST API and using Ben’s shortcode functionality to match what was in the front-end and back-end. I would love to show the early work, but those branches have come and gone.

Ben was happy for the help, having taken React courses, but not comfortable yet creating a custom block.

I added alignment options, a loading screen (now a welcome screen) for inputting the URL, and using the REST API to fetch the image.

Ben gratefully accepted my first pull request, where he had some changes/suggestions on how the block could improve. I made those changes and the second pull request was accepted.

Then Ben got to work. With the initial framework in place, Ben began working on the block on his own, improving it substantially and removing the need for a REST API endpoint and Ajax call. This sped up the block loading substantially. He needed help adding a caption and the reset functionality, which lead to my third pull request.

He then released the plugin to WordPress.org under a major version.

The Gutenberg Block

The Welcome Screen

When you first add the block, you are taken to a welcome screen. The new plugin can be found under the embed category or you can add the block by typing /browser and selecting it from the list.

Browser Shots Block Shortcut
Browser Shots Block Shortcut

You’re then taken to a welcome screen.

Browser Shots Welcome Screen
Browser Shots Welcome Screen

The Block Settings

Once you’ve entered your URL, a loading image shows if the URL hasn’t been entered before. We’ve included a refresh button that can be clicked if the URL needs refreshing. This is accomplished by adding a version variable to the end of the URL that needs fetching.

There’s also alignment options and an edit option.

Browser Shots Main Block Settings
Browser Shots Main Block Settings

The settings panel is also available and includes alt text, image size, and link settings.

Browser Shots Inspector Panel
Browser Shots Inspector Panel
Link Settings
Link Settings

Browser Shots Demo

And here’s the moment you’ve been waiting for. Browser Shots is used below to show an image preview of my sister website BB Vapor Modules.

BB Vapor Modules for Beaver Builder

BB Vapor Modules for Beaver Builder

Conclusion

It was a pleasure working with Ben on this block and I’m glad we finally got it released. Download Browser Shots below. Any comments are appreciated.

Ronald Huereca

Ronald Huereca is the CEO of MediaRon LLC and enjoys WordPress plugin and theme development.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top