| @@ -16,10 +16,10 @@ | ||
| 16 | 16 | * 1. Register admin menu |
| 17 | 17 | * ────────────────────────────────────────────── */ |
| 18 | 18 | add_action( 'admin_menu', function () { |
| 19 | 19 | add_menu_page( |
| 20 | + __( 'Blocks', 'blockenberg' ), | |
| 20 | 21 | __( 'Blockenberg', 'blockenberg' ), |
| 21 | - __( 'Blockenberg', 'blockenberg' ), | |
| 22 | 22 | 'manage_options', |
| 23 | 23 | 'blockenberg', |
| 24 | 24 | 'bkbg_render_dashboard', |
| 25 | 25 | 'dashicons-screenoptions', |
| @@ -24,8 +24,16 @@ | ||
| 24 | 24 | 'bkbg_render_dashboard', |
| 25 | 25 | 'dashicons-screenoptions', |
| 26 | 26 | 59 |
| 27 | 27 | ); |
| 28 | + add_submenu_page( | |
| 29 | + 'blockenberg', | |
| 30 | + __( 'Blocks', 'blockenberg' ), | |
| 31 | + __( 'Blocks', 'blockenberg' ), | |
| 32 | + 'manage_options', | |
| 33 | + 'blockenberg', | |
| 34 | + 'bkbg_render_dashboard' | |
| 35 | + ); | |
| 28 | 36 | } ); |
| 29 | 37 | |
| 30 | 38 | /* ────────────────────────────────────────────── |
| 31 | 39 | * 2. Enqueue dashboard assets (only on our page) |
| @@ -221,13 +229,14 @@ | ||
| 221 | 229 | |
| 222 | 230 | <!-- ▸ Header --> |
| 223 | 231 | <header class="bkbg-header"> |
| 224 | 232 | <div class="bkbg-header__left"> |
| 225 | - <div class="bkbg-header__logo"> | |
| 226 | - <span class="dashicons dashicons-screenoptions"></span> | |
| 233 | + <div class="bkbg-header__brand"> | |
| 234 | + <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="2" y="2" width="8" height="8" rx="2"/><rect x="14" y="2" width="8" height="8" rx="2"/><rect x="2" y="14" width="8" height="8" rx="2"/><rect x="14" y="14" width="8" height="8" rx="2"/></svg> | |
| 235 | + <span>blockenberg.</span> | |
| 227 | 236 | </div> |
| 228 | 237 | <div class="bkbg-header__text"> |
| 229 | - <h1><?php esc_html_e( 'Blockenberg', 'blockenberg' ); ?></h1> | |
| 238 | + <h1><?php esc_html_e( 'Blocks', 'blockenberg' ); ?></h1> | |
| 230 | 239 | <p class="bkbg-header__subtitle"> |
| 231 | 240 | <?php |
| 232 | 241 | printf( |
| 233 | 242 | /* translators: 1: enabled count 2: total count */ |
| @@ -239,10 +248,18 @@ | ||
| 239 | 248 | </p> |
| 240 | 249 | </div> |
| 241 | 250 | </div> |
| 242 | 251 | <div class="bkbg-header__right"> |
| 252 | + <nav class="bkbg-header__links" aria-label="<?php esc_attr_e( 'Blockenberg resources', 'blockenberg' ); ?>"> | |
| 253 | + <a href="<?php echo esc_url( admin_url( 'admin.php?page=blockenberg-templates' ) ); ?>"><?php esc_html_e( 'Template Library', 'blockenberg' ); ?></a> | |
| 254 | + <a href="<?php echo esc_url( admin_url( 'admin.php?page=blockenberg-ai' ) ); ?>"><?php esc_html_e( 'AI Agent Settings', 'blockenberg' ); ?></a> | |
| 255 | + <a href="https://blockenberg.com/docs/" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Docs', 'blockenberg' ); ?> ↗</a> | |
| 256 | + </nav> | |
| 257 | + <div class="bkbg-header__controls"> | |
| 243 | 258 | <div class="bkbg-search-wrap"> |
| 259 | + <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="10" cy="10" r="6.5"/><path d="m15 15 5 5"/></svg> | |
| 244 | 260 | <input type="text" id="bkbg-search" class="bkbg-search" |
| 261 | + aria-label="<?php esc_attr_e( 'Search blocks', 'blockenberg' ); ?>" | |
| 245 | 262 | placeholder="<?php esc_attr_e( 'Search blocks…', 'blockenberg' ); ?>" |
| 246 | 263 | autocomplete="off" /> |
| 247 | 264 | </div> |
| 248 | 265 | <button type="button" id="bkbg-save" class="bkbg-btn bkbg-btn--primary"> |
| @@ -248,15 +265,18 @@ | ||
| 248 | 265 | <button type="button" id="bkbg-save" class="bkbg-btn bkbg-btn--primary"> |
| 249 | 266 | <span class="dashicons dashicons-cloud-saved"></span> |
| 250 | 267 | <?php esc_html_e( 'Save Changes', 'blockenberg' ); ?> |
| 251 | 268 | </button> |
| 269 | + </div> | |
| 252 | 270 | </div> |
| 253 | 271 | </header> |
| 254 | 272 | |
| 255 | 273 | <!-- ▸ Toolbar --> |
| 256 | - <div class="bkbg-toolbar"> | |
| 274 | + <div class="bkbg-workspace"> | |
| 275 | + <aside class="bkbg-toolbar" aria-label="<?php esc_attr_e( 'Block categories', 'blockenberg' ); ?>"> | |
| 276 | + <p class="bkbg-toolbar__label"><?php esc_html_e( 'Categories', 'blockenberg' ); ?></p> | |
| 257 | 277 | <div class="bkbg-toolbar__tabs" id="bkbg-category-tabs"> |
| 258 | - <button type="button" class="bkbg-tab bkbg-tab--active" data-category="all"> | |
| 278 | + <button type="button" class="bkbg-tab bkbg-tab--active" data-category="all" aria-pressed="true"> | |
| 259 | 279 | <?php esc_html_e( 'All Blocks', 'blockenberg' ); ?> |
| 260 | 280 | <span class="bkbg-tab__count"><?php echo intval( $total_blocks ); ?></span> |
| 261 | 281 | </button> |
| 262 | 282 | <?php foreach ( $ordered as $cat_slug => $cat_blocks ) : |
| @@ -262,9 +282,9 @@ | ||
| 262 | 282 | <?php foreach ( $ordered as $cat_slug => $cat_blocks ) : |
| 263 | 283 | $label = isset( $category_labels[ $cat_slug ] ) ? $category_labels[ $cat_slug ] : $cat_slug; |
| 264 | 284 | $icon = isset( $category_icons[ $cat_slug ] ) ? $category_icons[ $cat_slug ] : 'dashicons-block-default'; |
| 265 | 285 | ?> |
| 266 | - <button type="button" class="bkbg-tab" data-category="<?php echo esc_attr( $cat_slug ); ?>"> | |
| 286 | + <button type="button" class="bkbg-tab" data-category="<?php echo esc_attr( $cat_slug ); ?>" aria-pressed="false"> | |
| 267 | 287 | <span class="dashicons <?php echo esc_attr( $icon ); ?>"></span> |
| 268 | 288 | <?php echo esc_html( $label ); ?> |
| 269 | 289 | <span class="bkbg-tab__count"><?php echo count( $cat_blocks ); ?></span> |
| 270 | 290 | </button> |
| @@ -277,13 +297,14 @@ | ||
| 277 | 297 | <button type="button" id="bkbg-disable-all" class="bkbg-btn bkbg-btn--ghost bkbg-btn--danger"> |
| 278 | 298 | <?php esc_html_e( 'Disable All', 'blockenberg' ); ?> |
| 279 | 299 | </button> |
| 280 | 300 | </div> |
| 281 | - </div> | |
| 301 | + </aside> | |
| 282 | 302 | |
| 283 | 303 | <!-- ▸ Toast notification --> |
| 284 | 304 | <div id="bkbg-toast" class="bkbg-toast" aria-live="polite"></div> |
| 285 | 305 | |
| 306 | + <main class="bkbg-workspace__content" aria-label="<?php esc_attr_e( 'Available blocks', 'blockenberg' ); ?>"> | |
| 286 | 307 | <!-- ▸ Block grid --> |
| 287 | 308 | <div class="bkbg-grid" id="bkbg-grid"> |
| 288 | 309 | <?php foreach ( $ordered as $cat_slug => $cat_blocks ) : |
| 289 | 310 | $label = isset( $category_labels[ $cat_slug ] ) ? $category_labels[ $cat_slug ] : $cat_slug; |
| @@ -337,8 +358,9 @@ | ||
| 337 | 358 | </div> |
| 338 | 359 | <label class="bkbg-toggle"> |
| 339 | 360 | <input type="checkbox" |
| 340 | 361 | class="bkbg-toggle__input" |
| 362 | + aria-label="<?php echo esc_attr( sprintf( __( 'Enable %s', 'blockenberg' ), $block['title'] ) ); ?>" | |
| 341 | 363 | data-block="<?php echo esc_attr( $block['name'] ); ?>" |
| 342 | 364 | <?php checked( ! $is_disabled ); ?> /> |
| 343 | 365 | <span class="bkbg-toggle__slider"></span> |
| 344 | 366 | </label> |
| @@ -352,8 +374,10 @@ | ||
| 352 | 374 | <!-- ▸ Empty state for search --> |
| 353 | 375 | <div id="bkbg-empty" class="bkbg-empty" style="display:none;"> |
| 354 | 376 | <span class="dashicons dashicons-search"></span> |
| 355 | 377 | <p><?php esc_html_e( 'No blocks match your search.', 'blockenberg' ); ?></p> |
| 378 | + </div> | |
| 379 | + </main> | |
| 356 | 380 | </div> |
| 357 | 381 | |
| 358 | 382 | </div> |
| 359 | 383 | <?php |