[Categories Block]: Add layout & blockGap support

[Mayank-Tripathi32]

What?

Attempt to resolve #53187 partially

Adds gap control support to the Post Terms block and improves the HTML structure by wrapping each term and separator in individual spans.

Why?

The Post Terms block, like other list-based blocks, lacks gap control functionality, making it difficult for users to control spacing between terms. Additionally, the current HTML structure makes it challenging to apply consistent styling to individual terms and their separators.

How?

1. Enhanced HTML Structure: Modified both the JavaScript (edit.js) and PHP (index.php) rendering to wrap each term and its separator within individual <span> elements, providing better semantic structure and styling control.

2. Gap Control Integration: Leveraged the existing gap control infrastructure by:

   • Using __experimentalGetGapCSSValue to process gap values (required for editor as gap values are not added)
   • Applying gap styles to the block's wrapper element
   • Maintaining fallback to CSS custom properties

3. Consistent Rendering: Ensured both editor and frontend rendering produce near identical HTML structure for consistent styling and behavior.

Testing Instructions

1. Open a post or page in the editor
2. Insert a Post Terms block
3. Ensure the post has assigned terms (categories, tags, etc.)
4. In the block settings, verify gap controls are available and functional
5. Test different gap values (e.g., 10px, 1rem, 2em)
6. Verify terms are properly spaced according to the gap setting
7. Check that each term and separator are wrapped in individual spans
8. Preview/publish the post and verify frontend rendering matches editor appearance

Testing Instructions for Keyboard

1. Use Tab to navigate to the Post Terms block
2. Use keyboard shortcuts to access block settings
3. Navigate to gap controls using Tab/Shift+Tab
4. Adjust gap values using arrow keys or direct input
5. Verify changes are reflected in the block preview
6. Use Escape to close settings and verify block remains accessible

Screenshots

Updated

Previous

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.