Skip to content

Term Template Block: Move the Styles control to the very top of inspector controls#71479

Closed
kmanijak wants to merge 2 commits intoWordPress:add/terms-query-block-containerfrom
kmanijak:add/move-styles-controls-above-layout
Closed

Term Template Block: Move the Styles control to the very top of inspector controls#71479
kmanijak wants to merge 2 commits intoWordPress:add/terms-query-block-containerfrom
kmanijak:add/move-styles-controls-above-layout

Conversation

@kmanijak
Copy link
Contributor

@kmanijak kmanijak commented Sep 3, 2025

Part of #49094.

What?

Closes

Move the "Styles" section to the very top of Inspector Controls above "Layout" section.

Why?

This is because the Layout settings follow from the style ones. Raised in the comment here.

How?

Use editor.BlockEdit filter that allows to push content relative to existing/native inspector controls.

Testing Instructions

  1. Ensure experimental blocks are enabled.
  2. Insert the Terms Query block in a template.
  3. Focus on Term Template
  4. Expected: Make sure Styles (List / Grid) is above the Layout section
  5. Change the layout to make sure it still works

Testing Instructions for Keyboard

Screenshots or screencast

Before After
https://github.com/user-attachments/assets/ee7c47af-fd79-4b81-8792-0bce3d95c290 https://github.com/user-attachments/assets/20bcc94f-c132-4e51-acc2-207d382d47cb

@github-actions
Copy link

github-actions bot commented Sep 3, 2025

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: kmanijak <[email protected]>
Co-authored-by: mikachan <[email protected]>
Co-authored-by: Mamaduka <[email protected]>

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

@kmanijak kmanijak mentioned this pull request Sep 3, 2025
@mikachan mikachan added the [Type] Enhancement A suggestion for improvement. label Sep 3, 2025
@Mamaduka
Copy link
Member

Mamaduka commented Sep 3, 2025

Disclaimer: This is not a full review. I was just looking at recent PRs.

Using the editor.BlockEdit filter to just change the position of the controls for the same block type doesn't feel like a good practice.

Copy link
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't realise you could use BlockEdit for this. Ace, LGTM!

@kmanijak
Copy link
Contributor Author

kmanijak commented Sep 3, 2025

@Mamaduka , thanks for the tip with key! Wasn't aware of the potential problem. 🙌

Using the editor.BlockEdit filter to just change the position of the controls for the same block type doesn't feel like a good practice.

Valid concern, but is there any other way to achieve it? In this case there's strong UX justification to push a setting above the "native" Layout section.

@Mamaduka
Copy link
Member

Mamaduka commented Sep 3, 2025

When it comes to specific block UX justifications vs consistency across the blocks, I lean towards the latter.

Having a more declarative way for blocks to render their custom "Block Styles" controls could be a nice approach, which, if understood correctly, is what we're trying to do.

Using a filter also doesn't guarantee the positioning of a control. The core controls can change and give us a different order.

@kmanijak
Copy link
Contributor Author

kmanijak commented Sep 3, 2025

Actually @mikachan , in ideal world we should probably use supports.layout.allowSwitching: true flag instead and get rid of custom controls completely. But in current shape there's too many options and for some reason Layout section disappears. However, it may be related to custom implementation now and with some tweaking we could make it work. I may try in separate PR:

Screen.Capture.on.2025-09-03.at.11-43-45.mp4

@t-hamano t-hamano changed the title Move the Styles control to the very top of inspector controls Term Template Block: Move the Styles control to the very top of inspector controls Sep 3, 2025
@mikachan
Copy link
Member

mikachan commented Sep 3, 2025

in ideal world we should probably use supports.layout.allowSwitching: true flag instead and get rid of custom controls completely

Nice! I've tried this out in #71488. It's working OK, but there doesn't seem to be much control over the layout options via the block. How important do we think it is that the grid option is still available when "Show hierarchy" is true? At the moment, "grid" is disabled if "Show hierarchy" is true.

image

I guess it's unlikely that folks would choose a layout option that doesn't work well with the terms query they've selected, so maybe giving the users complete control over the layout options is fine.

@kmanijak
Copy link
Contributor Author

kmanijak commented Sep 4, 2025

How important do we think it is that the grid option is still available when "Show hierarchy" is true? At the moment, "grid" is disabled if "Show hierarchy" is true.

Ah, I see. Always a tradeoff 😅 I think it's alright to keep it enabled and give control and leave the responsibility to users in this case.

maybe giving the users complete control over the layout options is fine.

Yeah! This!

@kmanijak
Copy link
Contributor Author

kmanijak commented Sep 4, 2025

Given we'll most likely go with the native option I'm closing this PR. 🙌

@kmanijak kmanijak closed this Sep 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants