Last active
May 10, 2019 16:23
-
-
Save jrtashjian/a04f4e14e3cd3b6d48157ea0706114f7 to your computer and use it in GitHub Desktop.
Selecting and Dispatching with the Data Module • https://getwithgutenberg.com/2019/05/selecting-and-dispatching-with-the-data-store/
This file contains 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
<?php | |
wp_register_script( | |
'gwg-block', | |
GWG_ESNEXT_PLUGIN_URL . 'block.build.js', | |
[ 'wp-blocks', 'wp-i18n', 'wp-data', 'wp-compose' ], | |
GWG_ESNEXT_VERSION, | |
true // Enqueue script in the footer. | |
); |
This file contains 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
const { __ } = wp.i18n; | |
const { registerBlockType } = wp.blocks; | |
const { compose } = wp.compose; | |
const { withSelect, withDispatch } = wp.data; | |
const MyComponentBase = ({ createNotice, blocks, className }) => { | |
const triggerNotice = (type) => { | |
createNotice(type, __('Hello, Notices Data!', 'gwg')); | |
} | |
return ( | |
<div className={className}> | |
<p>{__('Functional Component', 'gwg')}</p> | |
<ul> | |
<li><a onClick={() => triggerNotice('info')}>Trigger info notice</a></li> | |
<li><a onClick={() => triggerNotice('error')}>Trigger error notice</a></li> | |
<li><a onClick={() => triggerNotice('warning')}>Trigger warning notice</a></li> | |
<li><a onClick={() => triggerNotice('success')}>Trigger success notice</a></li> | |
</ul> | |
<ul> | |
{blocks.map(block => <li>{block.name}</li>)} | |
</ul> | |
</div> | |
); | |
} |
This file contains 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
// Variable deconstruction. | |
({ createNotice, blocks, className }) => {} | |
// Alternative. | |
(params) => { | |
const { createNotice, blocks, className } = params; | |
} |
This file contains 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
const triggerNotice = (type) => { | |
createNotice(type, __('Hello, Notices Data!', 'gwg')); | |
} | |
return ( | |
<ul> | |
<li><a onClick={() => triggerNotice('info')}>Trigger info notice</a></li> | |
</ul> | |
); |
This file contains 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
return ( | |
<ul> | |
{blocks.map(block => <li>{block.name}</li>)} | |
</ul> | |
); |
This file contains 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
const applyWithSelect = withSelect(select => { | |
const { getBlocks } = select('core/editor'); | |
return { blocks: getBlocks() }; | |
}); | |
const applyWithDispatch = withDispatch(dispatch => { | |
return { createNotice } = dispatch('core/notices'); | |
}); |
This file contains 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
const MyComponent = compose( | |
applyWithSelect, | |
applyWithDispatch, | |
)(MyComponentBase); | |
registerBlockType('gwg/esnext-data', { | |
title: __('Get With Gutenberg - ESNext Data', 'gwg'), | |
category: 'common', | |
edit(props) { | |
return <MyComponent {...props} />; | |
}, | |
save(props) { | |
return <p className={props.className}>{__('Hello saved content.', 'gwg')}</p>; | |
}, | |
}); |
This file contains 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
const applyWithDispatch = withDispatch(dispatch => { | |
const { createNotice } = dispatch('core/notices'); | |
return { createNotice: createNotice }; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment