Merge branch 'main' into dependabot/npm_and_yarn/eslint-8.38.0

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
 		Backbone: 'readonly',
 		jQuery: 'readonly',
 		wp: 'readonly',
+		React: true,
 	},
 	rules: {
 		'arrow-parens': 'off',

CONTRIBUTING.md

@@ -52,3 +52,12 @@ To do this, run:
 ```shell
 npm run start
 ```
+
+### Releasing a new version
+
+Note: You will need to have publishing access to the package on npmjs.com in order to release a new version..
+
+* Check out main branch and ensure no local changes: `git checkout main && git reset origin/main --hard`
+* Bump version: `npm version major|minor|patch`. This updates the version in the package.json, runs build script, commits changes and creates a tag from the commit.
+* Push changes: `git push --follow-tags`
+* Publish to NPM: `npm publish`

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@humanmade/block-editor-components",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "Reusable components, hooks and helper functions for the WordPress block editor(s).",
 	"keywords": [
 		"block editor",
@@ -20,7 +20,8 @@
 		"build": "webpack",
 		"start": "webpack watch --mode development",
 		"lint": "eslint .",
-		"test": "jest"
+		"test": "jest",
+		"version": "npm run build && git add -f dist/"
 	},
 	"devDependencies": {
 		"@babel/plugin-proposal-class-properties": "^7.18.6",

src/components/GenericServerSideEdit/README.md

@@ -0,0 +1,81 @@
+# GenericServerSideEdit
+
+The `GenericServerSideEdit` component is a generic block edit component that uses server side rendering to display content.
+
+## Usage
+
+For a minimum working setup, all you need to do is import the `GenericServerSideEdit` component and assign it as the `edit` parameter when registering a block:
+
+```js
+import { registerBlockType } from '@wordpress/blocks';
+
+import blockMetadata from './block.json';
+import GenericServerSideEdit from '@humanmade/block-editor-components';
+
+registerBlockType( blockMetadata, {
+	edit: GenericServerSideEdit,
+} );
+
+```
+
+Optionally, you can use it inside an edit component with inspector controls via a fragment like this:
+
+```js
+import { Panel, PanelBody } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+import GenericServerSideEdit from '@humanmade/block-editor-components';
+
+/**
+ * Render the editor interface.
+ *
+ * @returns {import('react').ReactNode} Rendered editorial UI.
+ */
+export default function Edit( { attributes, context, setAttributes } ) {
+	return <>
+		<InspectorControls>
+			<Panel>
+				<PanelBody
+					title={ __( 'Panel Title', 'mytextdomain' ) }
+				>
+					<p>{ __( 'Panel Content', 'mytextdomain' ) }</p>
+				</PanelBody>
+			</Panel>
+		</InspectorControls>
+		<GenericServerSideEdit
+			name="my/blockname"
+			attributes={ attributes }
+			context={ context }
+		/>
+	</>;
+}
+```
+
+## Props
+
+These props with the exception of `inspectorControls` are the same props provided to edit components.
+
+### `name`
+
+The name of the block being rendered.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `string`                             | yes                                  | `undefined`                          |
+
+### `attributes`
+
+The block attributes to use
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `object`                             | yes                                  | `null`                               |
+
+### `context`
+
+Necessary for context aware blocks, currently supports the `post_id` context if available.
+
+| Type                                 | Required                             | Default                              |
+|--------------------------------------|--------------------------------------|--------------------------------------|
+| `object`                             | no                                   | `null`                               |

src/components/GenericServerSideEdit/index.js

@@ -0,0 +1,47 @@
+import { useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import ServerSideRender from '@wordpress/server-side-render';
+
+/**
+ * Renders the block edit interface using server side rendering.
+ *
+ * @param {object} props Block props
+ * @param {object} props.attributes block attributes
+ * @param {object} props.context block context data
+ * @param {string} props.name name of block
+ * @returns {React.ReactNode} Rendered editorial UI.
+ */
+function GenericServerSideEdit( { attributes, context, name } ) {
+
+	/**
+	 * A generic empty response component that uses the standard wp-block-name class
+	 * for when an empty value is returned by the API.
+	 *
+	 * @returns {React.ReactNode} block rendered as empty component.
+	 */
+	const emptyResponse = () => {
+		return (
+			<div className={ `wp-block-${ name.replace( '/', '-' ) }` } >
+				{ name } { __( 'Block rendered as empty.' ) }
+			</div>
+		);
+	};
+
+	return (
+		<div { ...useBlockProps() }>
+			<Disabled>
+				<ServerSideRender
+					attributes={ attributes }
+					block={ name }
+					EmptyResponsePlaceholder={ emptyResponse }
+					urlQueryArgs={
+						( typeof context === 'object' && Object.hasOwn( context, 'postId' ) ) ? { post_id: context.postId } : {}
+					}
+				/>
+			</Disabled>
+		</div>
+	);
+}
+
+export default GenericServerSideEdit;

src/components/InnerBlockSlider/index.js

@@ -15,7 +15,7 @@ import Navigation from './navigation';
  * @param {string} props.allowedBlock  Allowed block type.
  * @param {Array}  props.template      Initial block template.
  * @param {number} props.slideLimit    Maximum allowed slides.
- * @returns {import('react').ReactNode} Component.
+ * @returns {React.ReactNode} Component.
  */
 const InnerBlockSlider = ( {
 	parentBlockId,

src/components/InnerBlockSlider/inner-block-single-display.js

@@ -6,15 +6,15 @@ import { useInnerBlocksProps } from '@wordpress/block-editor';
 /**
  * InnerBlockSlider component.
  *
- * @param {object}            props                  Component props.
- * @param {string}            props.parentBlockId    Parent block clientId.
- * @param {string}            props.allowedBlocks    Allowed block types. See InnerBlocks.
- * @param {Array}             props.template         Initial block template. See InnerBlocks.
- * @param {boolean}           props.currentItemIndex Current Item
- * @param {boolean}           props.className        Class name.
- * @param {boolean|ReactNode} props.renderAppender   Appender.
- * @param {boolean}           props.captureToolbars  Passed through to inner block props.
- * @returns {import('react').ReactNode} Component.
+ * @param {object}                  props                  Component props.
+ * @param {string}                  props.parentBlockId    Parent block clientId.
+ * @param {string}                  props.allowedBlocks    Allowed block types. See InnerBlocks.
+ * @param {Array}                   props.template         Initial block template. See InnerBlocks.
+ * @param {boolean}                 props.currentItemIndex Current Item
+ * @param {boolean}                 props.className        Class name.
+ * @param {boolean|React.ReactNode} props.renderAppender   Appender.
+ * @param {boolean}                 props.captureToolbars  Passed through to inner block props.
+ * @returns {React.ReactNode} Component.
  */
 function InnerBlocksDisplaySingle( {
 	className,

src/components/InnerBlockSlider/navigation.js

@@ -14,7 +14,7 @@ import { Button, IconButton } from '@wordpress/components';
  * @param {boolean}  props.nextEnabled     Is Next button enabled.
  * @param {Function} props.addSlide        Add slide callback.
  * @param {boolean}  props.addSlideEnabled Is add slide button enabled.
- * @returns {import('react').ReactNode} Component.
+ * @returns {React.ReactNode} Component.
  */
 function Navigation( {
 	totalPages,

src/index.js

@@ -1,6 +1,7 @@
 export { default as ConditionalComponent } from './components/ConditionalComponent';
 export { default as FetchAllTermSelectControl } from './components/FetchAllTermSelectControl';
 export { default as FileControls } from './components/FileControls';
+export { default as GenericServerSideEdit } from './components/GenericServerSideEdit';
 export { default as ImageControl } from './components/ImageControl';
 export { default as InnerBlockSlider } from './components/InnerBlockSlider';
 export { default as LinkToolbar } from './components/LinkToolbar';