Skip to content

card.md

Latest commit

 

History

History
124 lines (99 loc) · 5.91 KB

card.md

File metadata and controls

124 lines (99 loc) · 5.91 KB
Raw

Card

Display content in a card container with an optional heading.

Block Metadata

Property Value
Name prc-block/card
Title Card
Category design
Version 1.0.0
API 3
Textdomain card
Example Yes (heading + inner core/paragraph — inserter preview)

Attributes

Attribute Type Default Source Description
heading string -- html (selector: .prc-card__heading) The card heading text displayed above the content area.
headingBackgroundColor string -- -- Preset color slug for the heading background. If unset, falls back to ui-stable-black.
customHeadingBackgroundColor string -- -- Custom hex color for the heading background.
headingTextColor string -- -- Preset color slug for the heading text. If unset, falls back to ui-stable-white.
customHeadingTextColor string -- -- Custom hex color for the heading text.

Supports

Feature Enabled Notes
Anchor Yes
HTML editing No
Color: background Yes
Color: text Yes
Spacing: blockGap Yes Controls gap between items in the content area
Spacing: margin Yes Skip serialization; applied manually
Spacing: padding Yes Skip serialization; applied to content area
Typography: fontSize Yes
Typography: fontFamily Yes
Position: sticky Yes Card can be made sticky

Context

Context Description
postId Current post ID.
postType Current post type.

Inner Blocks

This is a container block. Any blocks can be placed inside the card's content area. No template or restrictions are defined -- the inner blocks area is fully open.

Usage Instructions

  1. Insert the Card block.
  2. Type a heading in the heading area (rendered as <h2>). The heading is styled as uppercase, small text with a colored background.
  3. Add any content blocks inside the card content area below the heading.
  4. Customize the heading colors using the sidebar color controls (heading text color and heading background color). By default, the heading uses ui-stable-black background and ui-stable-white text from the design system theme presets.
  5. Adjust padding and margin as needed -- padding applies to the content area, margin to the outer wrapper.
  6. The card supports sticky positioning for sidebar use cases.

Block Markup Example

<div
	class="wp-block-prc-block-card"
	style="--custom-heading-background-color: #000; --custom-heading-text-color: #fff;"
>
	<h2 class="prc-card__heading">CARD HEADING</h2>
	<div
		class="prc-card__content"
		style="padding-left: 1em; padding-right: 1em; --card-gap: 0.5em;"
	>
		<p>Card content goes here.</p>
	</div>
</div>

PHP Rendering

The render_block_callback in class-card.php:

  1. Generates CSS custom properties for heading colors (--custom-heading-text-color, --custom-heading-background-color) from the custom color attributes.
  2. Applies these as inline styles on the root element using WP_HTML_Tag_Processor.

Empty Card Hiding

The class registers a late-priority render_block filter (hide_empty_card, priority 100) that checks if the .prc-card__content div is empty. If it contains no content, the entire card is hidden (returns empty string). This runs after all inner blocks have rendered.

Styles

.wp-block-prc-block-card {
	--card-gap-default: 0.5em;
}
.prc-card__heading {
	margin: 0;
	padding: 0.525em 1em;
	font-size: 0.825em;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.28571429em;
	text-transform: uppercase;
	background-color: var(
		--custom-heading-background-color,
		var(--wp--preset--color--ui-stable-black)
	);
	color: var(
		--custom-heading-text-color,
		var(--wp--preset--color--ui-stable-white)
	);
}
.prc-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--card-gap, var(--card-gap-default));
}

The heading has a distinctive "baseball card" style: uppercase, small font size, wide letter spacing, and a colored background strip. The content area uses flexbox column layout with configurable gap.

Related Blocks

This block is standalone. It is commonly used in sidebars and content layouts to group related information.