search

collective / volto-hydra

A volto addon to let you edit content in realtime when you have many frontends written in any framework
1 stars 2 forks source link

Select Block from iframe and its config appear in sidebar #51

Closed MAX-786 closed 3 months ago

MAX-786 commented 3 months ago

Fixes #23

I am thinking to use volto's block engine to render these blocks behind the iframe and set the selected prop based on the block clicked in iframe.

I setup a redux state 'selectedBlock', so that whenever a block is clicked which have an attribute 'data-block-uid={}', it will dispatch a action and its uid is stored in selectedBlock.

First, hide the Edit Form by setting it's display to none so that iframe is shown inplace of blocks. So we can still use the Edit component to open block's settings. Then, In Block Edit component, use the redux state 'selectedBlock' which contains 'uid' of a clicked block. We need to find a way to set this.props.seletected to true whenever this.state.selectedBlock.uid matches with this.props.id.

MAX-786 commented 3 months ago

I am thinking to use volto's block engine to render these blocks behind the iframe and set the selected prop based on the block clicked in iframe.

AFAIK See This BlocksForm renders the blocks in Volto and Block Edit component handles displaying the selected block's settings in the sidebar. So to update Sidebar, what if we use This Block Edit Component to set this.props.selected to true whenever this.state.selectedBlock.uid matches with this.props.id.

JeffersonBledsoe commented 3 months ago

I am thinking to use volto's block engine to render these blocks behind the iframe and set the selected prop based on the block clicked in iframe.

AFAIK See This BlocksForm renders the blocks in Volto and Block Edit component handles displaying the selected block's settings in the sidebar. So to update Sidebar, what if we use This Block Edit Component to set this.props.selected to true whenever this.state.selectedBlock.uid matches with this.props.id.

As discussed in this weeks sprint planning, this works fine as all of the sidebar updating logic is kept in this component. As long as the actual rendering of the block is disabled (and any other potential side-effects the component may have), it should be fine to re-use this component for now. An argument could be made that this logic should be split up and moved to another file in core Volto.

MAX-786 commented 3 months ago

are you removing enableBlockClickListener() later or now?

done

JeffersonBledsoe commented 3 months ago

@MAX-786 It's a little difficult to see what's changed in the Edit shadow, but I think it's all good apart from the few comments I left

If you have the time, it would be great if you could make a PR to core Volto with the setSelectedBlock changes!

MAX-786 commented 3 months ago

@MAX-786 It's a little difficult to see what's changed in the Edit shadow, but I think it's all good apart from the few comments I left

nothing major. let me point them out

JeffersonBledsoe commented 3 months ago

@MAX-786 All fine on the changes in the Edit shadow then. I've merged #49 into main and brought the changes into this PR. Can you check this PR over again with your frontend and fix up the comments I'd left please all good? We're good to use the GitHub Squash & Merge then as I resolved the conflicts with the other branches

MAX-786 commented 3 months ago

fix up the comments I'd left please all good? We're good to use the GitHub Squash & Merge then as I resolved the conflicts with the other branches

Yep I'll fix them up right now, u mean the previous ones tho, right?

JeffersonBledsoe commented 3 months ago

@MAX-786 Yes, I've merged the changes from #49 into this one (and also into #60 )

MAX-786 commented 3 months ago

@djay @JeffersonBledsoe LGTM!