WordPress Blocks Support

Wash converts WordPress Gutenberg blocks to clean HTML that renders properly in Shopify. This guide covers which blocks are supported and how they translate.

Block Support Levels

  • Full Support — Block renders identically
  • Partial Support — Core functionality works, some features limited
  • HTML Only — Content preserved but styling may differ
  • Not Supported — Block is stripped or replaced

Core Blocks — Full Support

Text Blocks

  • Paragraph — Full support including alignment, drop cap
  • Heading — H1-H6 with alignment
  • List — Ordered and unordered, nested lists
  • Quote — Blockquote with citation
  • Preformatted — Preserves whitespace
  • Code — Code blocks with syntax
  • Pullquote — Styled quotes

Media Blocks

  • Image — Full support, uploaded to Shopify CDN
  • Gallery — Grid layout preserved
  • Audio — HTML5 audio player
  • Video — HTML5 video player
  • Cover — Background image with overlay
  • File — Download link

Design Blocks

  • Buttons — Styled buttons with links
  • Columns — Responsive column layouts
  • Group — Container with background
  • Separator — Horizontal rules
  • Spacer — Vertical spacing

Core Blocks — Partial Support

Embed Blocks

  • YouTube — Converted to responsive iframe
  • Vimeo — Converted to responsive iframe
  • Twitter — Embed code preserved
  • Other embeds — HTML preserved, may need theme styling

Widget Blocks

  • Shortcode — Shortcode output preserved (if rendered)
  • Custom HTML — HTML passed through as-is
  • Archives — Not applicable (removed)
  • Categories — Not applicable (removed)

Table Support

WordPress table blocks are fully supported:

  • Header rows
  • Fixed/auto width
  • Cell alignment
  • Background colors (as inline styles)

Recommend adding responsive table CSS to your Shopify theme.

Block Patterns

Block patterns (combinations of blocks) are supported as their individual blocks are supported. Common patterns:

  • Hero sections — Cover + Heading + Buttons
  • Feature grids — Columns + Images + Text
  • Testimonials — Quote + Image

Third-Party Blocks

Generally Supported

Blocks that output clean HTML usually work:

  • Advanced Custom Blocks
  • Stackable blocks
  • GenerateBlocks

May Have Issues

Blocks requiring JavaScript may not function:

  • Interactive sliders/carousels
  • Accordion blocks (need JS)
  • Tab blocks (need JS)

Reusable Blocks

Reusable blocks are expanded to their full content before sync. The content is included inline, not as a reference.

Block Styling

Class Names Preserved

WordPress block class names are preserved:

<div class="wp-block-columns has-2-columns"> ...
</div>

Recommended Theme CSS

Add these styles to your Shopify theme for best results:

/* Columns */
.wp-block-columns { display: flex; flex-wrap: wrap; gap: 2rem;
}
.wp-block-column { flex: 1; min-width: 200px;
}

/* Images */
.wp-block-image {
margin: 1.5rem 0;
}
.wp-block-image img {
max-width: 100%;
height: auto;
}
.wp-block-image.aligncenter {
text-align: center;
}
.wp-block-image.alignleft {
float: left;
margin-right: 1.5rem;
}
.wp-block-image.alignright {
float: right;
margin-left: 1.5rem;
}
/* Buttons */
.wp-block-button__link {
display: inline-block;
padding: 0.75rem 1.5rem;
background: var(--color-primary);
color: white;
text-decoration: none;
border-radius: 4px;
}
/* Cover */
.wp-block-cover {
position: relative;
background-size: cover;
background-position: center;
padding: 4rem 2rem;
color: white;
}
/* Quote */
blockquote.wp-block-quote {
border-left: 4px solid var(--color-primary);
padding-left: 1.5rem;
font-style: italic;
}
/* Tables */
.wp-block-table {
width: 100%;
overflow-x: auto;
}
.wp-block-table table {
width: 100%;
border-collapse: collapse;
}
.wp-block-table td,
.wp-block-table th {
padding: 0.75rem;
border: 1px solid #ddd;
}

Inline Styles

WordPress block editor inline styles are preserved:

  • Text color
  • Background color
  • Font size
  • Custom spacing

These appear as style="" attributes and work without additional CSS.

Troubleshooting

Block Not Rendering

  • Check if block is in the supported list
  • View the synced HTML in Shopify to see what was transferred
  • Some blocks may need theme CSS

Styling Looks Wrong

  • Add WordPress block CSS to your Shopify theme
  • Check for CSS conflicts with your theme
  • Inspect element to see applied styles

Interactive Block Not Working

  • Blocks requiring JS don't transfer functionality
  • Consider using Shopify-native alternatives
  • Or include necessary JS in your theme

Related Articles