From 6d3ebb6965d31813e3aab1c416bdbaeb6580ea5a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 29 Jan 2021 09:14:21 -0500 Subject: [PATCH 1/3] Add CustomBlockAppender. --- .gitignore | 3 +- README.md | 31 ++++++++++++++ components/CustomBlockAppender/index.js | 56 +++++++++++++++++++++++++ index.js | 1 + 4 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 components/CustomBlockAppender/index.js diff --git a/.gitignore b/.gitignore index b512c09d..55371e5c 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules \ No newline at end of file +node_modules +.vscode \ No newline at end of file diff --git a/README.md b/README.md index 5cfe43b8..34883f03 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,37 @@ function MyComponent( props ) { | `fallback` | `ReactElement` | `null` | Element that will be rendered if the user is no admin | | `children` | `ReactElement(s)` | `'null'` | Child components that will be rendered if the user is an Admin | + +## CustomBlockInserter +This component is passed to an `InnerBlocks` instance to as it's `renderAppender` to provide a customized button that opens the Block Inserter. + +### Usage +```js +import { CustomBlockAppender } from '@10up/block-components'; +const MyComponent = ({clientId}) => { + ( + + )} + /> +} +``` + +#### Props +| Name | Type | Default | Description | +| ---------- | ----------------- | -------- | -------------------------------------------------------------- | +| `rootClientId` | `string` | `''` | Client it of the block | +| `buttonText` | `string` | `''` | Text to display in the button | +| `icon` | `string` | `'plus'` | Icon to display. | +| `..buttonProps` | `object` | `null'` | Any other props passed are spread onto the internal Button component. | + ## Support Level **Active:** 10up is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress. Bug reports, feature requests, questions, and pull requests are welcome. diff --git a/components/CustomBlockAppender/index.js b/components/CustomBlockAppender/index.js new file mode 100644 index 00000000..c6df633a --- /dev/null +++ b/components/CustomBlockAppender/index.js @@ -0,0 +1,56 @@ +/* eslint-disable react/jsx-props-no-spreading */ +/** + * External dependencies + */ +import PropTypes from 'prop-types'; + +/** + * WordPress dependencies + */ +// eslint-disable-next-line import/no-extraneous-dependencies +import { Fragment } from '@wordpress/element'; +import { Inserter } from '@wordpress/block-editor'; +import { Button } from '@wordpress/components'; + +/** + * CustomBlockAppender. + * + * Provide a Button component to trigger the inserter. + * Any undocumented props are spread onto the Button component. + * + * @param {Object} props All props sent to this component. + * @param {string} props.rootClientId Client ID of the block where this is being used. + * @param {string} [props.buttonText] Text to display in the Button. + * @param {string} [props.icon] The icon to use. + * @return {Function} The component. + */ +const CustomBlockAppender = ({ rootClientId, buttonText, icon, ...buttonProps }) => { + return ( + ( + + + + )} + /> + ); +}; + +CustomBlockAppender.propTypes = { + rootClientId: PropTypes.string.isRequired, + buttonText: PropTypes.string, + label: PropTypes.string, + icon: PropTypes.string, +}; + +CustomBlockAppender.defaultProps = { + buttonText: '', + label: '', + icon: 'plus', +}; + +export default CustomBlockAppender; diff --git a/index.js b/index.js index 02eda9d5..6229a3d1 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,4 @@ export { ContentPicker } from './components/content-picker'; export { IsAdmin } from './components/is-admin'; export { useHasSelectedInnerBlock } from './hooks/use-has-selected-inner-block'; +export { default as CustomBlockAppender } from './components/CustomBlockAppender'; From 1c608bce6f1250943cff3301633822df685466c7 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 29 Jan 2021 10:27:15 -0500 Subject: [PATCH 2/3] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fabian Kägy --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 34883f03..dfafa49a 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,7 @@ const MyComponent = ({clientId}) => { Date: Wed, 10 Mar 2021 08:51:13 -0500 Subject: [PATCH 3/3] Name scope button classname. --- README.md | 2 +- components/CustomBlockAppender/index.js | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index dfafa49a..55bd0853 100644 --- a/README.md +++ b/README.md @@ -110,7 +110,7 @@ const MyComponent = ({clientId}) => { ( { +const CustomBlockAppender = ({ + rootClientId, + buttonText, + icon, + className = 'custom-block-appender', + ...buttonProps +}) => { return ( ( - @@ -45,12 +57,14 @@ CustomBlockAppender.propTypes = { buttonText: PropTypes.string, label: PropTypes.string, icon: PropTypes.string, + className: PropTypes.string, }; CustomBlockAppender.defaultProps = { buttonText: '', label: '', icon: 'plus', + className: 'custom-block-appender', }; export default CustomBlockAppender;