Question: Modal with Interactivity API #63907
Replies: 2 comments 6 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.
-
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