SiteOrigin Widgets

🔍 Why SiteOrigin Widgets Break in Block Editor

SiteOrigin Widgets are primarily designed to work with:

  • SiteOrigin Page Builder
  • Classic Editor (with or without Page Builder)

When used directly in the Block Editor, they may:

  • Render as raw shortcode or HTML
  • Fail to load their scripts/styles properly
  • Show broken layouts or unstyled content

This happens because Gutenberg doesn’t natively support SiteOrigin’s widget rendering engine, unless it’s wrapped correctly.

✅ How to Use SiteOrigin Widgets in Block Editor

You have a few options to make them work properly:

1. Use the SiteOrigin Layout Block

If you have the SiteOrigin Page Builder plugin installed, you should see a “SiteOrigin Layout” block in the Block Editor. This lets you:

  • Launch the Page Builder interface inside a block
  • Add SiteOrigin widgets (like Button, Call to Action, etc.)
  • Render them correctly with full styling and functionality

2. Use Shortcodes (if available)

Some SiteOrigin widgets support shortcodes. You can:

  • Insert them into a Shortcode block in Gutenberg
  • But this only works if the widget is shortcode-compatible

3. Fallback to Classic Editor or Page Builder

If your site heavily relies on SiteOrigin widgets, consider:

  • Editing those pages with Classic Editor + Page Builder
  • Or using SiteOrigin Page Builder exclusively for layout-heavy pages

SiteOrigin Accordion without Layout Block

Accordion

Content of item

Content of item

Content of item

.so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel { margin-bottom: 10px; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header { align-items: center; background-color: #757575; color: #ffffff; cursor: pointer; display: flex; padding: 15px 30px 15px 30px; position: relative; flex-direction: row; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header:focus, .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header:hover { background-color: #616161; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-title { display: flex; align-items: center; width: 100%; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-open-close-button { line-height: 0; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-icon-image { max-height: 1em; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-icon-image:not(.sow-accordion-icon-image-custom), .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-icon-image:not([width]), .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-icon-image:not([width]) { width: auto; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-title-icon-left > .sow-accordion-icon-image, .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-title-icon-left > span[data-sow-icon] { margin-right: 5px; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-title-icon-right > .sow-accordion-icon-image, .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-header .sow-accordion-title-icon-right > span[data-sow-icon] { margin-left: 5px; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel:not(.sow-accordion-panel-open) > .sow-accordion-panel-header-container > .sow-accordion-panel-header .sow-accordion-close-button { display: none; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel.sow-accordion-panel-open > .sow-accordion-panel-header-container > .sow-accordion-panel-header .sow-accordion-open-button { display: none; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-content .sow-accordion-panel-border { background-color: #f9f9f9; overflow: auto; padding: 15px 30px 15px 30px; } @media print { .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-open-close-button { display: none; } .so-widget-sow-accordion-default-d9295f5bfa93 .sow-accordion .sow-accordion-panel .sow-accordion-panel-content { display: block !important; } }

SiteOrigin Accordion Wrapped in Layout Block

UC Accordion Block (for comparison)

text inside accordion