What’s New in Strapi — Keyboard Shortcuts, React Renderer, and GitLab Support

Introducing keyboard shortcuts, Strapi Blocks React Renderer, GitLab support in Strapi Cloud, 16 bug fixes, and 7 new plugins in Strapi Market.

Strapi
Strapi
5 min readDec 6, 2023

--

We’re pleased to announce our latest update, which brings several enhancements to improve your experience with our platform. A key addition is the introduction of keyboard shortcuts for content blocks, streamlining your content creation process by making it quicker and easier to perform common actions.

We’re also introducing the Strapi Blocks React Renderer for better integration with React frontends. Plus, our new GitLab support for Strapi Cloud offers a more efficient development process.

Since our last update, we’ve made five enhancements and fixed 16 bugs to enhance system functionality. Additionally, we’ve added seven new plugins to the Strapi Market, expanding the capabilities of your Strapi projects.

Explore these updates and see how they can enhance your digital content management.

Introducing Keyboard Shortcuts for Content Blocks

Strapi Keyboard Shortcuts

We are excited to introduce a suite of keyboard shortcuts. Modeled after some of the most user-friendly interfaces, these shortcuts will expedite your content creation process, making it faster and more efficient than ever before. Now, common actions can be performed with just a quick key press, allowing you to focus more on your content and less on navigating through menus. Whether you’re looking to bold text or insert a link, it’s all just a keyboard shortcut away!

Here are some of the new shortcuts available:

  • (Ctrl, Command) + B to bold text
  • (Ctrl, Command) + I to italicize text
  • (Ctrl, Command) + U to underline text
  • (Ctrl, Command) + V to paste a link into a text selection

Content Blocks React Renderer

Strapi introduced its new rich text editor called Content Blocks. It’s now easy to integrate with a React frontend through the Strapi Blocks React Renderer. This advancement allows for streamlined rendering of content from Strapi’s Blocks editor directly within React applications. The installation process is straightforward, requiring the addition of @strapi/blocks-react-renderer along with React and react-dom through yarn or npm commands.

Once installed, developers can utilize the BlocksRenderer component to render data from a blocks attribute. This involves passing an array of blocks obtained from the Strapi API to the content prop of the BlocksRenderer component.

Additionally, the renderer supports custom components for both blocks and modifiers. Developers have the flexibility to provide their own React components, which will be integrated with the default components. This feature enables customization of full-width elements (blocks) and inline elements (modifiers) to enhance the appearance and functionality of the rendered content.

GitLab Support for Strapi Cloud

We’re pleased to share with you our latest update: you can now connect Strapi Cloud to your GitLab repository. This new feature brings together the best of both worlds — the ease of a managed infrastructure with Strapi Cloud and the robust version control and CI/CD capabilities of GitLab. Whether you’re working on a small project or a large-scale application, this integration makes your development process smoother and more efficient. Now, managing your digital content is easier than ever, giving you more time to focus on creating great experiences for your users. Try out this new integration and see how it streamlines your workflow.

💅 5 Enhancements Since v4.15.0

Since the release of version 4.15.0, Strapi has introduced version 4.15.5 with a series of enhancements to improve user experience and system functionality. Key enhancements include adding keyboard shortcuts for modifiers in blocks, allowing the passing of HTTP serverOptions from the config, and updating attribute picker spacings. The admin interface saw significant improvements, such as the introduction of a watch-admin flag and the conversion of various components to TypeScript. These developments highlight Strapi’s ongoing commitment to evolving its content management system for enhanced efficiency and user-friendliness.

For all enhancements, see the release notes ->

🔥 16 Bug Fixes Since v4.15.0

Strapi’s journey from version 4.15.0 to 4.15.5 has been marked by a strong focus on resolving bugs, with a total of 16 bug fixes aimed at bolstering the platform’s stability and performance. Notable fixes include enhancements in the handling of file paths, UI improvements in the admin panel, and optimizations in the TypeScript build process. These rectifications address issues ranging from admin build errors to protecting undefined values in SelectComponents, and from resolving media library cache issues to ensuring GraphQL accurately validates component attributes. This diligent effort in bug fixing, led by developers such as @joshuaellis, @alexandrebodin, @lucasboilly, @innerdvations, @christiancp100, @thanos982 and @remidej, underscores Strapi’s dedication to providing a robust and dependable content management experience.

For all bug fixes, see the release notes ->

🧩 7 New Plugins Since v4.15.0

We’re excited to announce a significant update to the Strapi Market with seven innovative plugins since our last version release. These new additions are designed to enhance the functionality and flexibility of your Strapi projects.

1. Firebase Authentication: This plugin integrates Firebase Authentication with Strapi, allowing for the streamlined management and authentication of Firebase users. It creates a Strapi user account upon authentication and syncs user data between Firebase and Strapi.

2. CKEditor 5 Video: An “unofficial” plugin, this integrates CKEditor 5 into Strapi projects, enabling users to insert videos directly from the Media Library. It supports responsive images and is compatible with Strapi’s theme switching and internationalization features.

3. Import Export Entries: Designed to simplify data handling, this plugin enables easy import and export of data in Strapi. It supports various content types and provides role-based control over data import and export functionalities.

4. Email Designer: This plugin allows you to create custom email templates within the Strapi admin panel. It includes a visual composer and supports the templating language, offering a flexible way to design emails.

5. Wolt Blurhash: Utilizing the Blurhash algorithm, this plugin generates compact image placeholders for media assets in Strapi, enhancing the user experience with faster loading times.

6. Tagsinput: A simple yet effective plugin, Tagsinput adds a custom field to your Strapi admin panel for tagging posts, streamlining content categorization.

7. Prometheus: The “strapi-prometheus” plugin is a middleware that integrates Prometheus metrics into Strapi, providing a range of metrics for API calls, Apollo GraphQL, and more. It’s an essential tool for monitoring and optimizing your Strapi applications.

Each of these plugins brings unique capabilities to Strapi, making it not just a headless CMS, but a robust platform for managing digital content and enhancing user experience. Stay tuned for more updates as we continue to expand and improve the Strapi Market! 🌟

Start Using Strapi’s Latest Features

We’re excited for you to try out these new additions and improvements in our latest update. From the handy keyboard shortcuts to the versatile React Renderer and the convenient GitLab integration for Strapi Cloud, we believe these features will significantly enhance your development workflow.

Don’t miss out on experiencing these updates yourself. For a smooth transition, remember to back up your data before upgrading. Check out our simple upgrade guide to get started.

If you’re new to Strapi, get the latest version by running the following command:

npx create-strapi-app@latest my-project

We’re eager to hear your feedback on these new features. Dive in, explore, and happy coding!

--

--

Strapi
Strapi

The open source Headless CMS Front-End Developers love.