Overview
In #3484666: Show configuration forms for Block components we enabled block component settings forms in the UI, but they are not yet functional. This issue exists to complete that work and make block settings changes in the UI propagate to the back end including data storage and preview.
Block components have no slots props, but they can have "block settings". These are used to configure the block and (in most cases) affect its output in some way. Examples are the number of levels of hierarchy to show in a menu block, or checkboxes to control which elements are displayed in the site branding block.
Block settings are similar to, but not the same as, SDC props.
Proposed resolution
?
User interface changes
Issue fork experience_builder-3491978
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
wim leersThis needs #3484666: Show configuration forms for Block components to land first.
Comment #3
larowlanThere is work in #3467954: META: Evolve XB UI's data model to allow non-SDC components' inputs, DynamicPropSource support, etc. that will make this easier. Should we postpone on that too?
Comment #4
wim leersI'm not opposed to that at all, but @longwave, @jessebaker and others felt that #3467954: META: Evolve XB UI's data model to allow non-SDC components' inputs, DynamicPropSource support, etc. was too broad in scope to be actionable. If you managed to act on it anyway, all the better! 😄
Comment #5
wim leers#3484666: Show configuration forms for Block components landed!
Also, https://git.drupalcode.org/project/experience_builder/-/merge_requests/3...
Comment #7
longwaveI learned enough React to be able to hack something together here that seems to work. Block settings are a hybrid of SDC component forms (as they update the model) and page data forms (as they use standard Drupal forms), I think inputBehaviors needs some more refactoring to figure this out to how split this up in a better way.
Comment #8
larowlanRan out of time today, but compared the component inputs form HOC against the block one and I think we should be able to make them one and the same. Because the form state and these input behaviours are locked up in the compiled FE build, any deviation that is per source component is going to make things difficult for contrib (and a layout builder/paragraphs BC layer).
Ideally we can leverage the SimpleComponent/SDCComponent differentiation in #3493941 and then defer any other nuance between Source plugins to pure PHP. That leaves the door open for Layout plugins (LB), paragraph plugin and anything else from contrib
Comment #9
wim leersPer @larowlan's latest MR comment.
Comment #10
longwaveBeen going back and forth to try and figure out the best way forward here. The problem is that the SDC version of the form presents field widgets, and these have keys from field widgets, e.g.
heading[0][value], which we then map into props. Block forms (and any other non-widget form I guess) just has plain keys, e.g.level. But we can't make assumptions, because there might be complex block forms that have structures that look a bit like widget forms, but aren't - so we do need to distinguish between them somehow - but right now these Form API structures have specific assumptions made about them.As far as I know there is no requirement to have block forms have dynamic props, we can assume static values. But not sure about other component source plugins, they might still want to support dynamic props?
Comment #11
larowlanIn https://git.drupalcode.org/project/experience_builder/-/merge_requests/448 I've tried to remove those assumption - but it will likely need to come back in some form by way of transforms in #3467954: META: Evolve XB UI's data model to allow non-SDC components' inputs, DynamicPropSource support, etc. but ideally it can be controlled from PHP
For #3487484: Save page data form values in application state with support for undo/redo we were able to remove the knowledge of that nesting and let Drupal sort it out - i.e. we store the page values keyed by the name attribute for their respective input (e.g. 'title[0][value]' and then that is transformed back into the nested format Drupal side.
Comment #12
larowlanFollow up to address re-unification #3500152: Remove InputBehaviorsBlockSettingsForm and consolidate with input components form
Comment #13
longwaveIt's green!
Comment #14
larowlanThis looks ready to me in its current form. There's a followup for the reunification.
Comment #15
wim leers(Emphasis mine.)
The preview part is working.
The storage part is not. It's only auto-saving (to ephemeral storage), not really saving (to an XB field or the
PageTemplate). Which means it's not really stored, nor passing validation.Besides that, I am concerned about:
supportsPropertiesandsupportsDynamicProperties: https://git.drupalcode.org/project/experience_builder/-/merge_requests/5...Perhaps it's worth meeting on Monday morning about this, @longwave, to figure out the naming and docs? Happy to write those together!
Comment #16
effulgentsia commentedHow are you determining that without #3497530: Implement the "Publish All" button being done? Are you testing the publish step some other way?
Comment #17
wim leersIDK who/when/where this happened but there still is a “Publish” button next to thr “Review changes” dropdown 😅🙈
Comment #18
effulgentsia commentedOh, right, I forgot that button was still there. So originally, that button implemented direct-to-entity-save (without going through autosave), so that we could work on issues having to do with saving entities in parallel with figuring out how we wanted to handle autosaving.
Once we got autosaving working, I think we opened an issue to change this Publish button to not send the entity data in the request body, but instead to just send the autosave key (or the info needed to figure out the autosave key), and the server-side controller to save from the corresponding autosaved data instead of from the request body. However, I forget if we completed that issue.
So, if that is in fact how the Publish button now works, then I do think it makes sense, as either part of this issue or as a followup that can proceed right after this issue is merged, to make sure that block settings get validated and transferred correctly from the autosave data to an entity revision. Because presumably the work to do that would be exactly the same as what will get triggered by the "Publish All" button once that's in.
However, if the Publish button is still working the old way where it's publishing from the request body rather than the autosave data, then I don't think it makes sense to make that old way work with block settings. Because once the "Publish All" button is in, we'll remove the "Publish" button.
Comment #19
effulgentsia commentedUp until now, the XB team has been following a pseudo-scrum/pseudo-kanban process, but we're now shifting into more conventional scrum. We started a new 2-week sprint last Thursday (Jan 16). I'm tagging our current sprint's issues for visibility.
Comment #20
larowlanI've renamed the methods/attribute properties and documented them as follows:
And the protected methods on the tree data-type are now
componentHasExplicitInputandcomponentHasEvaluatedInputI've also added an e2e test and for clicking publish with a block in the body and expanded test coverage in the client conversion test to ensure this is supported both for nodes and patterns.
Looking into the last open item regarding validation now.
Comment #21
larowlanThis is ready for another look.
I think we also should consider a general followup to revisit some more uses of 'props' in the codebase including ComponentPropsValues in typed data. I'm happy to keep going on renames here, but it feels like we're getting into out of scope territory and making it harder to review this issue.
Comment #22
longwaveI think @larowlan's suggested renaming/refactors can be done in followups, but added a minor refactoring of my own to make the JS easier to follow and added some questions/suggestions.
Comment #23
wim leers#21: #3494859: Rename Component config ComponentSource plugin-specific configuration keys for clarity fixed some of those "props" in the codebase :)
This MR is now looking way better than on Friday. I wanted to review+RTBC+merge, but @longwave's remarks alongside my own observations make me conclude that this is not yet ready to be merged. Two critical comments that I'm curious what y'all think about:
+1 for renaming
ComponentPropsValuesin a follow-up issue. Or … perhaps it actually would make help this issue simpler?AFAICT the #1 thing slowing us down here is XB's SDC-centric naming of low-level infrastructure. If that were refactored away first, it'd allow us to land this MR with more clarity and confidence?
Unless I see comments articulating strongly why not to do that, that's where I'll start my day tomorrow: refactor away the pervasive "props" and "prop sources" in the XB field type. I think that will clear things up a lot.
Comment #24
larowlanAdded #3500994: Remove references to 'props' outside of SDC - use 'inputs' instead for the rename
Comment #25
longwaveFixed the failing test, added a minor comment based on an MR comment, otherwise no further feedback on this - I think it's ready to go.
Comment #26
wim leersI'd like to do the final pass on this; this is the most important/impactful MR of the month AFAICT!
Comment #27
wim leers/ui: https://git.drupalcode.org/project/experience_builder/-/merge_requests/5... points out that #3493941: Maintain a per-component set of prop expressions/sources will rewrite most of those things; so changes in that area are basically fine to ignore — they're in service of achieving this issue's goal, they're not aiming to nail long-term code patterns.XBTestSetupwas pre-placing aBlockcomponent, which concealed the fact that the initial block plugin settings are missing. Details: https://git.drupalcode.org/project/experience_builder/-/merge_requests/5.... Fixed in https://git.drupalcode.org/project/experience_builder/-/merge_requests/5..../docs/*at all. I didn't want to hold it up on that though, so I did a rough first pass that leaves us in a better place than if we'd merged this MR as it was, but we'll need to gradually tackle updating/docs/data-model.md, probably starting with #3500994: Remove references to 'props' outside of SDC - use 'inputs' instead — after that is done, an overhaul becomes much simpler.Please don't think I'm downplaying the quality of this MR. This MR is a huge leap forward! 🤩🥳 But in doing so, I wanted to make sure we kept our eyes aimed at a tighter API surface, a more precise definition of how XB works with components coming from various sources, etc. Because #3499919: [Meta] Plan for in-browser code components is being worked on right now, and will introduce a third component type very soon!
All subsequent refactoring for which this MR surfaces the necessity:
component propin/docs/*, and possibly also mark ADR#2 as superseded and write a new one. This issue did the heavy lifting, but without that rename, all docs will remain confusing anyway.Comment #29
wim leersComment #30
wim leersNote that most of the issues at the bottom of #27
are essentially a subset of what we'll need for #3467954 — see #3467954-55: META: Evolve XB UI's data model to allow non-SDC components' inputs, DynamicPropSource support, etc. for an overview of what AFAICT are the immediate next steps.— nope, that issue is for the client-side data model, #27 is focused on the server-side data model not being coupled to SDC!I'll work on bringing clarity to this.
Comment #31
wim leers@longwave and I discussed this, and we recalled that #3500152-3: Remove InputBehaviorsBlockSettingsForm and consolidate with input components form is the one he identified as a critical refactoring to pave the path for #3499919: [Meta] Plan for in-browser code components.
Comment #32
wim leersOne more follow-up: #3501708: Prove that it *will* be possible to apply block settings update paths (assuming #3521221 in core) to stored XB component trees in config/content.
Comment #33
larowlanBug for something we missed here #3501870: Block form state not cleared when component is changed
Comment #34
wim leersFixed :)
Comment #35
effulgentsia commented