Skip to main content

Card Flip

Released in version 1.19.0

The Card Flip block creates a two-sided content card with animated transitions.

It is designed to be:

  • Content-first: both sides support standard Gutenberg content blocks.
  • Configurable: choose flip or slide animations, speed, trigger behavior, min height, and aspect ratio.
  • Accessible: supports keyboard interaction and an optional visible toggle button.

What this block creates​

When you insert Card Flip, it creates two required child blocks:

  • yoko/card-flip-front
  • yoko/card-flip-back

Both child blocks support normal block editing and can contain common content blocks such as headings, paragraphs, lists, and buttons.

By default, each side starts with:

  • white background
  • light border
  • internal padding

You can override these defaults using each face block's style controls.

Block settings​

The parent Card Flip block includes these settings in the block sidebar.

Flip Speed (ms)​

Controls transition duration.

  • Default: 600
  • Range: 200 to 2000

Animation Type​

Controls the transition direction and style.

Available values:

  • flip-horizontal
  • flip-vertical
  • slide-up
  • slide-down
  • slide-left
  • slide-right

Default: flip-horizontal

Flip Trigger​

Controls how the card toggles state.

Available values:

  • hover
  • click
  • both

Default: hover

Minimum Height​

Sets the minimum card height for both editor preview and frontend rendering.

  • Default: 300px
  • Example values: 300px, 20rem, 40vh

On the frontend, the block also measures front/back content and raises effective min height when needed so content is not clipped.

Use Aspect Ratio​

Enables or disables ratio-based sizing at the card container level.

  • Default: enabled

When enabled, set:

  • Aspect Ratio Width (default 1)
  • Aspect Ratio Height (default 1)

Example: width 16, height 9 produces a 16:9 card.

Show toggle button​

Shows a visible button inside the card for manual toggling.

  • Default: disabled

When enabled, the block renders a standard WordPress button structure (.wp-block-button + .wp-element-button) to improve consistency with theme styles and accessibility.

Interaction behavior​

Hover trigger​

  • Card flips on pointer enter.
  • Card resets on pointer leave.

Click trigger​

  • Card toggles on click.
  • If no visible toggle button is shown, the card wrapper is made keyboard focusable and behaves like a button (role="button", aria-pressed, Enter/Space support).

Both trigger​

  • Hover and click interactions are both active.

Styling​

Parent block supports​

  • Alignment: wide, full
  • Spacing: margin, padding
  • Background color

Face block supports (Card Flip: Front and Card Flip: Back)​

  • Background and text color
  • Border color/style/width/radius
  • Padding

This allows each side to be styled independently.

Accessibility notes​

  • The optional visible toggle button is recommended for mixed input scenarios.
  • In click mode without visible button, the wrapper gets accessible button semantics.
  • Toggle state is synchronized with aria-pressed attributes.

Troubleshooting​

I cannot add blocks to the front or back side​

Use the selected face block (Card Flip: Front or Card Flip: Back) and insert content inside that face. Each face supports normal inner block insertion.

The card is too short for my content​

Increase Minimum Height, or disable aspect ratio if strict ratio sizing is limiting your layout.

Slide animations look clipped​

This is usually due to content exceeding the available card area for the chosen ratio/min-height combination. Increase min height or adjust ratio.

I need a keyboard-friendly interaction without hover​

Use Flip Trigger: click (or both) and enable Show toggle button.

Technical notes (for developers)​

  • Parent block name: yoko/card-flip
  • Child blocks:
    • yoko/card-flip-front
    • yoko/card-flip-back
  • Parent is dynamically rendered via render.php.
  • Frontend interactions and content-aware height sync run in view.js.
  • Aspect ratio is applied with CSS custom property --flip-aspect-ratio when enabled.
  • Min height and speed are exposed as CSS vars (--flip-min-height, --flip-speed).