Changes

With this release, we’re starting the process of unifying all our apps (Page Builder, Headless CMS, etc.) under a single product, the Webiny Serverless CMS :rocket:.

This release focuses on the frontend (React) side of things, and is aimed at simplifying the setup of the entire Admin app for the Webiny Serverless CMS. Read on to learn more details.

Admin App

Simplify Admin App Setup (#2165)

This refactor is an absolute flagship of this release! Up until now, Webiny Admin app consisted of a lot of boilerplate located in your project. There were lots of files, importing lots of plugins, the entire app setup was right there in your project, and you could easily break things (unwillingly), and even worse, it was very difficult for us, the core team, to release upgrades.

We’ve introduced a new package, called @webiny/app-serverless-cms, and from now on, this will be the only package you’ll need to interact with (for the most part). The entire Admin app is configured using this new package, and all the utilities and plugins to extend Webiny are accessible via this package.

This is what a setup of the entire Webiny Admin app looks like now:

Learn more in the documentation article.

A New Underlying React Framework (#2165)

With the Admin app setup overhaul comes a new underlying framework, which focuses on using native React concepts, exclusively. A few years ago, when Webiny just started, some tools and techniques we know and love today, were not available (like React Context and hooks). This resulted in looking for workarounds, like a global plugins registry. Sure, it worked, and still works. But we want Webiny to use the latest tools, as much as possible. We also want to make it really easy to extend Webiny with as less code as possible. And what’s better, than using just plain React components to hook into everything?!

Learn more about the framework in the documentation.

New Plugins (#2165)

A new framework means a new way of using plugins. Plugins are now plain React components. No more global registry with POJOs.

Your old plugins still work, and will continue to work until we provide a replacement for each one of them in form of a React component.

To kick things off, we’ve implemented a couple of the most fundamental and commonly used plugins, like AddMenu, AddRoute, AddLogo, and a few others. Naming conventions make things easier to discover, and you don’t need to worry about the Typescript types, because now everything is provided to you via dedicated React components.

Headless CMS

Added GraphQL Required Input (#2144)

We added the non-null input mark (!) for the fields which have required validators set.

Development

PubSub Events Now Support Custom Event Types

As we’re migrating our apps to use the recently introduced publish/subscribe mechanism, for hooking into the business logic in the GraphQL API, we noticed that it lacks the ability to extend the types of the event payloads. The subscribe method now accepts a generic type, which you can use to extend the default event payload type.

A good example of this can be found in our Extend Page Settings article.

Added Webiny Version Header to GraphQL Response (#2143)

We added the Webiny version header to every GraphQL response. By default, header is not added. To add it into the output, read our article about environment variables.

Stop the Deploy Process on Errors in Deploy Hooks (#2161)

Prior to this PR, if one of the deploy hooks threw an error, the deploy process would not be stopped, which is incorrect. This PR ensures that any error encountered in the deploy process, including hooks, will stop the whole deploy process.

Visual Improvements

Some views received a bit of love, and now look visually more appealing. This is primarily related to the settings views, where the content was stretched to fill the width of the screen. Now it’s limited to 700px by default, and makes the form look a lot better. The user account form was also slightly improved. See some examples in the screenshots below.

Page Builder - Website Settings

(click to enlarge)

Form Builder - reCaptcha Settings

(click to enlarge)

Account Settings

(click to enlarge)