Skip to content

Instantly share code, notes, and snippets.

@jrtashjian
Last active May 10, 2019 16:23
Show Gist options
  • Save jrtashjian/a04f4e14e3cd3b6d48157ea0706114f7 to your computer and use it in GitHub Desktop.
Save jrtashjian/a04f4e14e3cd3b6d48157ea0706114f7 to your computer and use it in GitHub Desktop.
<?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.
);
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>
);
}
// Variable deconstruction.
({ createNotice, blocks, className }) => {}
// Alternative.
(params) => {
const { createNotice, blocks, className } = params;
}
const triggerNotice = (type) => {
createNotice(type, __('Hello, Notices Data!', 'gwg'));
}
return (
<ul>
<li><a onClick={() => triggerNotice('info')}>Trigger info notice</a></li>
</ul>
);
return (
<ul>
{blocks.map(block => <li>{block.name}</li>)}
</ul>
);
const applyWithSelect = withSelect(select => {
const { getBlocks } = select('core/editor');
return { blocks: getBlocks() };
});
const applyWithDispatch = withDispatch(dispatch => {
return { createNotice } = dispatch('core/notices');
});
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>;
},
});
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