Reusable Layouts

warning

Do not copy entire demo pages as a long-term strategy. Extract reusable sections and align them with your tokens/presets to prevent drift.

Reusable Layouts Explained

Reusable asset	What it is	Where it often lives
Block pattern/section	Reusable block layout	Block editor patterns
Element	Conditional header/hook/layout	GP Premium Elements
Media assets	Images/icons used by templates	wp-content/uploads/
Template cache files	Import-related artifacts	wp-content/uploads/generatepress/ (often)

Why It Matters

• Reuse reduces build time and prevents inconsistent pages.
• Components can be versioned and documented.
• A component library helps teams collaborate.

How It Works

You identify a repeated layout, extract it into a reusable section (pattern/element), and align it with global tokens/presets.

flowchart LR
  DEMO[Imported demo pages] --> EXTRACT[Extract section]
  EXTRACT --> LIB[Component library]
  LIB --> REUSE[Reuse across pages]

Practical Walkthrough

Step 1: Inspect GeneratePress Upload Artifacts (If Present)

inspect-generatepress-uploads.sh

cd /var/www/html
ls -lah wp-content/uploads/generatepress 2>/dev/null | head -n 80 || true

Step 2: Inventory Elements (If Used)

inventory-elements.sh

cd /var/www/html
wp post list --post_type=gp_elements --fields=ID,post_title,post_status --format=table 2>/dev/null || true

Step 3: Identify Reusable Page Sections (Content Audit)

list-pages-for-audit.sh

cd /var/www/html
wp post list --post_type=page --fields=ID,post_title,post_status --format=table | head -n 40

Step 4: List Reusable Blocks (If Used)

Reusable blocks/pattern content may be stored as the wp_block post type.

list-reusable-blocks.sh

cd /var/www/html
wp post list --post_type=wp_block --fields=ID,post_title,post_status --format=table 2>/dev/null | head -n 40 || true

Practical Examples

Example 1: Extract a Hero Section

Turn a page-specific hero into:

• A Block Element (if conditional)
• A pattern (if reused across pages)

Example 2: Extract a CTA Footer

Create one CTA section and reuse it across:

• Services pages
• Blog posts
• Landing pages

Example 3: Component Naming Convention

Type	Example name
Pattern	Section: Pricing CTA
Block element	Block: Home hero
Hook element	Hook: Top notice
Layout element	Layout: Landing no sidebar

Example 4: Turn a One-Off Section into a Reusable Block

Workflow:

1. Copy the section into a reusable block/pattern.
2. Remove inline styles and replace with tokens/presets.
3. Reuse it on two pages.

Best Practices

Practice	Why
Standardize names and intent	Faster audits
Reuse presets/tokens	Prevents drift
Keep components small	Easier performance control
Document where components are used	Prevents accidental deletes
Prefer reuse over duplication	Prevents drift
Keep a component index	Helps teams find the right section
Make one "source" component	Prevents multiple near-duplicates

Troubleshooting

Symptom	Cause	Fix
Component shows in wrong place	Rule mismatch	Tighten display rules and re-test
Reused section looks different	Local overrides	Reset per-page overrides and use presets
Assets missing	Media not imported	Re-import media or relink assets
Reusable block not found	Post type disabled	Confirm wp_block exists and you have permissions

Hands-On

1. Pick one repeated section from an imported template.
2. Extract it into a reusable pattern or element.
3. Reuse it on two pages and confirm output is identical.
4. List reusable blocks with WP-CLI and export an inventory for your runbook.
5. Document where the component is used (URLs or page IDs).

Quick Reference

reusable-layouts-cheatsheet.sh

cd /var/www/html
ls -lah wp-content/uploads/generatepress 2>/dev/null | head
wp post list --post_type=page --fields=ID,post_title,post_status --format=table | head

What's Next

• Next: Brand Consistency
• Related: Global Styles & Presets