/** * Block Editor Selectors - 7 First-Level Components (v2.0 - UX Redesign) * * Architecture: * ┌─────────────────────────────────────────────────────────────────────────────────────────┐ * │ HEADER: [←] [Title...............] [/slug.........] [Preview|Settings] [📱|🖥️]* ●STATUS│ * │ ←────────── dynamic width ─────────────────→ *only Preview │ * ├───────────────────────┬─────────────────────────────────────────┬───────────────────────┤ * │ LEFT COLUMN │ CENTER COLUMN │ RIGHT COLUMN │ * │ [Blocks|Patterns| │ │ Block Properties │ * │ Layout] │ IF TAB = "Preview": │ ───────────────── │ * │ ─────────────────── │ previewCanvas │ │ * │ │ ├── viewport: 375px (mobile) │ [Block Name] │ * │ Tab "Blocks": │ │ 100% (desktop) │ [Content|Design| │ * │ blockPicker │ └── floatingToolbar │ Advanced] │ * │ - Search │ │ │ * │ - Categories │ IF TAB = "Settings": │ form │ * │ - Block cards │ configPanel (single scroll) │ ├── field │ * │ │ ├── entityFieldsSection (collapsible)│ ├── fieldGroup │ * │ Tab "Patterns": │ └── seoMetaSection (collapsible) │ └── arrayField │ * │ (patterns list) │ │ │ * │ │ │ │ * │ Tab "Layout": ←NEW │ │ │ * │ treeView │ │ │ * │ ├── treeNode │ │ │ * │ └── (drag & drop) │ │ │ * └───────────────────────┴─────────────────────────────────────────┴───────────────────────┘ * * Components: * 1. header - Top bar (title, slug, view tabs, viewport toggle, status, actions) * 2. blockPicker - Left col - "Blocks" tab (block selector) * 3. treeView - Left col - "Layout" tab (block tree structure) [NEW] * 4. previewCanvas - Center col - Preview mode (real blocks with responsive viewport) * 5. configPanel - Center col - Settings mode (entity fields + SEO/meta) [NEW] * 6. blockPropertiesPanel - Right col - Selected block properties * * DEPRECATED (kept for backward compatibility): * - layoutCanvas - Replaced by treeView in left column * - entityFieldsPanel - Moved into configPanel * - entityMetaPanel - Moved into configPanel */ export declare const BLOCK_EDITOR_SELECTORS: { readonly container: "builder-editor"; readonly header: { readonly container: "builder-header"; readonly backButton: "builder-back-btn"; readonly titleWrapper: "builder-title-wrapper"; readonly titleInput: "builder-title-input"; readonly slugWrapper: "builder-slug-wrapper"; readonly slugPrefix: "builder-slug-prefix"; readonly slugInput: "builder-slug-input"; readonly externalLink: "builder-external-link"; readonly viewToggle: "builder-view-toggle"; readonly viewPreview: "builder-view-preview"; readonly viewSettings: "builder-view-settings"; readonly viewportToggle: { readonly container: "builder-viewport-toggle"; readonly mobileBtn: "builder-viewport-mobile"; readonly desktopBtn: "builder-viewport-desktop"; }; readonly statusSelector: "builder-status-selector"; readonly statusOption: "builder-status-option-{value}"; readonly statusDot: "builder-status-dot"; readonly statusLabel: "builder-status-label"; readonly localeSelector: "builder-locale-selector"; readonly localeOption: "builder-locale-option-{locale}"; readonly saveButton: "builder-save-btn"; readonly publishButton: "builder-publish-btn"; readonly settingsButton: "builder-settings-btn"; }; readonly blockPicker: { readonly container: "block-picker"; readonly tabBlocks: "block-picker-tab-blocks"; readonly tabPatterns: "block-picker-tab-patterns"; readonly tabLayout: "block-picker-tab-layout"; readonly tabIndicator: "block-picker-tab-indicator"; readonly searchWrapper: "block-picker-search-wrapper"; readonly searchIcon: "block-picker-search-icon"; readonly searchInput: "block-picker-search"; readonly searchClear: "block-picker-search-clear"; readonly categoryChips: "block-picker-categories"; readonly categoryChip: "block-picker-category-{category}"; readonly categoryActive: "block-picker-category-active"; readonly blockList: "block-picker-list"; readonly blockCard: "block-picker-card-{slug}"; readonly blockIcon: "block-picker-icon-{slug}"; readonly blockName: "block-picker-name-{slug}"; readonly blockDescription: "block-picker-desc-{slug}"; readonly blockCategory: "block-picker-cat-{slug}"; readonly addButton: "block-picker-add-{slug}"; readonly empty: "block-picker-empty"; readonly patternsSearchWrapper: "block-picker-patterns-search-wrapper"; readonly patternsSearchIcon: "block-picker-patterns-search-icon"; readonly patternsSearch: "block-picker-patterns-search"; readonly patternsList: "block-picker-patterns-list"; readonly patternsEmpty: "block-picker-patterns-empty"; readonly patternCard: "block-picker-pattern-card-{id}"; readonly patternCardIcon: "block-picker-pattern-icon-{id}"; readonly patternCardTitle: "block-picker-pattern-title-{id}"; readonly patternCardDescription: "block-picker-pattern-desc-{id}"; readonly patternCardBlockCount: "block-picker-pattern-blocks-{id}"; readonly patternCardInsertButton: "block-picker-pattern-insert-{id}"; }; readonly treeView: { readonly container: "builder-tree-view"; readonly empty: "builder-tree-empty"; readonly node: "builder-tree-node-{id}"; readonly nodeIcon: "builder-tree-node-icon-{id}"; readonly nodeName: "builder-tree-node-name-{id}"; readonly nodeDragHandle: "builder-tree-node-drag-{id}"; readonly nodeSelected: "builder-tree-node-selected"; readonly patternGroup: "builder-tree-pattern-{ref}"; readonly patternGroupHeader: "builder-tree-pattern-header-{ref}"; readonly patternGroupBlocks: "builder-tree-pattern-blocks-{ref}"; }; readonly previewCanvas: { readonly container: "preview-canvas"; readonly wrapper: "preview-canvas-wrapper"; readonly content: "preview-canvas-content"; readonly empty: "preview-canvas-empty"; readonly viewport: "preview-canvas-viewport-{mode}"; readonly viewportMobile: "preview-canvas-mobile"; readonly viewportDesktop: "preview-canvas-desktop"; readonly iframePreview: { readonly container: "preview-iframe-container"; readonly loading: "preview-iframe-loading"; readonly frame: "preview-iframe-frame"; }; readonly block: "preview-block-{id}"; readonly blockWrapper: "preview-block-wrapper-{id}"; readonly blockSelected: "preview-block-selected-{id}"; readonly editingBadge: "preview-block-editing-{id}"; readonly blockGeneric: "preview-block-"; readonly floatingToolbar: { readonly container: "floating-toolbar-{id}"; readonly dragHandle: "floating-toolbar-drag-{id}"; readonly blockName: "floating-toolbar-name-{id}"; readonly divider: "floating-toolbar-divider-{id}"; readonly duplicateBtn: "floating-toolbar-duplicate-{id}"; readonly deleteBtn: "floating-toolbar-delete-{id}"; }; readonly moveUp: "preview-block-move-up-{id}"; readonly moveDown: "preview-block-move-down-{id}"; }; readonly configPanel: { readonly container: "builder-config-panel"; readonly scroll: "builder-config-scroll"; readonly entityFieldsSection: { readonly container: "builder-config-entity-section"; readonly trigger: "builder-config-entity-trigger"; readonly content: "builder-config-entity-content"; readonly field: "builder-config-entity-field-{name}"; }; readonly seoSection: { readonly container: "builder-config-seo-section"; readonly trigger: "builder-config-seo-trigger"; readonly content: "builder-config-seo-content"; readonly metaTitle: "builder-config-seo-title"; readonly metaDescription: "builder-config-seo-description"; readonly metaKeywords: "builder-config-seo-keywords"; readonly ogImage: "builder-config-seo-og-image"; }; readonly customFieldsSection: { readonly container: "builder-config-custom-section"; readonly trigger: "builder-config-custom-trigger"; readonly content: "builder-config-custom-content"; readonly addButton: "builder-config-custom-add"; readonly fieldKey: "builder-config-custom-key-{index}"; readonly fieldValue: "builder-config-custom-value-{index}"; readonly fieldRemove: "builder-config-custom-remove-{index}"; }; /** @deprecated Use seoSection and customFieldsSection instead */ readonly seoMetaSection: { readonly container: "builder-config-seo-section"; readonly trigger: "builder-config-seo-trigger"; readonly content: "builder-config-seo-content"; readonly metaTitle: "builder-config-seo-title"; readonly metaDescription: "builder-config-seo-description"; readonly metaKeywords: "builder-config-seo-keywords"; readonly ogImage: "builder-config-seo-og-image"; readonly customFields: { readonly container: "builder-config-custom-fields"; readonly fieldKey: "builder-config-custom-key-{index}"; readonly fieldValue: "builder-config-custom-value-{index}"; readonly fieldRemove: "builder-config-custom-remove-{index}"; readonly addButton: "builder-config-custom-add"; }; }; }; readonly patternReference: { readonly container: "pattern-reference-{ref}"; readonly badge: "pattern-reference-badge-{ref}"; readonly remove: "pattern-reference-remove-{ref}"; readonly locked: "pattern-reference-locked-{ref}"; readonly editLink: "pattern-reference-edit-link-{ref}"; }; readonly blockPropertiesPanel: { readonly container: "block-properties-panel"; readonly header: "block-properties-header"; readonly closeBtn: "block-properties-close"; readonly blockIcon: "block-properties-icon"; readonly blockName: "block-properties-name"; readonly tabs: "block-properties-tabs"; readonly tabContent: "block-properties-tab-content"; readonly tabDesign: "block-properties-tab-design"; readonly tabAdvanced: "block-properties-tab-advanced"; readonly empty: "block-properties-empty"; readonly error: "block-properties-error"; readonly resetPropsBtn: "block-properties-reset-btn"; readonly patternLocked: "block-properties-pattern-locked"; readonly patternTitle: "block-properties-pattern-title"; readonly patternEditLink: "block-properties-pattern-edit"; readonly patternRemoveBtn: "block-properties-pattern-remove"; readonly form: { readonly container: "block-properties-form"; readonly field: "block-field-{name}"; readonly fieldGroup: "block-field-group-{id}"; readonly arrayField: { readonly container: "block-array-{name}"; readonly item: "block-array-{name}-item-{index}"; readonly itemField: "block-array-{name}-{index}-{field}"; readonly itemMoveUp: "block-array-{name}-{index}-up"; readonly itemMoveDown: "block-array-{name}-{index}-down"; readonly itemRemove: "block-array-{name}-{index}-remove"; readonly addButton: "block-array-{name}-add"; }; readonly mediaField: { readonly preview: "block-media-{name}-preview"; readonly empty: "block-media-{name}-empty"; readonly changeBtn: "block-media-{name}-change"; readonly removeBtn: "block-media-{name}-remove"; readonly dropzone: "block-media-{name}-dropzone"; readonly fileInput: "block-media-{name}-input"; }; }; }; readonly postFields: { readonly excerpt: "entity-field-excerpt"; readonly featuredImage: "entity-field-featuredImage"; readonly featuredImageUpload: "entity-field-featuredImage-upload"; readonly categories: "entity-field-categories"; readonly categoryOption: "entity-field-category-option-{id}"; readonly categoryBadge: "entity-field-category-badge-{id}"; readonly categoryRemove: "entity-field-category-remove-{id}"; }; /** @deprecated Use treeView instead - layoutCanvas functionality moved to left column */ readonly layoutCanvas: { readonly container: "layout-canvas"; readonly empty: "layout-canvas-empty"; readonly dropZone: "layout-canvas-dropzone"; readonly sortableBlock: { readonly container: "sortable-block-{id}"; readonly card: "sortable-block-card-{id}"; readonly dragHandle: "sortable-block-drag-{id}"; readonly name: "sortable-block-name-{id}"; readonly category: "sortable-block-category-{id}"; readonly propsPreview: "sortable-block-props-{id}"; readonly duplicateBtn: "sortable-block-duplicate-{id}"; readonly removeBtn: "sortable-block-remove-{id}"; readonly error: "sortable-block-error-{id}"; readonly generic: "sortable-block-"; }; }; /** @deprecated Use configPanel.entityFieldsSection instead */ readonly entityFieldsPanel: { readonly container: "entity-fields-panel"; readonly field: "entity-field-{name}"; readonly categoryList: "entity-field-categories"; readonly categoryItem: "entity-field-category-{slug}"; readonly categoryCheckbox: "entity-field-category-checkbox-{slug}"; readonly categoryBadge: "entity-field-category-badge-{slug}"; }; /** @deprecated Use configPanel.seoMetaSection instead */ readonly entityMetaPanel: { readonly container: "entity-meta-panel"; readonly seoSection: { readonly trigger: "entity-meta-seo-trigger"; readonly content: "entity-meta-seo-content"; readonly metaTitle: "entity-meta-seo-title"; readonly metaDescription: "entity-meta-seo-description"; readonly metaKeywords: "entity-meta-seo-keywords"; readonly ogImage: "entity-meta-seo-og-image"; }; readonly customFields: { readonly trigger: "entity-meta-custom-trigger"; readonly content: "entity-meta-custom-content"; readonly fieldKey: "entity-meta-custom-key-{index}"; readonly fieldValue: "entity-meta-custom-value-{index}"; readonly fieldRemove: "entity-meta-custom-remove-{index}"; readonly addButton: "entity-meta-custom-add"; }; }; }; export type BlockEditorSelectorsType = typeof BLOCK_EDITOR_SELECTORS; //# sourceMappingURL=block-editor.selectors.d.ts.map