CC Child Pages Pro Gutenberg Block Guide

The CC Child Pages Pro Gutenberg block builds on the free version’s block to offer enhanced styling and filtering controls.

It extends the standard CC Child Pages visual interface to add advanced options such as Skins and Customisation, directly in the block sidebar.

This guide assumes that you already have the free CC Child Pages plugin installed and active, as the Pro version extends its functionality.

Overview

Last updated: 8th November 2025 for CC Child Pages Pro version 1.0.0

The block functions as a dynamic front-end for the shortcode.
When you insert the CC Child Pages block into a post or page, you can control all display settings using the sidebar options — with live visual feedback.

📸 Screenshot placeholder: Gutenberg editor showing CC Child Pages Pro block sidebar with new Pro options.

New Features in the Pro Block

1. Advanced Display Skins

Pro introduces multiple new visual skins beyond the Simple and Cards options found in the free version.

Available skins include:

  • Cover Background – Uses each page’s featured image as a full-width or full-column background with overlaid titles and excerpts for a bold, visual effect.
  • Corporate Cards – A clean, professional card layout with balanced spacing and subtle hover effects, ideal for business or portfolio sites.
  • Glass Tiles – A light, modern design with translucent panels and soft borders for a sleek, contemporary look.
  • Spotlight Lead – Highlights the first child page more prominently to create a visual hierarchy, perfect for featured or important content.

📸 Screenshot placeholder: grid comparison showing “simple”, “cards”, and “overlay” skins.

These can be selected from the Skin drop-down in the block sidebar. Changing skins updates the preview immediately.

2. Skin Customisation

CC Child Pages Pro adds options for customising the standard and pro skins via the familiar Gutenberg block interface. Customisation options available for the chosen skin will be shown under the Skins section of the block editor.

Here is an overview of the customisation options added (please note that not all of these options will be shown for all skins).

Layout

  • Card corner radius
    Corner radius for cards/tiles.
  • Gap
    Gap between tiles in grid layouts.
  • Card minimum width
    Minimum width for tiles within responsive grids (useful for masonry-like wrapping).

Colours

(All of these are optional strings; when set they override the default behaviour of the skin.)

  • Background colour
    Background colour for cards/tiles.
  • Title colour
    Colour for item titles.
  • Meta colour
    Colour for meta text (e.g. dates/auxiliary lines a skin might show).
  • Excerpt colour
    Colour for excerpt/description text.
  • Link colour
    Colour for links / “Read more” anchors within skins.
  • Sub-pages border colour
    Border colour for the sub-pages section (if shown).

Spotlight (skin-specific)

  • Span (number, default: 2)
    Number of grid columns the lead/first item spans in the Spotlight Lead skin.

Notes on behaviour

  • These are additive attributes layered onto the existing CC Child Pages block; they don’t change the free block’s attribute names.

📸 Screenshot placeholder: visual demonstration of “zoom” and “lift” hover effects.

3. Live Preview with Pro Enhancements

The block provides a live preview that reflects all Pro settings, including skins, customisation options, and query changes, ensuring you can fine-tune your layout visually before publishing.

📸 Screenshot placeholder: editor preview showing block with hover effect applied.

4. Legacy CSS Toggle

As with the free version, you can enable Use Legacy CSS if your theme’s styling conflicts with the modern CSS grid and variable-based design system. Some skins (such as the Spotlight Lead) will ignore this setting to load their own modern CSS styling.

When enabled, the block switches to the classic stylesheet used by earlier plugin versions.

📸 Screenshot placeholder: toggle for Use Legacy CSS in sidebar.

⚙️ Sidebar Option Summary (Pro Enhancements)

Option

Description

Skin

Choose from Cover Background, Corporate, Glass or Spotlight Lead (in addition to the skins provided in the free plugin).

Skin Customisation

Customise skin output using customisation options, including: Card corner radius, Gap, Card minimum width, Span (Spotlight Lead skin only), Background colour, Title colour, Meta colour, Excerpt colour, Link colour and Sub-pages border colour.

All standard options from the free block (e.g. number of columns, show/hide title or excerpt, link controls) remain available.
See the Free Block Guide for the full base feature list.

💡 Tips for Best Results

  • Choose a skin, then customise its options to work with your layout.
  • The Simple skin can become a good basis for creating your own layout when combined with customisation options.
  • Keep Use Legacy CSS disabled for modern themes unless styling conflicts occur.

📸 Screenshot placeholder: front-end example showing overlay + zoom combination.

Hooks and Filters

Developers can extend the Pro block’s behaviour using WordPress filters and actions.
See CC Child Pages Pro Hooks Reference for details.

Summary

  • Enhanced visual styling with advanced skins.
  • Enhanced control with skin customisation options.
  • Real-time visual feedback for all settings.
  • Compatible with the free plugin and existing shortcodes.

📸 Screenshot placeholder: comparison of free and Pro block interfaces.