C9 Blocks

Description

COVERT NINE‘s C9 Blocks plugin provides 10 new Gutenberg blocks, plus an interface for creating pages from section templates, or fully-built page templates. Block landing page templates are usable for any purpose but designed to give organizations a head start on creating landing pages with specific purposes for their audience.

The landing page templates are organized in a modal by the “content journey” step (Awareness, Consideration, Conversion) and can be accessed from the feather logo icon in the upper right corner after installing the WordPress plugin.

Plugin can be installed from the WordPress admin via file upload, or by cloning the Github repo. We recommend using a C9 supported theme with the C9 Blocks plugin, but it also works with the Twenty Twenty One, Twenty Twenty and Twenty Nineteen WordPress themes. We recommend using the C9 Starter, C9 Work theme, or C9 Togo theme to see C9 Blocks in action, or signup for the C9 early access list to get all of our premium themes and plugins for free! We currently have four blocks-based themes and four child themes available for early access list subscribers and an exclusive C9 Blocks Animation Plugin to animate any core WordPress blocks or C9 Blocks.

For an overview of each of the blocks, and more up to date documentation, head over to our documentation site

What’s it like editing content with C9?

C9 Blocks Includes the Following Blocks

  • Heading Block
  • Social Share Block
  • Horizontal Tabs Block
  • Vertical Tabs Block
  • Posts Grid Block
  • Post and Page Grid Block
  • Call To Action Block
  • Carousel Block
  • Image Carousel Block
  • Toggles Block
  • Grid Block

Demo Videos

Creating marketing-focused landing pages with C9 Blocks + C9 Starter Theme

How to Create a mobile-friendly and animated Homepage for the Twenty Twenty One WordPress Theme

Designing a new page header using C9 Grid blocks and the Twenty Twenty One WordPress Theme

How to Create a Homepage for the Twenty Twenty WordPress Theme

Building A Netflix Inspired Landing Page with C9 Blocks

Overview & Documentation

Get an overview of each of the blocks and the latest documentation by heading over to our documentation site.

C9 Starter WordPress Theme

The C9 Starter Theme is a responsive and minimal, CSS Grid-based, Bootstrap 4 theme that utilizes most of Bootstrap’s components and works seamlessly with C9 Blocks and the Gutenberg block editor. It’s based on Understrap, but with an innovative approach to using Gutenberg’s editing system.

If you’re an agency working on behalf of a client and want to build your own style guide and/or themes on top of the C9 Starter Theme, included is a client boilerplate folder and full child theme support. Join the C9 early access list with a simple email signup to get four example themes along with all of our other WordPress tools emailed to you with tips on how to build your own block-based WordPress websites.

C9 Blocks Animation with Greensock (GSAP)

C9 Blocks has an addon called C9 Animation that comes with our C9 Early access list when you sign up. Unlock the power of buttery-smooth animations that run cross-browser and cross-device, all from within the visual block editor.

C9 Blocks Animation Plugin

Blocks-powered WordPress Themes

Follow Along

Online Documentation

Support

Get premium paid support: Here

The Blocks Development Guide lives Here

Additional tutorials, C9 Themes, and WordPress content from COVERT NINE Here

Licenses

Resource Licenses:
C9 Images, Icons, + Logos: https://www.covertnine.com/c9-blocks-plugin | GNU GPL v3

Screenshots

  • A look at the COVERT NINE Blocks from the + icon in a Gutenberg editing screen
  • C9 blocks by using the '/' key shortcut and typing 'c9'
  • After clicking the feather icon, the page sections modal pops up.
  • Page Templates in the C9 Blocks modal.
  • Reusable Blocks that you have saved on a site will display and can be previewed with the C9 Blocks modal.
  • Tutorials in the modal to show how to use the blocks plugin and how to build landing pages.

Blocks

This plugin provides 17 blocks.

  • C9 Column Container
  • Column
  • C9 Heading
  • C9 Vertical Tabs
  • C9 Vertical Tab
  • C9 Grid
  • C9 Posts Grid
  • C9 Horizontal Tabs
  • C9 Horizontal Tab
  • C9 Call To Action
  • C9 Image Carousel
  • C9 Social Share
  • C9 Toggles
  • C9 Toggle Item
  • C9 Carousel
  • C9 Carousel Slide
  • C9 Blocks

Installation

  1. Upload the plugin files to the /wp-content/plugins/c9-blocks directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress
  3. Use the Appearance->C9 Blocks screen to see a quick overview for using the plugin, and you can access your Reusable Block Layouts you save at Appearance -> C9 Reusable Blocks.
  4. The C9 Blocks plugin should redirect you to this quick start guide after activation. Blocks can be accessed from the + icon or the feather logo icon in the upper right hand corner form any Gutenberg editing screen

FAQ

Can C9 Blocks be used with any theme?

The current blocks plugin supports the WordPress Twenty Nineteen, WordPress Twenty Twenty, WordPress Twenty Twenty One, C9 Starter, C9 Music, C9 Work, and the C9 Togo WordPress themes.

We’re working to make the plugin work with other themes as well. If you have a page template that supports full-width layouts, then the C9 Blocks plugin should work with most Bootstrap and some non-Bootstrap themes.

Get the C9 Starter Theme
C9 Starter Demo
C9 Work Demo
C9 Music Demo
C9 Togo Demo

Do I need the new block editor to use C9 Blocks?

Yes, you will need to have WordPress 5.9 or later installed to take advantage of C9 Blocks.

Reviews

June 10, 2022 2 replies
Previously the plugin loaded youtube ressources in the background but the developer added an option to disable it so you should be fine in areas where GDPR applies and therefore I changed this review. The plugin itself is a big improvement to the capabilities of the default Gutenberg editor and allows you to rapidly build beautiful pages thanks to lots of useful building blocks.
February 16, 2022
This is pretty much my first web building blocks and it is very easy to get it to work. The CS is very attentive to support any issue. It works well with other layout plugins as well. Still, I wish to be able to customize the font attributes in a more visual method 🙂
January 26, 2021 1 reply
If you've used ClickFunnels, it feels very similar to that. It's extremely intuitive and I don't think I've ran into a project yet where I wasn't able to make it happen strictly with C9 Blocks. It really has all the features the default Gutenburg editor should have. I've been able to rebuild existing client sites other people had made in bulky page builders like Elementor and effectively make the exact same site, but without all the extra bulk slowing it down. 10/10 would recommend.
April 13, 2020
I was looking for some Bootstrap 4 support while prototyping for a client when I stumbled upon this plugin and the C9 Theme, and it's been a revelation. I've made extensive use of this plugin's grid system, to ease responsiveness management inside the Gutenberg editor, which allowed me to focus more on the content. The second best thing this plugin offers is the "reusable blocks" features. This has been quite handy to nail specific responsive section designs my client was looking for, and easily replicate them across several different pages. Being able to place a combination of nested blocks, pre-styled and configured, has been a godsend. The block templates are a bit situational. They follow a specific artistic design, so they might not be applicable to every projects, but it's nice when they do. Support's also been great. So, all in all, I'm pretty satisfied with C9 Blocks.
Read all 4 reviews

Contributors & Developers

“C9 Blocks” is open source software. The following people have contributed to this plugin.

Contributors

“C9 Blocks” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “C9 Blocks” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.6.6

Fixed production build tools that was causing some backend mobile editing issues for some browsers.

1.6.5

Changed default on overlay background blend modes to normal. Package updates for developers. Updated quick start guide.

1.6.4

Changed backend fonts to rems from ems and fixed one subhead size missed.

1.6.3

Changing fonts to rems, and updates to template markup.

1.6.2

Bugfix on some full width C9 Grid blocks.

1.6.1

Bug fix on entry for vertical tabs. Link dialog fix on carousels. Alignment fixes for some blocks in posts. CTA bar font size fix.

1.6.0

Further edits to templates for WordPress 6.1.1 compatibility. Fixed video background bug, updated build tools, updated section + page templates.

1.5.2

Updates for WordPress 6.1. Fixes to horizontal tabs, carousels, lists. Updates to build tools for webpack5. Updating templates and sections.

1.5.1

Fix to some width issues with carousels in backend on some screens.

1.5.0

Updates to Grid blocks for width issues in backend. Added toggle to disable YouTube API from C9 Blocks Side Panel in the editor for GDPR compliance. Better compatibility with core button blocks updates. WordPress 6 compatibility updates. Support added for html in post titles for Post Grid block.

1.4.5

Adjustments to backend editor on saved block layouts, updates to labels for more clarification between reusable vs templates that are not locked. An attempt was made at fixing the BlockPreviews.

1.4.4

Updates for WordPress 5.9. Enhancements to carousel blocks for removing carousel slide items and changing slide order. Updated FAQs and readme.

1.4.3

Updated styles for C9 Grid layouts with mobile column flip enabled so spacing is even on columns stacked.

1.4.2

Added visibility settings for core blocks and c9-blocks for specific devices. Added column reversal toggle for mobile column order sort. Compatible with WordPress 5.8. Working on widget block updates.

1.4.1

Optimized file output.

1.4.0

Bug fixes to toolbar buttons and image carousel block toolbar bug fixes on Firefox.

1.3.9

Bug fix to video backgrounds in backend. Removed linear gradient inline CSS from inner containers.

1.3.8

Big update for WordPress 5.7 compatibility. Updates to carousels, image carousels, tabs, and bug fixes on mobile for some carousel settings.

1.3.7

Fixed broken “covert to blocks” buttons from saved blocks. Fixed layout bug for WooCommerce checkout conflicts. Updated package for icons in WP. Image carousels slides can now be linked. Min-height CSS fix for carousel slide heights.

1.3.6

Bug fix to overflow issues from some drop down menus on toolbar dropdowns like image replacement. Adding icons and more templates to library. Saved blocks width issues. Better mobile previews with grid layouts in admin.

1.3.5

Adjustments for styles to account for Twenty Twenty One WordPress theme to posts grid and some block elements inside of C9 Grid blocks. Updates to wide container alignments in grids on some screen sizes. Horizontal tabs style adjustment for slightly larger mobile devices. New markup for some blocks for new C9 Animations.

1.3.4

Fix bug with buttons on image carousels being behind images on some layouts, fixed 404 error from fonawesome for non C9 theme inclusion.

1.3.3

Adding more carousel transitions. Better full width alignments for carousels. Button color fix on C9 Grid rows.

1.3.2

Fixing bug for carousel arrows being below scalable drag bar.

1.3.1

Fixing bug for video background links from YouTube. Font size fixes for CTA bars, some formatting updates to templates modal.

1.3.0

Updating markup for vertical alignment of C9 Grid column container blocks for WordPress 5.6. Fixed markup interfering with core Social Icons Block.

1.2.9

Fixing backend previews for tablet, updating markup to account for social icon core blocks and WordPress 5.6 markup.

1.2.8

Adjustments to vertical alignemnts for columns in containers, draggable C9 Grid blocks, column widths in backend for WordPress 5.6

1.2.7

Heading toolbar buttons bug fixed.

1.2.6

Backend style updates to keep compliance with WordPress 5.6. Updates to full width alignment on some blocks. React.js updates for some block api components. Toolbar button updates.

1.2.5

Updates to style guide landing page template, hiding post and page blocks from root insertion, maintenance update.

1.2.4

Fixing C9 Grid blocks causing horizontal scrollbar in Chrome on Windows, alignment fixes for C9 Posts Grid container, modal grid icon size adjustments.

1.2.3

Adjustments to templates modal on smaller screens, fixes for some JS errors showing up for some users.

1.2.2

Bug fix for C9 Blocks Animations with video background C9 Grids.

1.2.1

Optimized SVG icons, optimizing frontend file size, modal style updates.

1.2

Added alignwide and alignfull alignments to Carousels and Image Carousels. Added draggable heights for containers in C9 Grids. Several bug fixes to jumpy navigations, preparing plugins for animation settings. Bug fixes to alignments on some blocks. New page templates and section templates!

1.1.3

Fixed issues with new toggles and tabs not displaying appender buttons and some alignfull container issues on some browsers in WordPress 5.5.

1.1.2

Fixed bugs to grid row buttons and icons missing for delete toggle buttons.

1.1.1

Updated backend settings and CSS for WordPress 5.5. Added equal height slide settings for image carousels and carousels. Added WP Query filtering by tags or categories for Post Grids. Usability enhancements for WP 5.5 to make it easier to add content to C9 Grids and carousels. C9 Grids can be used on Posts in addition to Pages. Added better support for IE11.

1.1

Fixed margins on column buttons. Added appender buttons for column grids to make it easier to add content.

1.0.9

Fixed bug on alignwide alignment for containers on some tablet devices.

1.0.8

Compatibility updates for WP 5.4 release to deprecated code. Fixed video background display bug. Better Internet Explorer 11 support.

1.0.7

  • Microsoft Edge browser compatibility updates. Internet explorer 11 compatibility updates for grid alignments.

1.0.6

  • Fixed markup changes for WordPress 5.4 Gutenberg updates
  • Alignwide and alignfull class updates for Posts
  • Bug related to display of embeds and Twitter embeds
  • Single post big header entry meta bug fixes
  • Updates to templates modal
  • Fixing Netflix style page template queries
  • Backend mobile updates

1.0.5

  • Fixed contact template that had unexpected block output
  • Fixed color and image path background image bugs. Thanks Drew + Christian.
  • Fixed admin-style path double /

1.0.4

  • Fixed error message related to colors in backend being exposed to rest API

1.0.3

  • Added font size controls to call to action block
  • Added mobile override settings for background imagery in C9 Grid and C9 Posts Grid Block (Initial beta of the mobile settings)
  • Fixed bugs causing jumpy row buttons on c9-grid block
  • Adjustments to editor spacing of grids and columns to more accurately reflect the frontend display
  • Removed dotted outlines for columns
  • Updated modal design
  • Updates to page templates and section templates
  • Added several new layouts to templates modal
  • Updated bugs for WordPress Twenty Twenty and Twenty Nineteen Themes to remain compatible with the latest version of WordPress 5.3.2
  • Updates to mobile layouts for most templates with background imagery

1.0.2

  • Updated readme files, and fixed bugs related to display of backgrounds on iOS devices.

1.0.1

  • Initial release
  • 10 new blocks
  • 38 section templates
  • 15 full landing page templates
  • First set of online documentation
  • WordPress Twenty Nineteen and Twenty Twenty Support
  • C9 Starter Theme Support