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 e2d79068..c7777a7c 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,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..f2359d71 --- /dev/null +++ b/components/CustomBlockAppender/index.js @@ -0,0 +1,70 @@ +/* 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, + className = 'custom-block-appender', + ...buttonProps +}) => { + return ( + ( + + + + )} + /> + ); +}; + +CustomBlockAppender.propTypes = { + rootClientId: PropTypes.string.isRequired, + 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; diff --git a/index.js b/index.js index f6b71fd1..6b86ae0b 100644 --- a/index.js +++ b/index.js @@ -2,3 +2,4 @@ export { ContentPicker } from './components/ContentPicker'; export { ContentSearch } from './components/ContentSearch'; export { IsAdmin } from './components/is-admin'; export { useHasSelectedInnerBlock } from './hooks/use-has-selected-inner-block'; +export { default as CustomBlockAppender } from './components/CustomBlockAppender';