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
|
Beta Was this translation helpful? Give feedback.
-
|
I'm currently looking at developing a modal block and am keen to implement using the HTMLDialogElement |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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 ) }
// ...
) |
Beta Was this translation helpful? Give feedback.
-
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();
}
},
},
}); |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you Luis! |
Beta Was this translation helpful? Give feedback.
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!
Beta Was this translation helpful? Give feedback.
All reactions