Created
October 3, 2024 14:05
-
-
Save verytwisty/7a50a075fad9f1d6b9efec36512d3942 to your computer and use it in GitHub Desktop.
Interactivity API block with keydown and keyup directives
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "$schema": "https://schemas.wp.org/trunk/block.json", | |
| "apiVersion": 3, | |
| "name": "interactivity/key-test", | |
| "version": "0.1.0", | |
| "title": "Key Test", | |
| "category": "widgets", | |
| "icon": "filter", | |
| "description": "Key Test", | |
| "supports": { | |
| "html": false, | |
| "interactivity": true | |
| }, | |
| "textdomain": "interactivity-blocks", | |
| "editorScript": "file:./index.js", | |
| "render": "file:./render.php", | |
| "viewScriptModule": "file:./view.js" | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useBlockProps } from '@wordpress/block-editor'; | |
| export default function Edit() { | |
| return <ul { ...useBlockProps() }>Interactivity Key Press Test</ul>; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { registerBlockType } from '@wordpress/blocks'; | |
| /** | |
| * Internal dependencies | |
| */ | |
| import Edit from './edit'; | |
| import metadata from './block.json'; | |
| registerBlockType( metadata.name, { | |
| /** | |
| * @see ./edit.js | |
| */ | |
| edit: Edit, | |
| /** | |
| * @see ./save.js | |
| */ | |
| save: () => null, | |
| } ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div | |
| data-wp-interactive="interactivity/key-test" | |
| data-wp-on--keydown="actions.handleKeyDown" | |
| data-wp-on--keyup="actions.handleKeyUp" | |
| <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?> | |
| > | |
| <button> | |
| Drop down Button | |
| </button> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { store } from '@wordpress/interactivity'; | |
| store( 'interactivity/key-test', { | |
| actions: { | |
| handleKeyDown( event ) { | |
| console.log( 'key down', event.key ); | |
| }, | |
| handleKeyUp( event ) { | |
| console.log( 'key up', event.key ); | |
| }, | |
| }, | |
| } ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment