Gutenberg Block Editor Toolkit – EditorsKit vs Gutentor – Gutenberg Blocks – Page Builder for Gutenberg Editor

EditorsKit provides set of page building block options and toolkit for the new WordPress Gutenberg editor. You can now have better control, text formats, styling and workflow by simply utilizing the tools provided by EditorsKit plugin. See for yourself New: Block Styles Manager You can now easily create and manage all of your block styles with the new styles manager. Rich Text Formats EditorsKit also adds the missing text formats for better content creation. The following rich text format are available upon plugin activation: Links with “rel” nofollow and sponsored attribute option Highlighted Text or Heading Colors Highlighted Text Background Color Clear Formatting Options Paragraph Justify Alignment Underline Text Format Superscript Subscript Indent Paragraph, Heading or List Block Uppercase Text Transform Images and Embeds Caption Alignment Nonbreaking Space Abbreviation for acronyms Insert Special Characters Glyphs and Special Characters Insert special characters and symbols on Gutenberg editor at ease. Special characters are categorized and you can use the search field to find specific symbol. Markdown Support Starting EditorsKit 1.6 , you can now use markdowns on Gutenberg editor while typing. Markdowns for *bold*, _italic_ and ~strikethrough~ are available upon plugin activation. Lists of available markdowns are also accessible on the settings menu. Watch it in action Block Visibility Using EditorsKit you will have the following visibility control in order to manage and display better contents. Show or hide Gutenberg blocks on desktop, tablet and mobile devices User logged-in or logged-out state block visibility Custom PHP conditional display logic Show or hide Gutenberg blocks based on Advanced Custom Fields Plugin(ACF) Value Estimated Reading Time Word count is already available on Gutenberg editor. EditorsKit then extend this word count and display estimated count as well. Using roughly 275 word per minute plus additional calculations based on image blocks, you can display better estimated reading time on your posts and pages. Powered by shortcode you can display the Estimated Reading Time on your content by using the code below. [editorskit display="wordcount" before="Reading Time: " after=" min"] before : Text or element you want to display before reading time. after : Text or element you want to display after reading time. tag : default div : Html tag container fallback : set value to ‘true’ to display PHP based wordcount on old posts that are not edited or created through Gutenberg Block Guide Lines EditorsKit features other tool aside from visibility management. With the new Block Guide Lines, you can easily toggle visible guide lines on title and each editor blocks in order to check the element boundaries. This feature will also help your workflow on handling nested blocks. Copy and Paste Selected Blocks Note: This feature is no longer available in the latest versions of EditorsKit because this has been added to Gutenberg. Editorskit Typography Note: This feature is deprecated and no longer available in the latest version. If you want to continue using Editorskit typography, You can download and install the editorskit deprecated typography addon manually from github. Image and Cover Block Styles Comes with selection of styles on Cover and Image Block for custom shapes and layouts such as diagonal, circular and rounder corners; and even add drop shadows. List Block Additional Styles Provides the following additional styling for list block: Checked List Arrow Crossed Connected Starred Dashed None Responsive Text Alignment Easily change text alignment per devices. This will help you provide different alignment view on mobile and tablet devices aside from the existing option for desktop. Full Height Screen Option Easily display selected blocks as full screen layout by toggling “Full Screen Height” option under the advanced panel. You’ll instantly have beautiful hero section by just using core blocks. Toggle Title Visibility Easily hide post, page or any post type’s title on your website in just a click. This will enable you to create full Gutenberg editor’s driven posts and pages without getting “(No Title)” on your admin dashboard. Block Import and Export Export each block or selected blocks and reusable blocks directly on the editor, no need to navigate to separate admin dashboard. Then drag and drop exported JSON file on the editor and it will automatically be transformed into Gutenberg blocks, same goes with reusable blocks. Better Custom CSS Class(es) Huge improvement on Additional CSS Class(es) option! EditorsKit provides better UI with classes suggestions while typing. Powered with custom PHP filter, theme developers can include custom Utility Classes for more customization options. Set Image Block as Featured Image Enable selected image block to be set as featured image easily using the block settings dropdown. Drag and Drop Featured Image Upload Easily upload or change featured image on Gutenberg editor by dragging and dropping image on Featured Image sidebar panel. Code Editor Mode Syntax Highlighter Improve display when on “Code Editor Mode”. Powered by WordPress default CodeMirror library, Code Editor will be displayed with code syntax highlights and you will easily check each elements and if there are any errors on your HTML codes. Media and Text Block Link and Card Layout Option Assign custom link to Image on Media and Text Block. Add custom, media or attachment link easily. You can also set open to new tab, add no follow and/or set link to the whole block. Additionally, you can set Media and Text Block to display as card layout with option to set image on top or bottom. Integrated perfectly with the toolbar layour selection. Add Link to Cover, Group and Column Blocks Assign link to cover, group and column blocks at ease with option to enable link attributes like open to new tab, apply nofollow and/or sponsored rel value. Additionally, you can enable the extra option to apply hover animation. Keyboard Shortcuts EditorsKit adds the missing keyboard shortcuts from Classic Editor. When activated you can use the following shortcuts to easily save time and improve writing workflow. CTRL + ALT + 1 : Heading 1 CTRL + ALT + 2 : Heading 2 CTRL + ALT + 3 : Heading 3 CTRL + ALT + 4 : Heading 4 CTRL + ALT + 5 : Heading 5 CTRL + ALT + 6 : Heading 6 CTRL + ALT + c : Align center CTRL + ALT + r : Align right CTRL + ALT + l : Align left CTRL + ALT + j : Justify CMD + SHIFT + . : Select Parent Block Block Navigator Display “Block Navigator” on block that can contain multiple child blocks. Available on Columns Block and Group Block. UI and User Experience Improvements Improve interface and provide better writing experience. Copy and Paste Custom Gradients Easily copy custom gradient colors to your clipboard and paste them anywhere. You can also select CopyGradients available combinations and easily paste the colors to Cover and Button blocks. Features Manager Enable or disable EditorsKit features using “EditorsKit Settings” menu. This will give you full control over the plugin features and let you disable the features that you don’t need on your website. Theme Supports for Developers EditorsKit is moving towards being developer friendly as well. Starting version 1.5, custom theme_supports were added to provide theme developers option to make Gutenberg block editing experience for their users match the frontend display. Learn more here. Accessible Help, Tips and Tricks Add help, tips and tricks button on the bottom right side of the editor to help users discover several helpful power tips and shortcuts. These tips will definitely improve your workflow and save time navigating the new block editor. ShareABlock block Insert your downloads from shareablock.com easily using this block. Browse through your block patterns and templates then add them to your content in just a click. Helping you with the new Gutenberg Editor EditorsKit is created to help you navigate through the new editor. Each new features will make your page building more convenient and easier. You can help achieving this goal through the community: Join Facebook Community Follow Us on Twitter Contribute on Github Contact and Credits EditorsKit is maintained and developed by Munir Kamal.

Gutentor’s direct family members encompass CosmosWP, a WordPress theme, and the Templateberg plugin, which offers Gutenberg templates. Gutentor | Documentation | Video Tutorials | Gutenberg Templates You might be surprised by all the features onboard at first. but once you get used to them you won’t be able to live without them. It’s time for Gutentor – Page Builder for Gutenberg. Try it now, It’s Free!!! Gutentor is a WordPress Page Building Gutenberg Blocks collections with unlimited possibilities to design a webpage. Building professional elegant websites using the new WordPress editor Gutenberg with very ease and with no absolute codes is what Gutentor is designed for. A page builder experience that brings advanced capabilities and graceful design never seen before on any Page Builder. Work with any theme, create any design. Gutentor extends Gutenberg editor with a large variety of beautiful blocks which can be later switched to build and design your best web pages with some clicks. This makes creating and designing content even more flexible. It minimizes the limitations of any page builder and adds unlimited possibilities so that a user can build any simple to complex WordPress website using the Gutenberg editor. It has been developed with all necessary customization features for blocks to achieve any possible layout and design of web-page content with Gutenberg block editor. Gutentor makes designing any type of web page just as simple as a matter of a few clicks and drag and drop. Gutentor is a lightweight WordPress plugin, it is optimized for performance. Internal or External CSS files for dynamic CSS is introduced for more optimization. What’s new on Gutentor Complete Webpage building blocks with all necessary features Optimized and Faster site load SEO friendly One-click Demo Templates Library for ready-made templates and blocks Faster Designing Experience Extremely simple, without adding rows/columns, just adding blocks is sufficient to make a beautiful website Repeater field to create items inside blocks with drag and drop reorder, edit, delete options Highly customizable row/columns options available for creative designers Advanced options on each block including HTML Tag, Background, Border, Box-shadow, Margin-Padding, Svg shape divider and built-in animations Block Template module on each block, Single block multiple design Template Individual elements full styling options Device specific responsive controls Advanced Typography Options which includes all available google fonts and systems fonts Video background Options Highly Optimized, Performance focused Inline, Internal or External CSS files for dynamic CSS While you use Template Library features of Gutentor, Gutentor fetches screenshots, images and templates(demo) JSON files from Gutentor Demo Library and after your insert template library images link are from the external site. You have to change the images after you import templates and blocks. This helps you to import templates with a single click. You must accept terms and privacy to use Gutentor Template Library Features. What Makes Gutentor Different? Dynamic Columns Advanced Columns Gutentor Elements Gutentor Modules Gutentor Posts Gutentor Terms (New) Gutentor Widgets 100+ ready-made Templates and Blocks to free import Impressive slider and carousel Highly Responsive and SEO friendly JS/CSS Framework only load if block is being used on the post and page Quality support service Technical background for page speed Gutentor just does not help you to create your site more beautiful and quickly but it made your page speed much faster. Here are some technical reasons behind it. Develop keeping in mind for Page Speed. Gutentor creates a single minified CSS file for only used Gutentor blocks in the editor, for normal to advanced landing pages it is less than 50kb, for a simple page design 20kb or even less. Unnecessary resources CSS/JS never loaded on your page. Full control to choose which resources to load or not. Proper utilization of transients API. Dynamic content loading whenever needed. Google fonts load only if it is being used and unique font family/weight with a single request. In build Optimization options on Gutentor Global Options. Compatible with Optimization/Cache Plugins. ADVANCED PAGE BUILDING GUTENBERG BLOCKS INSIDE GUTENTOR Gutentor Blocks are categorized into 5 different types: 1. GUTENTOR ELEMENTS Advanced Text Button Counter Divider Google Map Icon Image Advanced List Pricing Progress Bar Rating Simple Text Video Popup 2. GUTENTOR MODULES Advanced Columns Button Group Carousel Container/Cover Dynamic Columns Slider Accordion Tabs Icon Group Form Wrapper Gallery Filter Quote Table of Contents 3. GUTENTOR POSTS (POST TYPES) Post (Type) Post (Type) Feature Advanced Post (Type) Post (Type) Carousel Post (Type) News Ticker Duplex Post (Type) 4. GUTENTOR TERMS ( CATEGORY AND CUSTOM TAXONOMY ) Term (Category) Term (Category) Feature Term (Category) Carousel 5. GUTENTOR WIDGETS About Widget Accordion Widget Advanced Columns Widget Advanced List Widget Author Profile Widget Post Widget Call to Action Widget Content Widget Countdown Widget Counter Widget Featured Widget Gallery Widget Google Map Widget Icon Widget Image Widget Image Slider Widget Notification Widget Opening Hours Widget Pricing Widget Progress Bar Widget Restaurant Menu Widget Social Links Widget Show More Widget Tabs Widget Team Widget Testimonial Widget Timeline Widget Video Popup Widget Gutentor provides awesome and innovative Gutenberg blocks for enhancing your website at an advanced level. Here are the details of the Gutentor blocks: 1. GUTENTOR ELEMENTS Gutentor elements are conceptualized to use inside the Gutentor Modules but of course, you can use them anywhere on your editor. Gutentor elements are a small unit of Gutenberg blocks with all set of designing options, combining gutentor elements you can move up to the elegant blocks, sections and full page. Advanced Text: Insert text with advanced options. Button: Prompt visitors to take action with attractive buttons. Counter: Insert an animated number to display the counter number. Divider: Visually distinguish sections with divider using SVG shape or border. Google Map: Display a Google Map on your website with Google Map API. Icon: Insert an icon to symbolize the text. Image: Insert an image to create extra value on the content. Advanced List: Represent the paragraphs in tabbed styles. Pricing: Insert the pricing to showcase the price of the product. Progress Bar: Showcase the progress of the work in an animated form. Rating: Insert the rating element to represent the rating from 1-5 stars. Simple Text: Insert text with minimal but sufficient options. Video Popup: Insert video on your website. 2. GUTENTOR MODULES Gutentor modules are designed and developed in such a way that you can construct a more complex structure on your web in a simple way. Technically most of the gutentor modules are composed of gutentor elements or used as a container of gutentor elements. Advanced Columns: Insert advanced columns to create customizable columns within the page. Button Group: Insert button group and add unlimited buttons. Carousel: Insert carousel column and add element inside the columns. Container/Cover: Insert the whole block of a single container on the page. Dynamic Columns: Creating columns on the editor is never been easier before, insert dynamic columns to insert unlimited columns with advanced options. Slider: We present you with the most advanced and awesome Slider. Insert slider with advanced options and add any elements within the slide like text, image, button, video and all gutentor elements. Accordion: Accordion Module lets you design Accordion ( Collapse ) Items and pin any Gutentor Elements on Accordion Body. Accordion Panel ( Heading ) is created with Texts and Icons with various design options. Create beautiful FAQ, Accordion, and collapsible items using Accordion Module. Tabs: Create beautiful and advanced tabs and add any Gutentor Element in the Tab Body. Tab Title is created using Texts and Icons with various design options. You can create both vertical and horizontal tabs. Icon Group: Insert multiple icons in the Icon Group and create beautiful social profile links and icon designs using icons. Form Wrapper: Form Wrapper is specially designed and developed to use Contact Form shortcode. You can design Form Input Field, Text Area and Button according to your need. Gallery: Advanced gallery block which let you add any Gutentor Elements as gallery content. The Module Gallery Block also allows customizing the popup content as image and video. Filter: Filter block has module gallery all features with added primary/secondary filters items and searches filter. Filter block uses Module Gallery block as an inner block. Quote (New): Quote is the collection of elements that create an adorable quote design. Table of Contents (New): Table of Contents(TOC) facilitates to access large contents of post/page including all the headings. We have a plan to develop more gutentor elements and gutentor modules in the coming version. If you have any suggestions feel free to contact us on the Gutentor support forum. 3. GUTENTOR POSTS (POST TYPES) Gutentor posts category is collections of blocks related to WordPress posts and post types. We have developed post blocks in such a way that you can create almost every possible design from post and post types for FREE!!! Perfect to create Blog, News and Magazine Sites Perfect to create WooCommerce Shop, your Online Store Perfect to create Easy Digital Downloads Store Create any Post or Post Type related Design Gutenberg Block in Gutentor Post Post (Type): Display Blog Post with a list and grid view with a different template. Control each small unit of blog-post like feature image, title, excerpt, meta elements with advanced options, sort elements and so on. Post (Type) Feature: – Showcase your Blog Article Post with an attractive design template. Currently, we have 38 unique and lovely templates available with advanced design options. You can create an unlimited number of stunning blog section designs for your site and customize them as per your need. This block module is developed especially for blog, news or magazine sites. Advanced Post (Type): – Advanced Post (Type) is a combination of multiple blocks like Post (Type), Post Header and Post Footer. Post Header is a template combination of Gutentor Simple Text, Term Filter and Navigation. Similarly, Post Footer is a template combination of Gutentor Simple Text, Term Filter, Pagination, Navigation and Load more button. This module is the most advanced block we have ever built, try it out and control each element. Post (Type) Carousel: – Post (Type) Carousel use Post (Type) as an inner block. You have all options of Post (Type) on Post (Type) Carousel with added Advanced Carousel Options. Since we are using the framework Slick Carousel, we have added almost all possible and useful options related to the Slick Carousel. Create a beautiful and unique Post Carousel using our Post (Type) Carousel. Post (Type) News Ticker: – News Ticker is very important for Magazine and News Site. To create a news ticker module on Gutentor, we have developed our own jQuery library AcmeTicker. It includes all major and useful options to create News Ticker unique and beautiful. Duplex Post (Type): – This module allows you to design your post in two different ways – Feature Post and Normal Post. You can use Feature Post design in one way and Normal Post in another way; post design will be more beautiful with this Duplex Post (Type). 4. GUTENTOR TERMS ( CATEGORY AND CUSTOM TAXONOMY ) Term (Category): Similar to Post (Type) block but in Term (Category) you can customize any term with a beautiful design. Term (Category) Feature: – 38 unique and lovely templates to showcase your Category and Term similar to Post (Type) Feature. Very useful to Blog, Magazine and E-commerce sites. Term (Category) Carousel: – Term (Category) Carousel Block use Term (Category) as an inner block. You will find almost every option to customize your Term (Category) Carousel. 5. GUTENTOR WIDGETS Gutentor widgets are independent blocks, a very simple way to create your site section and blocks. The main difference between Gutentor Module and Gutentor Widgets is Gutentor widgets have already predefined elements, you will not be able to add new elements whereas on Gutentor Modules you can/have to add individual Gutentor Elements as you want. Enjoying Gutentor? Join our Facebook Group. Follow us in Twitter @gutentor. Learn from our tutorials on YouTube Videos. Or rate us on WordPress 🙂