Release: Cogio Card Blocks V1.0.0

Release date: 22 July 2026

This is the first stable release of Cogio Card Blocks, providing flexible Gutenberg blocks for creating responsive grids of fully clickable cards.

The release promotes the tested v0.0.10 development version to v1.0.0.

Added

  • Added the Cogio Card Grid block for displaying cards in responsive grid layouts.
  • Added the Cogio Card block for creating individual fully clickable cards.
  • Added support for configuring the number of grid columns displayed on desktop, tablet and mobile devices.
  • Added adjustable spacing between cards.
  • Added an Equal height cards option.
  • Added front-end height matching so all cards within a grid can match the height of the tallest card, including cards displayed across multiple rows.
  • Added support for card background colours, text colours, spacing and shadows using Gutenberg controls.
  • Added configurable card border controls:
    • Border width.
    • Border style.
    • Border colour.
    • Border radius.
  • Added a link URL field for each card.
  • Added an option to open card links in a new browser tab.
  • Added an optional accessible link label.
  • Added an image field directly within the card editor.
  • Added controls for replacing and removing card images from within the card.
  • Added support for retrieving image alternative text from the WordPress Media Library.
  • Added two image display modes:
    • Image, for traditional full-width card images.
    • Icon, for smaller graphics, logos and icons.
  • Added selectable WordPress image sizes:
    • Thumbnail.
    • Medium.
    • Large.
    • Full.
  • Added image aspect ratio controls:
    • Auto.
    • Square.
    • 4:3.
    • 16:9.
    • 21:9.
  • Added Cover and Contain image fitting options.
  • Added image positioning controls:
    • Centre.
    • Top.
    • Bottom.
    • Left.
    • Right.
  • Added adjustable icon sizing.
  • Added left, centre and right icon alignment.
  • Added editable card headings and body text directly within the block.
  • Added heading level selection from H2 to H6.
  • Added bold and italic formatting for card headings and body text.
  • Added independent left, centre and right alignment controls for headings and body text.
  • Added editable Call To Action text directly within each card.
  • Added left, centre and right Call To Action alignment.
  • Added optional Call To Action icons:
    • No icon.
    • Rightwards arrow.
    • Chevron.
    • Long rightwards arrow.
    • Heavy wide-headed rightwards arrow.
    • Heavy rightwards arrow.
  • Added card hover effects:
    • None.
    • Lift.
    • Shadow.
    • Lift and shadow.
    • Image zoom.
    • Border highlight.
    • Background tint.
  • Added keyboard focus styling for linked cards.
  • Added reduced-motion support for users who prefer reduced animation.

Changed

  • Card headings now use semantic H2–H6 HTML elements rather than generic span elements.
  • The card content wrapper now uses valid block-level HTML to support semantic heading elements.
  • Image selection, replacement and removal controls are displayed directly within the card editor rather than only in the block settings sidebar.
  • Call To Action text is edited directly within the card rather than through the block settings sidebar.
  • Heading, body and Call To Action alignment controls are available through the Gutenberg block toolbar.
  • Image and icon display settings remain in the block settings sidebar.
  • Equal-height cards now match the tallest card across the entire grid rather than matching only cards within the same row.
  • Card sizing accounts for Gutenberg padding without overflowing the Card Grid block.
  • Icon image wrappers use border-box sizing to prevent padding from causing horizontal overflow.
  • The Border highlight hover effect displays outside the existing card border.
  • Image alternative text is drawn from the corresponding Media Library attachment instead of being stored separately within each card.

Usage

Add a Cogio Card Grid block to a page or post using the WordPress block editor.

The grid initially contains three Cogio Card blocks. Additional cards can be added using the block appender.

Select the Card Grid block to configure:

  • Desktop columns.
  • Tablet columns.
  • Mobile columns.
  • Gap between cards.
  • Equal-height behaviour.
  • Grid alignment and spacing.

Select an individual Cogio Card to configure:

  • Card link.
  • Link target.
  • Accessible label.
  • Heading type.
  • Image display settings.
  • Call To Action icon.
  • Card border.
  • Hover effect.
  • Colours, spacing and shadow.

The card image, heading, body text and Call To Action text can be edited directly within the card.

Use Image mode for traditional full-width images that may need cropping, aspect-ratio control or focal positioning.

Use Icon mode for smaller images, icons and logos that should retain their proportions and be positioned independently within the card.

Notes

Each Cogio Card is rendered as a single link when a Link URL is supplied. The heading, body text and Call To Action are therefore part of the same clickable card and should not contain separate links or interactive controls.

The selected heading level should follow the heading structure of the surrounding page. For example, cards placed beneath a section heading using H2 would normally use H3 headings.

Image alternative text is taken from the image’s current WordPress Media Library entry. Updating the alternative text in the Media Library will update its front-end use without requiring the card to be edited.

The Equal height cards option uses a small front-end script to measure the tallest card in each grid. Heights are recalculated when the browser window changes size and when card images finish loading.

The card layout remains responsive, with separate column settings available for desktop, tablet and mobile displays.