Improve native search and account modal customization

[RabbiIslamRony]

PR Type

What kind of change does this PR introduce?

• Bugfix
• Security fix
• Improvement
• New Feature
• Refactoring (no functional changes, no api changes)
• Build related changes
• Text changes
• Other... Please describe:

Description

Extends the native Search Modal and Account Button Gutenberg blocks without changing their saved markup contract.

• Adds icon-only, text-only, and icon-with-text trigger layouts.
• Makes new and empty blocks render as clean icon-only triggers by default, without inherited theme background, border, radius, shadow, padding, or extra text.
• Adds quick Directorist icon presets, accurate Directorist SVG previews in the editor, validated custom icon classes, Media Library icons, icon size/color/position/spacing controls, and accessible labels.
• Adds logged-in avatar, avatar-with-name, icon, and icon-with-name layouts, including custom avatar/icon media, sizing, color, roundness, and dashboard-menu control.
• Adds explicit logged-out/logged-in editor preview modes and one-click reset actions for the trigger and author state.
• Preserves existing block output through runtime fallback migration, so previously saved text blocks continue to render without manual migration or block validation errors.
• Falls back to the native default when a configured Directorist icon class is invalid or its SVG asset is missing.
• Fixes avatar alternative text/sizing, duplicate dialog IDs from repeated blocks, mobile close-button visibility, body scroll locking, Escape/overlay closing, focus trapping/return, and ARIA state.
• Reuses one dialog per modal type while allowing multiple independent triggers on a page.
• Moves active dialogs and dropdown overlays to the document body so constrained, transformed, sticky, or backdrop-filter headers cannot collapse their viewport dimensions.
• Automatically gives empty legacy Account Button markup a native icon, suppresses legacy pseudo-icon duplication, normalizes icon/avatar-only triggers, and flips right-edge account menus back inside the viewport.
• Protects native trigger flex layout, icon dimensions, and icon-only hit areas from later WordPress or theme button/icon resets.

How to reproduce the issue or how to test the changes

1. Insert fresh Search Modal and Account Button blocks and confirm both begin as 24px icon-only triggers with no visible button chrome or text.
2. Switch among icon/text layouts, select different Directorist presets or a Media Library icon, customize size/color/position/spacing, save, and verify the selected icon in both editor and frontend.
3. In Account Button, switch the editor preview between logged out and logged in; verify avatar and author-icon sizes, names, custom media, and dashboard-menu states.
4. Apply width/color/border/padding/shadow styles, use the reset actions, save and reload; confirm stale styling is not serialized and the native defaults return.
5. Add each block more than once and confirm every trigger opens the single matching dialog without duplicate IDs.
6. Open content created with previous block attributes and confirm its original label/style remains valid without manual migration.
7. Run npm run build:blocks, the targeted JS/PHP lint commands, and wp eval-file wp-content/plugins/directorist/tests/wp-cli/modal-blocks-smoke.php from the WordPress root.
8. Verify logged-in and logged-out header usage at 320, 390, 768, 1280, and 1440 pixel widths, including Escape, outside click, focus return, and forward/reverse focus wrapping.

Before

After
https://prnt.sc/sQY4h31zf2DS

Any linked issues

Gutenberg template dependency

Checklist

• My code follows the WordPress coding standards