A lot has happened during the last few months in the world of web development. Firstly, the new block-based editor, codenamed Gutenberg, has finally been merged into WordPress 5.0. It’s a really big change since its inception as it sets a new foundation for WordPress to evolve in the future and will change the way how developers extend for WordPress functionalities.
Secondly, a few of our fellow developers have created some really useful tools such as one that allows view JSON in terminal and a couple of React libraries that can prove a great help in web design and development projects.
And lastly, some of the most effective resources, references, and plugins have been launched to help you update your projects according to the newer trends.
Let’s get on the most comprehensive list of fresh web development resources.Gutenberg Handbook
The official WordPress handbook where you can look up references for the design, code examples for creating blocks and others and a guide to contribute to the project. It is your first reference for developing with Gutenberg.Block Scaffold
With the block-based editor, WP-CLI now provides a convenient way to get started with creating a Gutenberg Block with a new CLI command, wp scaffold block. You can create and include it to your existing plugins and themes.CGB
Another way to easily start up a Gutenberg block is Create Guten Block (CGB) is a tool to generate a boilerplate to develop a Gutenberg block. It consists of modern tools such as React.js, Webpack, ESLint, Babel, etc. The best part is that you don’t need to configure any of these tools so you can simply focus on writing your code.Elementor Blocks for Gutenberg
A WordPress plugin that allows you to insert any Elementor templates and preview it right within the editor. The plugin comes with numerous other compatibilities that provide seamless editing experience between Elementor and Gutenberg. Check out this video to see how it’s doing in action.Atomic Blocks
A set of Gutenberg blocks with a growing number of collection. At the time of this writing, it provides the “Post Grid Block” which allows you to add a list of posts of your site in a grid layout. There’s also a “Testimonial Block” which, as the name implies, to insert a Testimonial within the page. Check out the full previews of the Blocks in this page.Block Gallery
An eye-catching block to insert your image gallery, Block Gallery provides a seamless experience to add images to your post. Simply drop your images, style the gallery display (Masonry-style, Carousel, or Fullscreen), and it’s all set. It’s, at the moment, simply the best Gallery Block for WordPress.CoBlocks
A suite of blocks from the same author who developed the above-mentioned Block Gallery, CoBlocks consists of a number of Blocks that’ll enhance your site content with such as Accordion, Pricing Table, Gif, Click-to-Tweet, and more Blocks to be added.StagBlocks
Another suite of Gutenberg Blocks. The plugin brings a number of interesting Blocks that many of you would appreciate. It includes Stat Block which allows you to customize statistics within your posts and pages. Website Card Block which will preview website in a fancy Card-style. Code Block which will render code with highlighted color.Otter Blocks
Also, a collection of Gutenberg Blocks such as the “Google Maps Block” to insert a map, “Our Service Block” to insert a list of services with a button in a grid view, and “Testimonials Area Block” to insert a list of testimonials. Otter Block is a collection of Gutenberg Blocks that businesses and theme developer would appreciate.Advanced Gutenberg Blocks
This plugin comes with a handful of advanced Blocks to enrich your content such as the auto-generated table of contents, “Giphy Blocks” to include GIF image from Giphy.com, “Unsplash Block” to insert images from Unsplash.com, “Banner Ad Block”, WooCommerce “Add-to-Cart Button Block”, and a lot more.Block Lab
Block Lab makes it easy for developers to create a Gutenberg Block. The plugin allows you to register a new Block with a user-friendly GUI and templates in PHP. You don’t even need to learn React.js.EDD Blocks
A plugin that allows you to render Easy Digital Downloads products in Gutenberg editor. Unlike using the Shortcode, the block will display product views.Test Gutenberg
Not ready to install Gutenberg plugin or update your site to WordPress 5.0? You can simply load this site to try out the new editor.Gutenberg Cloud
It’s like an AppStore for Gutenberg Blocks. A central place where you can get Gutenberg Blocks that can be used in WordPress and Drupal. Yes, Drupal is also going to adopt the Gutenberg editor for their editor.Gutenberg Examples
A Github repository of code samples to create Gutenberg Blocks. Here you can find the simplest Block to a more complex example, such as the one to create a “Recipe Block” which sets a template in the editor for users to add recipe content. A good reference for those who prefer to learn from real examples, rather than a text book.GutenbergJS
Although Gutenberg brings new possibilities to WordPress, but not everyone is ready for it. If your existing sites do not work well with Gutenberg, you can install this plugin. It allows you to disable the Gutenberg editor for particular posts, post types, user roles, themes, as well as disable the Gutenberg stylesheets in the front-end.Classic Editor
Alternately, you can install this plugin so you can keep updated to WordPress 5.0 while keep using the old classic editor. This plugin will be supported until 2022.ClassicPress
Another alternative is to switch to a WordPress fork, ClassicPress. ClassicPress focuses is on businesses, stability and security. It’s compatible with WordPress plugins and it plans to bring new interesting features in their future releases. Check-out our post: ClassicPress: Alternative to WordPress without Gutenberg & React.jsSpeed-up WordPress
As WordPress has become so big; more than just a blogging platform. Gutenberg, especially, has added some extra loads, codes, files to your site that may slow down your site. This is a detail that you can refer to help you identify the painpoints on your site and address it the latest best practices in the industry.Visual Studio Code Browser Preview
A Visual Code editor that adds a real browser powered by Chrome Headless inside Visual Studio Code. This allows you to preview your work in realtime right inside the code editor and enables features such as in-editor debugging.Bundlesize
A modern WordPress theme framework based on the MVC pattern. If you’re used to working with a PHP framework like Laravel and Slim, I’m sure you will really appreciate this framework. You can use things like Router and Controller, DI Container, and Middlerware.Lighthouse Bot
A utility tool that allows you to run Lighthouse in a CI service using Docker. It’s a great tool to automate your website performance checkup every time you push a new change to your website code.Learn React App
Learn React App is a resource to learn React.js. But unlike the other resources out there, this should be installed locally in your computer. It not only contains learning materials but it also code and interactive samples. The best part is that you can do it while offline once it is installed.WP Acceptance
WP Acceptance is new a tool that allows you to perform acceptance tests. To put it simply, Acceptance Tests is a series of tests to emulate user behaviour. There are a number of frameworks out there to perform this type of test.
However, if you’re primarily working with WordPress, you’ll appreciate this tool for the ease of use as it is designed and tailored to the typical WordPress projects need.Shiny
ReactLucid is a tool to help you debug React and GraphQL applications in a more interactive way. It allows you to see the component hierarchy, state/props changes within your React application as well as the GraphQL schema, queries, and mutations in real-time.CSS Features Toggle
A Chrome extension that allows you to disable certain CSS features in Chrome. With this, you can see how your website will render and behave when certain features do not exist. Quite useful to help you implement new CSS features that may not be implemented in all the browsers.Blendy
A tool that can help you customize CSS background blend modes with your image. You can preview blend modes, change colors, and apply gradients. You can use images from Unsplash or upload it from the computer.React Elemental
A collection of React elements that work right out of the box. No external CSS to import or customize configurations to add on Webpack. It comes with essential components like the Button, Checkbox, SelectList,