Core Framework
HomeChangelogDashboard
  • 📖Introduction
    • 📝 Overview of Core Framework
    • 💁🏼‍♂️ Target Audience
    • 🔍 Navigation of the Documentation
  • 🚀Getting Started
    • Getting Started with Web App and WordPress
    • Initial Setup and Configuration
    • Video tutorial: First-time setup walkthrough
    • OxyNinja Users
  • 🧩Builder Integrations
    • Overview
    • Oxygen Builder
    • Bricks Builder
    • Gutenberg
  • Figma
    • Getting Started with Figma
    • Create and Manage Variables
    • Editing Elements
  • 💻Navigating the UI
    • Color System
    • Typography
    • Spacing
    • Components
    • Utility Classes & Vars
    • Breakpoints
    • Manage project
    • Remote Import
    • Preferences
  • 📒How to Use
    • Dark Mode
    • Grid System
    • Filters
  • 🎯Marketplace
    • Buying Products
    • Become an Author
    • Author Guidelines
  • 👕Official UI Kits
    • Blocks
    • CoreKit
    • Violet
    • WooCore
    • Style Guide
    • OxyNinja Icons
  • Official Templates
    • Agency
    • Real Estate
  • 🔨Troubleshooting
    • Common Problems
    • FAQ
  • 📖Changelog
    • Changelog
    • Feature Requests
  • Development
    • CoreFramework\Helper
Powered by GitBook
On this page
  • Video Showcase
  • Features of the Gutenberg Integration Addon
  1. Builder Integrations

Gutenberg

Utilizing Core Framework alongside Gutenberg? This guide delves into the specifics of the Gutenberg Integration addon, a tool designed to augment your WordPress development experience.

PreviousBricks BuilderNextGetting Started with Figma

Last updated 6 months ago

Core Framework's capabilities are now effortlessly extended to the Gutenberg editor through this addon, which is included in the free version of Core Framework. Activation of this addon introduces a new widget to the Gutenberg editor, equipped with a potent live search function and visual previews on hover. This integration makes all classes and colors from Core Framework readily accessible, enabling you to edit pages with enhanced efficiency and creativity.

Video Showcase

Features of the Gutenberg Integration Addon

This addon stands as a cornerstone of Core Framework, offering a suite of features designed to make your development workflow within Gutenberg not only more streamlined but also more intuitive. Among its key features are:

  • Core Framework Widget: This widget seamlessly imports all classes from Core Framework, ensuring they are immediately available for use.

  • Live Class Search: Utilize the search function to quickly find the classes you need, significantly speeding up your workflow.

  • Visual Preview: Gain instant visual feedback by hovering over classes and variables, facilitating rapid and informed design decisions.

The Value of Gutenberg Integration

Incorporating the Gutenberg Integration addon into your development toolkit is strongly advised due to its numerous benefits, which significantly enhance the development process:

  • Instant Style Visualization: Eliminate the need for front-end refreshes to see style changes. This addon enables direct visualization of all styles within Gutenberg.

  • Real-Time Element Updates: Preview the impact of classes and colors on your elements in real time, ensuring that design choices can be made with confidence before application.

  • Effortless Application: The need to manually type out classes for elements is removed. Simply click to apply your desired styles.

  • In-Editor Theme Toggling: Switch between dark and light themes directly within the Gutenberg editor, offering a streamlined workflow that circumvents the need to adjust settings in the Core Framework interface.

By integrating Core Framework with Gutenberg through this addon, developers are equipped with an enhanced set of tools that not only simplify the design process but also open up new avenues for creative and efficient webpage construction.

This addon is available at

https://coreframework.com/marketplace/gutenberg-addon
🧩
Gutenberg Integration Addon Showcase
The Widget Showing the Core Framework Colors and Class System in Gutenberg
Page cover image