Question: Modal with Interactivity API #63907
Replies: 3 comments 8 replies
|
It's about what works best for you, but it's true that for the
|
|
I'm currently looking at developing a modal block and am keen to implement using the HTMLDialogElement |
|
at the moment.. literally a moment ago; I has some success using a // file:./render.php <aside data-wp-interactive="acme-dialog" <?php echo \wp_interactivity_data_wp_context(['isOpen' => false]); ?> >
<dialog data-wp-watch="callbacks.openModal" <?php echo \get_block_wrapper_attributes(); ?> >
<form method="dialog">
<button type="submit" data-wp-on-async--click="actions.toggle">close</button>
</form>
<div>
<?php echo $content; ?><!-- innerblocks -->
</div>
</dialog>
<button data-wp-on-async--click="actions.toggle">open</button>
</aside>// file:./view.js import { store, getContext, getElement } from '@wordpress/interactivity';
const { state } = store( "acme-dialog", {
state: {
get isOpen()
{
const context: { isOpen: boolean; } = getContext();
return context.isOpen;
},
},
actions: {
toggle: ( event: React.ChangeEvent<HTMLInputElement> ) =>
{
const context: any = getContext();
context.isOpen = !context.isOpen;
}
},
callbacks: {
openModal: () =>
{
// const { isOpen, targetId }: { isOpen: boolean; targetId: string; } = getContext();
// const { ref }: { ref: HTMLDialogElement; } = getElement(); // @todo #12 typescript incompat issue ref: HTMLElement type
const { ref }: { ref: any; } = getElement();
if ( state.isOpen )
{
ref?.showModal();
}
},
},
} );the callback |
|
oh..the edit function uses the HTMLelement // fn Edit() {
const [ isOpen, setIsOpen ] = useState( false );
return ( // ...
{ isOpen && (
<dialog { ...blockProps } open={ isOpen }>
<form method="dialog">
<Flex className={ `${ className }__header` }>
// ...
<Button onClick={ (): void => setIsOpen( !isOpen ) }
// ...
) |
It is correct since it is a declarative way to subscribe to a state, linking it to a modification of the DOM. You can also close it with the same callback. const { state } = store('acme-dialog', {
callbacks: {
controlModal() {
const { ref } = getElement();
if (state.isOpen) {
ref?.showModal();
} else {
ref?.close();
}
},
},
}); |
|
Thank you. Appreciate you taking the time to respond and assuage my doubt. I must add the interactivity API is well thought out and surprisingly simple to interact with. |
|
Thanks 🙂 |
|
@luisherranz A little off-topic, but if I were going to write a modal, how viable do you think it is to re-use parts of the image block iAPI? Or would it be best to duplicate everything? I am specifically think about the opening/closing/focus/styling of the overlay itself and not necessarily the content. |
|
For now, I would duplicate everything. In the future, if we see that this is a specific pattern, we can provide an abstraction to make it very easy to create accessible modals with the Interactivity API. |
|
Thank you Luis! |
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Looking to build a modal block with the interactivity api but want to know what’s the best way to approach it? How would you guys structure it?
As I see it, to make a modal I have a couple options. Create (2) blocks. One block would controls (items that can be clicked to change state, etc.) and the other block to listen for changes in the state of the block above and structures the modal that will be placed in the footer.
Or create one block. Then inject the modal markup with directives and hook it to the wp_footer (with hooks) and show based off of the state. If that makes sense?
Or do you guys have any other ideas how this could be implemented with the IAPI?
Thanks for any feedback!
All reactions