CoBlocks plugin adds over twenty extra blocks to the block editor to creating a more page builder like editing experience.

Add A CoBlock

Once you’ve activated the CoBlocks plugin in Plugins > All the new blocks are adding to the block editor.

To access the blocks within CoBlocks, you click on the + icon of any empty block in a page or post, or at the top left of the editor. Scroll down to the CoBlocks section and click the drop-down menu to open the suite of blocks available.

CoBlocks menu

CoBlocks suite of Blocks

Let’s take a look at each of the blocks available.

Accordion

The Accordion block allows you to add content to your post in attractive expandable/collapsible areas.  This is a great space-saving feature that lets you add a lot of content without creating a long page.

Accordion block

Once the accordion has been added, simply start typing to write the accordion item title, then click Enter to add content.

The accordion block toolbar includes the following options to style your block further. Hovering over the toolbar menu items will display a tooltip for that item.

Accordion toolbar
  1. Display accordion as Open/Closed – accordion item is open by default; this toggle can also be set in the Block sidebar settings.
  2. Change typography – the dropdown offers a number of styling options to typography.
  3. Bold.
  4. Italic.
  5. Link.
  6. More rich text controls dropdown:
    • Inline Code.
    • Inline Image.
    • Strikethrough.
    • Text Color.
    • Uppercase.
  7. More Options:
    • Hide Block Settings.
    • Duplicate.
    • Remove Block.

GIF

A GIF (Graphical Interchange Format) is an animated image format or series of images or soundless video that loops continuously.

GIF block

To search for that perfect gif on Giphy simply start typing in the search bar, select the gif you want and click Enter.

Gist

A Gist is a feature added to GitHub allowing you to share code snippets. With the Gist block, you can now add a GitHub Gist URL.

Gist block

To add a GitHub Gist URL simply start typing in the search bar.

Icon

The Icon block allows you to add a stylized graphic symbol to communicate something more.

Icon block

The Icon block offers a number of styling options. From the Icon block toolbar you can change the Icon alignment. Selecting the More Options icon offers a range of additional stylings.

The Icon block also comes with a number of styling options in the Block sidebar.

Icon styling

Styling options include:

  • Styles – outlined/filled.
  • Icon settings – upload a custom icon or select from the available list; adjust icon size.
  • Link settings – add a URL link.
  • Color settings – select Icon color and Background color.
  • Advanced – additional CSS class(es) can be added to customise your icon.

Share

CoBlocks Share block adds a number of social media sharing icons to your post or page.

Share block

From the Share block toolbar you can change the block alignment from wide width to full page width, as well as align sharing icons within the block.

Selecting the More Options icon offers a range of additional tools.

The Share block also comes with a number of styling options in the Block sidebar.

Share block styling

Styling options include:

  • Styles – select the styling for social icons.
  • Icon settings – select icons to display as well as additional styling.
  • Advanced – additional CSS class(es) and spacing options.

Social Profiles

The Social Profiles block adds icons and links in your post or page, connecting to your active social media profiles.

Social Profile icons

The Social Profile block offers a number of styling options. From the Profile block toolbar you can change the block alignment from wide width to full page width, as well as align sharing icons within the block.

Selecting the More Options icon offers a range of additional tools.

The Social Profiles block also comes with a number of styling options in the Block sidebar.

Social Profile block styling

Alert

You can use the Alert block to display contextual messages, such as Default, Info, Success, Warning, Error.

Alert block

Once installed, write your alert title and alert text in the fields available.

The Alert block offers a number of styling options. From the Alert block toolbar you can change the following:

  • Block alignment from wide width to full page width.
  • Align sharing icons within the block.
  • Bold, italic, and links can also be added.

Selecting the More Options icon offers a range of additional tools.

The Alert block also comes with a number of styling options in the Block sidebar.

Alert block styling

Settings include:

  • Styles – selecting the alert type adjusts the background color based on the style selected, such as:
    • Info
    • Success
    • Warning
    • Error
  • Color settings – select background color and text color.
  • Advanced – additional CSS class(es) can be added to customize your icon.

Author

Adding an Author block with a brief biography helps build credibility and authority.

Author block

Once you have added the Author block to a page or post, enter the following information:

  • Author’s name.
  • Biography of the author.
  • Add a link to the author’s profile.
  • Add an image or gravatar of the author.

Selecting the More Options icon in the Author block toolbar offers a range of tools.

The Author block also comes with a number of styling options in the Block sidebar.

Author block styling

These settings include:

  • Author settings – preset or custom author text size.
  • Color settings – select background color and text color settings.
  • Advanced – here additional CSS class(es) can be added.

Post Carousel

The Post carousel displays posts or an RSS feed as stacked or horizontal cards.

Post carousel

Once added to a post or page, there are a number of styling options available in the Post Carousel block toolbar, as well as the Block sidebar.

Post carousel block styling

These settings include:

  • Styles – select stacked or horizontal.
  • Posts settings – includes option to show date and post content, number of columns and gutter styling.
  • Feed settings – select your blog feed or external feed, display order, category and number of posts to display.
  • Advanced – here additional CSS class(es) can be added.

Click to Tweet

The Click to Tweet block allows you to add a quote for readers to tweet via Twitter.

To add a quote, enter your twitter Username, and add text into the ‘Add a quote to tweet…’ section as shown below:

Click to tweet

The Click to Tweet toolbar offers basic styling such as text alignment and typography.

The Click to Tweet block also comes with a number of styling options in the Block sidebar.

click to tweet block styling

Collage

The Collage block displays images in a beautiful collage gallery.

Collage

Images are added by Uploading from your computer or selecting from the Media Library.

The Collage block also comes with a number of styling options in the Block sidebar.

Collage block styling

These settings include:

  • Styles – display collage style as Default, Tiled, or Layered.
  • Collage settings – control gutter sizing, image lightbox, and captions.
  • Link settings – link images to media file, attachment page, or custom URL.
  • Advanced – here additional CSS class(es) can be added.

Dynamic HR

The Dynamic HR block adds a resizable spacer between other blocks.

Dynamic HR

To adjust the spacer click and drag on the blue dot displayed.

The Dynamic HR block also comes with a number of styling options in the Block sidebar.

Dynamic HR block styling

These settings include:

  • Styles – select from Dot, Line and Fullwidth styles.
  • Dynamic HR settings – add a custom height in pixels.
  • Color settings – select background color.
  • Advanced – here additional CSS class(es) can be added.

Events

With the Events block, easily add a list of events or display events from a public calendar.

Events

Simply enter the following content for your event in the blocks available:

  • Day/Month/Year
  • Event Title
  • Event description
  • Time
  • Location

The Event block also comes with limited styling options in the Block sidebar.

Events block styling

These settings include:

  • Color settings – select text color.
  • Advanced – here additional CSS class(es) can be added.

Features

With the Features block, add up to four columns of small notes for your product or service.

Features block

Once added to a post or page, there are a number of styling options available in the Features block toolbar, as well as the Block sidebar.

Features block styling

The Features block sidebar settings include:

  • Featured settings – adjust color, gutter size, padding, and margin.
  • Color settings – select background color and text color.
  • Advanced – here additional CSS class(es) can be added.

Food & Drinks

With the Food & Drinks block you can quickly create a menu or price list.

Food and drinks block

Simply enter your content in the fields displayed, along with your product title and product description. Click the + Add menu section to add a new menu section.

Once added to a post or page, there are a number of styling options available in the Features block toolbar, as well as the Block sidebar.

Food and drinks block styling

The Food & Drinks block sidebar settings include:

  • Styles – select either grid or list view.
  • Food & Drinks Settings – select number of columns, gutter sizes, image and price display.
  • Advanced – here additional CSS class(es) can be added.

Form

Add a contact form to any page or post with the CoBlocks Form block.

Form block

There are three variations to start with. Once selected, the form fields will populate with very basic settings such as Required toggle on/off.

Hero

A Hero block is a bold introductory area of a page accompanied by a small amount of text and a call to action.

Hero block

To add text, simply click on the block section you would like to edit and start adding your content.

Selecting a block within the Hero displays a menu bar with a number of editing options for that specific block.

There are also styling options in the Block sidebar for each individual block as well as the entire Hero block.

Highlight

The Highlight block allows you to draw attention and emphasize important narrative on your site.

Highlight block

Once added to a post or page, there are a number of styling options available in the Highlight block toolbar, as well as the Block sidebar.

From the sidebar, you can adjust text size in Highlight settings, as well as adding custom background color and text color. Additional CSS class(es) can be also be added in the Advanced section.

Logos & Badges

With Logos & Badges block, add logos, badges, or certifications to build credibility.

Logos and badges

Once added, you are able to upload images or select files from your library.

To edit the block, there is a basic toolbar with wide width and full-width settings. The sidebar block also has three different styling options, as well as Additional CSS class(es) which can be also be added in the Advanced section.

Google Map

The Google Map block, add an address or location to drop a pin on a Google map.

Google map block

Enter the location or address to search for a place or address you would like to pin, and click Apply.

The Google map toolbar offers basic styling that includes wide width or full width.

In the Block sidebar, you can add a Google Maps API key. Updating this API key will set all your maps to use the new key.

Additional CSS classes can be added to the Advanced tab including removing top and bottom spacing.

Masonry

The Masonry block allows you to display multiple images in an organized masonry gallery.

Masonry block

To add images to your masonry gallery, simply drag images, upload new ones or select files from your library.

The Masonry toolbar offers basic styling that includes wide width or full-width display, as well as the option to change block type or style.

Additional CSS classes can be added to the Advanced tab including removing the top and bottom spacing, in the Block sidebar.

Media Card

The Media card is the ideal block to showcase video and images with a unique card overlaid.

Media card block

Click on any text in the media card block to start editing, adding a title, body text as well as uploading media.

Media card block toolbar

The Media card toolbar also has a number of styling options available. Choose to display wide width or full width, arrange media to the left or right of the card, and add a background image.

The Block sidebar has settings to adjust padding, as well as background color settings.

Additional CSS classes can be added to the Advanced tab including removing top and bottom spacing.

Offset Gallery

With the Offset gallery you get to display images in an offset brick pattern gallery.

Offset Gallery block

To add images to your masonry gallery, simply drag images, upload new ones or select files from your library.

The Offset Gallery toolbar offers basic styling that includes wide width or full-width display, as well as the option to change block type or style.

Additional CSS classes can be added to the Advanced tab in the Block sidebar.

Posts

The Posts block display posts or an RSS feed as stacked or horizontal cards.

Posts block

Once added to a post or page, there are a number of styling options available in the Posts block toolbar, as well as the Block sidebar.

Posts block styling

These settings include:

  • Styles – select stacked or horizontal.
  • Posts settings – includes option to show date and post content, number of columns and gutter styling.
  • Feed settings – select your blog feed or external feed, display order, category and number of posts to display.
  • Advanced – here additional CSS class(es) can be added.

Pricing Table

Using a Pricing Table will help your visitors compare products and plans.

Pricing table block

Simply click on the element you want changed to edit the header, currency, pricing and features you want to showcase.

The Pricing Table toolbar offers basic styling that includes rearranging the order of your tables as well as a few typographic editing options.

In the Block sidebar, background color and text color can be edited in Color Settings.

Additional CSS classes can be added to the Advanced tab including removing the top and bottom spacing, in the Block sidebar.

Row

With the Row block, add a structured wrapper for column blocks, then add content blocks you’d like to the columns.

Row block

There are five main variations to start with. Once a variation has been selected, further styling is possible using the Row block toolbar.

  • Change alignment – wide width / full width
  • Change row block layout – here the ratio of each row block can be adjusted
  • Change vertical alignment – align top / align middle / align bottom
  • Add background image
  • Change typography
  • More options – allows additional customization

In the Block sidebar, the following customization tools are also available.

Row block styling
  • Styles – select column width and alignment.
  • Row settings – adjust gutter, padding and margin size.
  • Color settings – select background color and text color.
  • Advanced – add an HTML anchor, additional CSS class(es) as well as mobile stack and spacing adjustments.

Services

With the Services block add up to four columns of services to display.

Services block

To edit, add a title and brief description for each service. Upload an image that represents that service or select one from your Media library.

The Services toolbar offers basic styling such as wide width or full width display options, as well as changing the header level and text alignment.

In the Block sidebar, the following customization tools are also available.

Services block styling
  • Styles – edits the services featured image display.
  • Services settings – set the number of columns required, gutter size and display buttons.
  • Advanced – additional CSS class(es) can be added for further customization.

Shape Divider

Adding a shape divider creates a visually appealing layout.

Shape divider block

In the Block sidebar, the following customization tools are also available.

  • Styles – select the shape style from a number of options.
  • Divider settings – adjust shape height and background height in pixels.
  • Color settings – set shape color and background color.
  • Advanced – additional CSS classes can be added to the Advanced tab including removing top and bottom spacing.