Merge pull request #8 from 10up/feature/custom-appenders

Add CustomBlockAppender.

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.vscode

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}) => {
+	<InnerBlocks
+		renderAppender={() => (
+			<CustomBlockAppender
+				className="custom-classname"
+				rootClientId={clientId}
+				icon="heavy-plus"
+				isTertiary
+				showTooltip
+				label={__('Insert Accordion content', '10up-block-library')}
+			/>
+		)}
+	/>
+}
+```
+
+#### 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.

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 (
+		<Inserter
+			isAppender
+			rootClientId={rootClientId}
+			renderToggle={({ onToggle, disabled }) => (
+				<Fragment>
+					<Button
+						className={`tenup-${className}`}
+						onClick={onToggle}
+						disabled={disabled}
+						icon={icon}
+						{...buttonProps}
+					>
+						{buttonText}
+					</Button>
+				</Fragment>
+			)}
+		/>
+	);
+};
+
+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;

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';