Comments (17)
I explored this potential solution as a starting point. Here's the prototype for it:
demo.mp4
And here's a brief breakdown:
- Adding an Attribute:
- The user begins the process by clicking the plus icon (
+
) located under the "Attributes" section. - This action opens a modal labeled "ADD ATTRIBUTE."
- The user begins the process by clicking the plus icon (
-
Selecting the Attribute and Source:
- In the "ADD ATTRIBUTE" modal, the user sees two SelectControls:
- The first select control labeled "ATTRIBUTE" allows the user to select the specific attribute they want to bind (e.g.,
alt
). - The second select control labeled "SOURCE" lets the user choose the data source for the selected attribute (e.g.,
Post title
).
- The first select control labeled "ATTRIBUTE" allows the user to select the specific attribute they want to bind (e.g.,
- The available options in these select controls are dynamically displayed based on the current context and available data sources.
- In the "ADD ATTRIBUTE" modal, the user sees two SelectControls:
-
Confirming the Addition:
- After selecting the desired attribute and source, the user clicks the "Add" button to confirm and add the attribute to the block.
-
Managing Attributes:
- Once an attribute is added, it appears in the "Attributes" section, showing the binding between the attribute and the source.
- When the user hovers over an added attribute, a trash icon is displayed, allowing the user to delete the attribute if needed.
If the user wants to edit an existing attribute, they can click on the attribute, which opens the "EDIT ATTRIBUTE" modal, allowing them to modify the attribute and source selections.
I'd love to hear your thoughts or feedback on this!
from gutenberg.
@seifeldinio this looks very promising, thank you for exploring. This is good use of the ItemGroup system, and seems intuitive to use. Nitpick I'd replace the red trash shortcut with a black minus symbol for "reset", as that's a pattern explored for other cases too:
Otherwise, this could work. What do you think, @artemiomorales @SantosGuillamot? CC: @WordPress/gutenberg-design
from gutenberg.
I like that approach, but it could get unwieldy when we throw custom fields into the mix. Additionally, the side-by-side layout in both explorations may break on languages like German, Icelandic, or Polish where the words tend to be longer.
Can we simplify and use two separate dropdowns instead?
For editing connections, we'd use a UI similar to Bits.
Some sources may have additional settings, like a fallback for images or format and a locale for date or text, so it may make sense to surface that in the popover panel.
Then, users could click the pencil button to open a list of sources and custom fields to change the source. If they wanted to change the attribute, they'd remove the current one and add it again.
from gutenberg.
Additional settings is a good argument for the popover. Further obfuscating edit-ability behind the pencil icon inside the popover seems to be unnecessarily adding extra clicks though. I wonder if we could present that UI immediately.
I'm leaning more towards using the toolspanel UI for managing attributes,
- It already exists and is familiar.
- It circumvents the need to check for compatibility when presenting the two selects.
- Provides a way to reset to the globally-specific default.
from gutenberg.
The accordion may make the popover grow awkwardly long for some attributes.
I wonder if we could use tabs instead?
from gutenberg.
I wonder if we could use tabs instead?
I like the tabs approach as it doesn’t overwhelm users with too many options at once (progressive disclosure).
To maintain consistency, we can implement the same tabs in the add functionality. And to prevent errors and empty selections, the source value should default to the first available option in the select menu.
This approach ensures consistency with the edit functionality as well.
If an attribute doesn’t have settings, we can disable the settings tab or remove the tabs altogether for that specific attribute.
For scalability, in cases where there are many attributes (a dozen or more), we can group them into chunks of up to 7 items and provide options to show all or show fewer items.
Alternatively, the "show all" button can open a modal to search and manage all attributes.
from gutenberg.
@jasmussen Would it be possible to get a new design for the most recent attributes panel that includes buttons to add/remove the bindings? It seems the caret interferes with the plus icon and so the original design from #61404 may need to be revised.
from gutenberg.
We should include buttons to add and remove bindings
Question: should users be able to also edit an existing binding? For example, I want to connect a paragraph content to another meta. With the current design, I should first remove the current binding, then add a new one.
Also, as mentioned in #61404 (comment), considering this UI will need to provide the ability to add, remove, edit, I'd think it will need more space. I'm not sure the editing UI should be in the inspector panel and I'd consider a modal dialog.
from gutenberg.
should users be able to also edit an existing binding?
I totally agree users should be able to edit the existing binding. I believe it would be expected.
There have been a few explorations like the following one to add something like a modal:
UI.demo.mp4
(I stole the demo from this comment containing other videos)
Do you think something like that could work? It feels like moving to the left of the inspector controls could give us the necessary space. What do you think?
from gutenberg.
What do you think?
Honestly, I don't know 😅 I'd probably start from some questions first:
- What kind of users it is epexcted to use this feature the most? Low tech-savvy users? Professionals who manage their customers' websites? Agencies? Developers?
- How often it is expected users will add/edit/remove connected attributes? Is it a 'set once and forget' action or it is expected they will edit often?
- Should the changes be immediately reflected and visible in the editor? If yes, this would not allow to use a big modal dialog.
- Should the UI be unique for all the actions of maybe it could be split in two flows? Similarly to the Fonts management where:
- A big modal dialog is used to add / edit / remove.
- Another UI is used to actually set the font.
I'm just brainstorming ideas but maybe a big modal dialog to 'Manage connected attributes' and a separate UI like the filtering popover in the video above to actually set a source would be worth exploring.
from gutenberg.
Nice work. I had a couple of quick thoughts, feel free to disregard.
- With two select controls, how do we ensure compatibility between attribute and source, IE stop users setting
post title
for an imagesrc
? - Do we absolutely need to use the popover? Wondering if we can make source editing a single-click exercise rather than two-click.
- Would it make sense to use the Tools Panel UI for adding attributes? This would provide a reset affordance (thinking about attributes that might be set globally).
Here's a quick mockup exploring the points above:
attributes.mp4
from gutenberg.
I see your point, but I'm still concerned about scalability. An image block may only have two attributes, but there may be blocks with a dozen or more. As far as I know, the toolspanel UI doesn't support search and may not handle such a long list well.
We'd also have to figure out the default source for each attribute because otherwise, users would create an "empty" option and would have to click it to select a value. In other instances where the toolspanel UI is used, settings usually have default values, e.g., font size or style.
from gutenberg.
but there may be blocks with a dozen or more
Do you have some examples? The toolspanel scales reasonably well, but can always be improved for benefits across.
Will all attribute sources have settings? IF not maybe they could be a separate UI.
from gutenberg.
replace the red trash shortcut with a black minus symbol for "reset", as that's a pattern explored for other cases too:
I'm not sure I understand this pattern. When a a control deletes an object, most applications around use the trash icon to visually represent the delete action. It's so popular at the point it's basically an industry standard. Why using a minus symbol instead? How that helps users in any way?
from gutenberg.
It's added using the plus, so the minus removes it.
from gutenberg.
Updated #62880 with a POC.
It is using toolspanel.
Screen.Recording.2024-07-09.at.18.39.55.mov
from gutenberg.
Do you have some examples? The toolspanel scales reasonably well, but can always be improved for benefits across.
I can't think of anything that'd have more than 4 or 5 attributes, so the tools panel may work well indeed. Here's the updated design.
Will all attribute sources have settings? IF not maybe they could be a separate UI.
I guess so. We should let users specify a fallback for every attribute. For text-based attributes, it'd be plain text or another source. For images and other media, it'd be a file picked from the library. This would enable WooCommerce theme builders to set up a product grid that defaults to a product's Featured Image but displays a customizable placeholder image if a product doesn't have any pics yet.
In case of custom fields or attributes that may not have a fallback for some reason, we could hide the tabs and display just the form.
from gutenberg.
Related Issues (20)
- [Data View - Detail Panel]: Site Editor - Page view: implements all the view/edit controls for the Page view HOT 1
- Performance Issue when overview of many templates as a grid is displayed
- Option to save the type of view under Appearance > Editor > Templates
- [Site Logo] Previous theme's site_logo renders instead of current custom_logo (when switching themes) HOT 1
- Button groups in Typography tools should use ToggleGroupControl HOT 2
- Query Loop: Make users aware that Query Loop might be overriding "Posts per page" setting
- List view: Show placeholder material when a block is in placeholder state HOT 3
- Plugin Blocks: Consider showing source in Advanced panel HOT 13
- Archives Block : "Show label" hide should hide Typography size option too
- `RangeControl`: add size prop HOT 2
- WP 6.6.1 bug: Autocompleter (slash command, "/") doesn't respect allowedBlocks HOT 1
- Improve text color discoverability by using the industry name "Text color" and the "A" icon HOT 2
- Inconsistent block selection from less than ideal dark-theme-focus HOT 1
- `RangeControl`, `SpacingSizesControl`: Consolidate mark styling HOT 2
- DataViews: Make un-selectable gallery items clearly not selectable in bulk edit
- DataViews: When bulk selecting, allow media selection to toggle bulk selection
- Make it clearer when endpoints modify the entity they're saving
- Append ellipses (...) to menu actions that require subsequent steps to complete HOT 1
- Cannot run React MUI - TypeError: can't access property "jsx", H is undefined
- Use the Query title block to display a "Blog" title on any template
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gutenberg.