Building YOOAdmin-Compatible Dashboard Cards

Card design

• One headline, one or two metrics, one primary action
• Root wrapper class (example: myplugin-yooadmin-card)
• BEM-style child classes — no postbox markup

CSS

• Scope under your wrapper
• Test main (wide) and aside (narrow) placements
• Tables: max-width: 100%, scroll wrapper if needed

.myplugin-yooadmin-card {
  font-size: 13px;
  line-height: 1.5;
}
.myplugin-yooadmin-card table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

JavaScript

• Enqueue in the card enqueue callback
• After AJAX layout loads, listen for yooadmin-studio-hub-widget-rendered (detail: widgetId, body)
• Do not rely on postbox drag-and-drop

Accessibility

• Text domain for all strings
• Use h3/h4 inside cards, not h1
• Visible focus states

Test checklist

Focus Mode on · Studio Hub active · main + aside · AJAX-added card · RTL if translated