Update package.json dependencies

.circleci/config.yml

@@ -1,7 +1,8 @@
 version: 2.1
 
 orbs:
-  node: circleci/[email protected]
+  node: circleci/[email protected]
+  php: circleci/[email protected]
 
 references:
   PLUGIN_PATH: &PLUGIN_PATH
@@ -18,15 +19,6 @@ commands:
     steps:
       - run: composer remove --dev phpunit/phpunit && composer install && npm ci && npm run build
 
-  install-composer:
-    description: "Installing Composer"
-    steps:
-      - run:
-          command: |
-            php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
-            EXPECTED_SIGNATURE=$(curl -s https://composer.github.io/installer.sig)
-            ACTUAL_SIGNATURE=$(php -r "echo hash_file('sha384', 'composer-setup.php');")
-            [[ "$EXPECTED_SIGNATURE" == "$ACTUAL_SIGNATURE" ]] && sudo php composer-setup.php --install-dir=/bin --filename=composer || exit 1
   nodegit-workaround:
     description: "Ensure nodegit runs without error"
     steps:
@@ -38,8 +30,7 @@ jobs:
       name: php
     steps:
       - checkout
-      - node/install:
-          node-version: '14.18.1'
+      - node/install
       - nodegit-workaround
       - set-up-packages
       - run: npm run lint
@@ -61,8 +52,7 @@ jobs:
           MYSQL_ROOT_PASSWORD: wordpress
     steps:
       - checkout
-      - node/install:
-          node-version: '14.18.1'
+      - node/install
       - nodegit-workaround
       - run:
           name: Installing WordPress and setting up tests
@@ -88,8 +78,7 @@ jobs:
     executor: php
     steps:
       - checkout
-      - node/install:
-          node-version: '14.18.1'
+      - node/install
       - nodegit-workaround
       - run: HUSKY_SKIP_INSTALL=1 npm ci && npm run test:js -- --maxWorkers=2
 
@@ -99,16 +88,10 @@ jobs:
     steps:
       - checkout
       - run: sudo apt-get update && sudo apt-get install php php-xml
-      - install-composer
-      - node/install:
-          node-version: '14.18.1'
+      - php/install-composer
       - nodegit-workaround
       - set-up-packages
       - run: npm run wp-env start && npm run test:e2e
-      - run:
-          command: |
-            if [ -d artifacts ]; then cp -r artifacts /tmp/; fi;
-          when: on_fail
       - store_artifacts:
           path: /tmp/artifacts/
 

.eslintrc

@@ -5,7 +5,6 @@
     "plugin:import/recommended",
     "plugin:eslint-comments/recommended",
     "plugin:jsx-a11y/recommended",
-    "plugin:testing-library/recommended",
     "plugin:jest-dom/recommended",
     "plugin:react-hooks/recommended"
   ],
@@ -61,7 +60,7 @@
       ],
       "rules": {
         "jest/expect-expect": "off",
-        "jest/lowercase-name": [
+        "jest/prefer-lowercase-title": [
           "error",
           {
             "ignore": [

.stylelintrc.json

@@ -4,7 +4,6 @@
 		"at-rule-empty-line-before": null,
 		"at-rule-no-unknown": null,
 		"comment-empty-line-before": null,
-		"declaration-property-unit-whitelist": null,
 		"font-weight-notation": null,
 		"max-line-length": null,
 		"no-descending-specificity": null,

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	presets: [
+		'@wordpress/default',
+	],
+};

css/src/_color.scss

@@ -1,35 +1,28 @@
-/**
- * Colors
- *
- * The variables below are taken from Gutenberg's styling in _colors.scss.
- *
- * @see https://github.com/WordPress/gutenberg/blob/master/assets/stylesheets/_colors.scss
- */
+/* The variables below are taken from Gutenberg's styling in _colors.scss: https://github.com/WordPress/gutenberg/blob/master/assets/stylesheets/_colors.scss */
 
-// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
+/* Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp. */
 $black: #000;
 $dark-gray-900: #191e23;
 $dark-gray-800: #23282d;
 $dark-gray-700: #32373c;
 $dark-gray-600: #40464d;
-$dark-gray-500: #555d66; // Use this most of the time for dark items.
+$dark-gray-500: #555d66;
 $dark-gray-400: #606a73;
-$dark-gray-300: #6c7781; // Lightest gray that can be used for AA text contrast.
+$dark-gray-300: #6c7781;
 $dark-gray-200: #7e8993;
-$dark-gray-150: #8d96a0; // Lightest gray that can be used for AA non-text contrast.
+$dark-gray-150: #8d96a0;
 $dark-gray-100: #8f98a1;
 $light-gray-900: #a2aab2;
 $light-gray-800: #b5bcc2;
 $light-gray-700: #ccd0d4;
 $light-gray-600: #d7dade;
-$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
-$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
+$light-gray-500: #e2e4e7;
+$light-gray-400: #e8eaeb;
 $light-gray-300: #edeff0;
 $light-gray-200: #f3f4f5;
 $light-gray-100: #f8f9f9;
 $white: #fff;
 
-// Dark opacities, for use with light themes.
 $dark-opacity-900: rgba(#000510, 0.9);
 $dark-opacity-800: rgba(#00000a, 0.85);
 $dark-opacity-700: rgba(#06060b, 0.8);
@@ -48,9 +41,8 @@ $dark-opacity-light-400: rgba(#95959c, 0.2);
 $dark-opacity-light-300: rgba(#829493, 0.15);
 $dark-opacity-light-200: rgba(#8b8b96, 0.1);
 $dark-opacity-light-100: rgba(#747474, 0.05);
-$dark-opacity-background-fill: rgba($dark-gray-700, 0.7); // Similar to $dark-opacity-light-200, but more opaque.
+$dark-opacity-background-fill: rgba($dark-gray-700, 0.7);
 
-// Light opacities, for use with dark themes.
 $light-opacity-900: rgba($white, 1);
 $light-opacity-800: rgba($white, 0.9);
 $light-opacity-700: rgba($white, 0.85);
@@ -69,10 +61,8 @@ $light-opacity-light-400: rgba($white, 0.25);
 $light-opacity-light-300: rgba($white, 0.2);
 $light-opacity-light-200: rgba($white, 0.15);
 $light-opacity-light-100: rgba($white, 0.1);
-$light-opacity-background-fill: rgba($light-gray-300, 0.8);  // Similar to $light-opacity-light-200, but more opaque.
+$light-opacity-background-fill: rgba($light-gray-300, 0.8);
 
-// Additional colors.
-// Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
 $blue-wordpress-700: #00669b;
 $blue-dark-900: #0071a1;
 
@@ -88,7 +78,6 @@ $blue-medium-100: #e5f5fa;
 $blue-medium-highlight: #b3e7fe;
 $blue-medium-focus: #007cba;
 
-// Alert colors.
 $alert-yellow: #f0b849;
 $alert-red: #d94f4f;
 $alert-green: #4ab866;

css/src/editor.scss

@@ -210,7 +210,7 @@ div[class^="wp-block-genesis-custom-blocks-"],
 	}
 }
 
-// In the <ServerSideRender> display, correct an issue where <ul> and <ol> can appear outside (to the left) of their container.
+/* In the <ServerSideRender> display, correct an issue where <ul> and <ol> can appear outside (to the left) of their container. */
 .editor-styles-wrapper .genesis-custom-blocks-editor__ssr {
 	ul,
 	ol {

js/src/block-editor/components/edit.js

@@ -26,9 +26,9 @@ import { EDITOR_LOCATION } from '../../common/constants';
 /**
  * The editor component for the block.
  *
- * @param {Object} props The props of this component.
- * @param {import('../../edit-block/hooks/useBlock').Block} props.block The block.
- * @param {Object} props.blockProps The block's props.
+ * @param {Object}                                          props            The props of this component.
+ * @param {import('../../edit-block/hooks/useBlock').Block} props.block      The block.
+ * @param {Object}                                          props.blockProps The block's props.
  * @return {React.ReactElement} The editor display.
  */
 const Edit = ( { block, blockProps } ) => {
@@ -50,7 +50,7 @@ const Edit = ( { block, blockProps } ) => {
 	 * Gets whether the passed block has a selected InnerBlock.
 	 *
 	 * @param {Object} blockCandidate The block to examine for InnerBlocks.
-	 * @param {Object} selectedBlock The block that's selected in the editor.
+	 * @param {Object} selectedBlock  The block that's selected in the editor.
 	 * @return {boolean} Whether the passed block has a selected InnerBlock.
 	 */
 	const hasSelectedInnerBlock = ( blockCandidate, selectedBlock ) =>

js/src/block-editor/components/editor-form.js

@@ -18,8 +18,8 @@ import { getFieldsAsArray, getIconComponent } from '../../common/helpers';
 /**
  * The editor component for the block.
  *
- * @param {Object} props The props of this component.
- * @param {Object} props.block The block.
+ * @param {Object} props            The props of this component.
+ * @param {Object} props.block      The block.
  * @param {Object} props.blockProps The block's props.
  * @return {React.ReactElement} The editor display.
  */

js/src/block-editor/components/fields.js

@@ -34,11 +34,11 @@ const getClassName = ( field ) => {
 
 /**
  * @typedef {Object} FieldsProps The component props.
- * @property {Array} fields The fields to render.
- * @property {Object} parentBlock The block where the fields are.
+ * @property {Array}  fields           The fields to render.
+ * @property {Object} parentBlock      The block where the fields are.
  * @property {Object} parentBlockProps The props to pass to the control function.
- * @property {number} [rowIndex] The index of the repeater row, if this field is in one (optional).
- * @property {string} [context] Where this will render, either in the GCB editor (edit-block) or the block editor.
+ * @property {number} [rowIndex]       The index of the repeater row, if this field is in one (optional).
+ * @property {string} [context]        Where this will render, either in the GCB editor (edit-block) or the block editor.
  */
 
 /**
@@ -96,10 +96,10 @@ const Fields = ( { fields, parentBlock, parentBlockProps, rowIndex, context } )
 				 *
 				 * If this is in a repeater row, the value is appropriate for that.
 				 *
-				 * @param {Object} props The properties of the Control function.
-				 * @param {Object} props.field The field.
+				 * @param {Object} props                  The properties of the Control function.
+				 * @param {Object} props.field            The field.
 				 * @param {Object} props.parentBlockProps The props of the parent block.
-				 * @param {number} props.rowIndex The index of the repeater row (optional).
+				 * @param {number} props.rowIndex         The index of the repeater row (optional).
 				 */
 				const getValue = ( {
 					field: ownField,

js/src/block-editor/components/gcb-inspector.js

@@ -18,9 +18,9 @@ import { getFieldsAsArray } from '../../common/helpers';
 /**
  * Gets the rendered controls for the Inspector Controls, based on the field values.
  *
- * @param {Object} props This component's props.
+ * @param {Object} props            This component's props.
  * @param {Object} props.blockProps The block's props.
- * @param {Object} props.block The block.
+ * @param {Object} props.block      The block.
  * @return {React.ReactElement} The inspector controls.
  */
 const GcbInspector = ( { blockProps, block } ) => (

js/src/block-editor/components/repeater-rows.js

@@ -19,10 +19,10 @@ import { Fields } from './';
 /**
  * Gets the repeater rows.
  *
- * @param {Array} rows The repeater rows to render.
- * @param {Array} fields The fields to render.
+ * @param {Array}  rows             The repeater rows to render.
+ * @param {Array}  fields           The fields to render.
  * @param {Object} parentBlockProps The props to pass to the control function.
- * @param {Object} parentBlock The block where the fields are.
+ * @param {Object} parentBlock      The block where the fields are.
  * @return {Array} fields The rendered fields.
  */
 class RepeaterRows extends Component {

js/src/block-editor/components/test/edit.js

@@ -3,22 +3,14 @@
  */
 import '@testing-library/jest-dom/extend-expect';
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import user from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import { Edit } from '../';
 
-jest.mock( '@wordpress/api-fetch', () => {
-	return jest.fn( () => {
-		return Promise.resolve( {
-			json: () => Promise.resolve( {} ),
-		} );
-	} );
-} );
-
 jest.mock( '@wordpress/data/build/components/use-select', () =>
 	jest.fn( () => false )
 );
@@ -100,7 +92,9 @@ describe( 'Edit', () => {
 		expect( screen.getByLabelText( /gcb block form/i ) ).toBeInTheDocument();
 		screen.getAllByText( getBlock().title );
 
-		user.click( screen.getByLabelText( /close dialog/i ) );
+		act( () => {
+			user.click( screen.getByLabelText( /close dialog/i ) );
+		} );
 
 		expect( screen.queryByLabelText( /gcb block form/i ) ).not.toBeInTheDocument();
 		expect( screen.queryByText( getBlock().title ) ).not.toBeInTheDocument();

js/src/block-editor/components/test/fields.js

@@ -31,7 +31,7 @@ describe( 'Fields', () => {
 			/>
 		);
 
-		expect( screen.queryByText( helpText ) ).toBeNull();
+		expect( screen.queryByText( helpText ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'displays a control that is supposed to be in the editor', () => {

js/src/block-editor/controls/test/color.js

@@ -25,7 +25,7 @@ test( 'color control', async () => {
 	);
 	const input = getByRole( 'textbox' );
 
-	expect( input.value ).toBe( field.default );
+	expect( input ).toHaveValue( field.default );
 	await findByText( field.help );
 	await findByText( field.label );
 

js/src/block-editor/controls/test/email.js

@@ -28,7 +28,7 @@ describe( 'email control', () => {
 	it( 'displays the default value if no value is entered', () => {
 		const props = getProps();
 		const { control } = setupControl( GcbEmailControl, props );
-		expect( control ).toHaveAttribute( 'value', props.field.default );
+		expect( control ).toHaveValue( props.field.default );
 	} );
 
 	it.each( [

js/src/block-editor/controls/test/helpers/index.js

@@ -7,7 +7,7 @@ import { render } from '@testing-library/react';
  * Renders a control, and gets utility methods to test it.
  *
  * @param {Function} Control The control to render.
- * @param {Object} props The props for the control.
+ * @param {Object}   props   The props for the control.
  * @return {Object} The control and testing utility functions.
  */
 export const setupControl = ( Control, props ) => {

js/src/block-editor/controls/test/number.js

@@ -17,7 +17,7 @@ import { setupControl } from './helpers';
 const getProps = () => ( {
 	field: {
 		label: 'This is a label for the number field',
-		default: '52344',
+		default: 52344,
 		placeholder: 'This is a placeholder for the number',
 	},
 	onChange: jest.fn(),
@@ -27,7 +27,7 @@ describe( 'number control', () => {
 	it( 'displays the default value if no value is entered', () => {
 		const props = getProps();
 		const { control } = setupControl( GcbNumberControl, props );
-		expect( control ).toHaveAttribute( 'value', props.field.default );
+		expect( control ).toHaveValue( props.field.default );
 	} );
 
 	it( 'has the placeholder', async () => {

js/src/block-editor/controls/test/range.js

@@ -31,7 +31,7 @@ test( 'range control', () => {
 	getByText( field.help );
 
 	// This should have the default value as its value.
-	expect( control ).toHaveAttribute( 'value', field.default.toString() );
+	expect( control ).toHaveValue( field.default.toString() );
 
 	// Changing the value should call the onChange handler.
 	const newValue = 58;

js/src/block-editor/controls/test/text.js

@@ -27,7 +27,7 @@ describe( 'text control', () => {
 		const props = getProps();
 		const { control } = setupControl( GcbTextControl, props );
 
-		expect( control ).toHaveAttribute( 'value', props.field.default );
+		expect( control ).toHaveValue( props.field.default );
 	} );
 
 	it.each( [