Skip to content

Flexible Content: group layouts by category in the Add Layout menu - #573

Open
faisalahammad wants to merge 1 commit into
WordPress:trunkfrom
faisalahammad:feature/570-fc-layout-categories
Open

faisalahammad wants to merge 1 commit into
WordPress:trunkfrom
faisalahammad:feature/570-fc-layout-categories

Conversation

@faisalahammad

Copy link
Copy Markdown

With many Flexible Content layouts, the "Add Layout" menu is one long flat list and related layouts are hard to find. This adds an optional "Category" setting per layout and groups the menu by it.

What changed

  • class-acf-field-flexible-content.php
    • New category layout setting (default '') in get_valid_layout(), so older layouts get the key too.
    • "Category" text input in the layout settings of the field group editor.
    • translate_field() translates the category like the label.
  • FlexibleContent/Render.php
    • add_layout_menu() groups layouts by category. Layouts without a category stay at the top, so existing menus look exactly the same.
    • Categories follow the order of their first layout, and layouts keep their defined order inside a category. No extra sorting setting.
    • Each group gets a non-interactive <li class="acf-fc-popup-category"> heading, escaped with esc_html(). No JS change was needed: the popup JS only targets [data-layout], so min/max badges, disabled state and clicks skip the heading.
  • SCSS for the heading and the new input, schema description and docs line.

The optional search input from the issue is not part of this PR, it can be a follow-up.

How to test

  1. Add a Flexible Content field with layouts: Note (no category), Image (Media), Quote (Text), Gallery (Media), Info (no category). Save.
  2. Edit a post and click "Add Row". The menu shows Note, Info, then a "Media" heading with Image and Gallery, then a "Text" heading with Quote.
  3. Click a heading. Nothing happens. Click a layout. It is added as before.
  4. Set Max = 1 on Quote and add one. Quote is disabled in the menu. Set Min on Image, the required badge still shows.
  5. A field with no categories shows the same flat menu as before.
  6. Export the field group as JSON or PHP and import it again. category is kept.

PHPUnit tests added for the default value, the flat menu, grouping order and escaping. Full PHP suite and Jest suite pass.

Closes #570

Use of AI Tools

Claude Code was used to help write the change and tests. I reviewed and tested the changes before submitting.

- Add an optional "Category" setting to each layout in the field group editor.
- Group the "Add Layout" menu by category, with a small heading per group.
- Layouts without a category stay at the top, so existing menus look the same.
- Categories follow the order of their first layout, layouts keep their order.
- Translate the category like the layout label.
- Add PHPUnit tests, schema description and docs.

Long layout lists were hard to scan because the menu was one flat list.

Fixes WordPress#570
@github-actions

Copy link
Copy Markdown

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @Faton1995.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

Core Committers: Use this line as a base for the props when committing in SVN:

Props faisalahammad.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Flexible Content: allow grouping layouts into categories in the "Add layout" menu

1 participant