diff --git a/apps/full-site-editing/.eslintrc.js b/apps/full-site-editing/.eslintrc.js index c5ef2421684e5..ab9ff7b842a93 100644 --- a/apps/full-site-editing/.eslintrc.js +++ b/apps/full-site-editing/.eslintrc.js @@ -1,4 +1,6 @@ module.exports = { + plugins: [ 'jest' ], + extends: [ 'plugin:jest/recommended' ], rules: { 'import/no-extraneous-dependencies': [ 'error', { packageDir: __dirname } ], 'react/react-in-jsx-scope': 0, diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-preview.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-preview.js new file mode 100644 index 0000000000000..286fd8e0e5843 --- /dev/null +++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-preview.js @@ -0,0 +1,27 @@ +/** + * External dependencies + */ + +/** + * Internal dependencies + */ + +/** + * WordPress dependencies + */ +/* eslint-disable import/no-extraneous-dependencies */ +import { BlockPreview } from '@wordpress/block-editor'; +/* eslint-enable import/no-extraneous-dependencies */ + +// Exists as a pass through component to simplying testing +// components which consume `BlockPreview` from +// `@wordpress/block-editor`. This is because jest cannot mock +// node modules that are not part of the root node modules. +// Due to the way this projects dependencies are defined +// `@wordpress/block-editor` does not exist within `node_modules` +// and it is there impossible to mock it without providing a wrapping +// component to act as a pass though. +// See https://jestjs.io/docs/en/manual-mocks +export default function( props ) { + return ; +} diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-template-preview.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-template-preview.js index ce5725a8945f8..d5bcd2ffc9a12 100644 --- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-template-preview.js +++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/block-template-preview.js @@ -9,9 +9,11 @@ /** * WordPress dependencies */ +/* eslint-disable import/no-extraneous-dependencies */ import { BlockPreview } from '@wordpress/block-editor'; +/* eslint-enable import/no-extraneous-dependencies */ -const BlockTemplatePreview = ( { blocks, viewportWidth } ) => { +const BlockTemplatePreview = ( { blocks = [], viewportWidth } ) => { if ( ! blocks || ! blocks.length ) { return null; } @@ -21,7 +23,7 @@ const BlockTemplatePreview = ( { blocks, viewportWidth } ) => {
- { blocks && } +
diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-control.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-control.js index b25db75ca1348..5ac1b683907d2 100644 --- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-control.js +++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/components/template-selector-control.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { isEmpty, noop, map } from 'lodash'; +import { isEmpty, isArray, noop, map } from 'lodash'; import classnames from 'classnames'; /** @@ -17,19 +17,23 @@ import { memo } from '@wordpress/element'; import TemplateSelectorItem from './template-selector-item'; import replacePlaceholders from '../utils/replace-placeholders'; -const TemplateSelectorControl = ( { +export const TemplateSelectorControl = ( { label, className, help, instanceId, - templates = {}, + templates = [], blocksByTemplates = {}, useDynamicPreview = false, onTemplateSelect = noop, onTemplateFocus = noop, siteInformation = {}, } ) => { - if ( isEmpty( templates ) ) { + if ( isEmpty( templates ) || ! isArray( templates ) ) { + return null; + } + + if ( true === useDynamicPreview && isEmpty( blocksByTemplates ) ) { return null; } @@ -42,7 +46,10 @@ const TemplateSelectorControl = ( { help={ help } className={ classnames( className, 'template-selector-control' ) } > -