Init

components/post-autosuggest-control/index.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { debounce } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ComboboxControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+export function PostAutoSuggestControl( { onChange, value } ) {
+	const [ fieldValue, setFieldValue ] = useState( false );
+	const isSearching = fieldValue;
+
+	const { items, selectedLabel } = useSelect(
+		( select ) => {
+			const { searchPosts, getPost } = select(
+				'custom-layouts/template'
+			);
+			/*
+			// Perform a search when the field is changed.
+			if ( isSearching ) {
+				query.search = fieldValue;
+			}
+			*/
+			const post = getPost( value );
+			return {
+				items: searchPosts( fieldValue ),
+				selectedLabel: post?.title,
+			};
+		},
+		[ fieldValue ]
+	);
+
+	const pageItems = items || [];
+
+	if ( value && pageItems.length === 0 ) {
+		//always prepend the current selected option, so the label can be found
+		const foundValueInList = pageItems.find(
+			( element ) => element.value === value
+		);
+		if ( ! foundValueInList ) {
+			pageItems.unshift( { value, label: selectedLabel } );
+		}
+	}
+
+	/**
+	 * @param inputValue
+	 */
+	const handleKeydown = ( inputValue ) => {
+		setFieldValue( inputValue );
+	};
+
+	return (
+		<>
+			<ComboboxControl
+				className="custom-layouts-combobox-control--post"
+				label={ __( 'Find post (all post types)', 'custom-layouts' ) }
+				value={ value }
+				options={ pageItems }
+				onFilterValueChange={ debounce( handleKeydown, 200 ) }
+				onChange={ onChange }
+			/>
+		</>
+	);
+}
+
+export default PostAutoSuggestControl;

components/template-select-control/index.js

@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { isEmpty } from 'lodash';
+import { __ } from '@wordpress/i18n';
+import { Button, BaseControl } from '@wordpress/components';
+import { dispatch, withSelect } from '@wordpress/data';
+
+const TemplateSelectControl = withSelect( ( select, props ) => {
+	const templateInfo = select( 'custom-layouts/templateEditor' ).getTemplateInfo();
+	let language;
+	if ( templateInfo?.lang ) {
+		language = templateInfo.lang;
+	}
+	return {
+		templateData: select( 'custom-layouts' ).getTemplateData(
+			props.templateId
+		),
+		templates: select( 'custom-layouts' ).getTemplates( language ),
+		savedTemplateId: select( 'custom-layouts' ).getSavedTemplateId(),
+	};
+} )(
+	( {
+		onChange,
+		templates,
+		templateId,
+		templateData,
+		savedTemplateId,
+		templateWidth,
+	} ) => {
+		let allTemplateOptions = [
+			{
+				value: 'loading',
+				label: __( 'Loading', 'custom-layouts' ),
+				//disabled: true,
+			},
+		];
+
+		useEffect( () => {
+			if ( savedTemplateId && savedTemplateId !== 0 ) {
+				//grab its value, and set to it ( this should only happen when a new template is created via the modal )
+				onChange( savedTemplateId );
+				dispatch( 'custom-layouts' ).setSavedTemplateId( 0 ); //unset it in the store
+			}
+		}, [ savedTemplateId ] );
+
+		if ( templates ) {
+			allTemplateOptions = [
+				{
+					value: 'default',
+					label: __( 'Default', 'custom-layouts' ),
+				},
+				...templates,
+			];
+		}
+
+		const editTemplateModal = () => {
+
+			const foundTemplate = templates.find( ( templateOption ) => {
+				return (
+					parseInt( templateOption.value ) === parseInt( templateId )
+				);
+			} );
+
+			const templateTitle = foundTemplate?.label
+				? foundTemplate.label
+				: '';
+
+			const editorData = {
+				title: templateTitle,
+				editorId: templateId,
+				isDirty: false,
+			};
+			if ( templateWidth && templateWidth > 0 ) {
+				editorData.canvasWidth = templateWidth;
+			}
+
+			dispatch( 'custom-layouts' ).setEditor( 'template', editorData );
+			dispatch( 'custom-layouts/modal' ).openModal( 'template', {} );
+		};
+		const newTemplateModal = () => {
+			const editorData = {
+				title: '',
+				editorId: 0,
+				isDirty: false,
+			};
+			if ( templateWidth && templateWidth > 0 ) {
+				editorData.canvasWidth = templateWidth;
+			}
+
+			dispatch( 'custom-layouts' ).setEditor( 'template', editorData );
+			dispatch( 'custom-layouts/modal' ).openModal( 'template', {
+				templateId: 0, // probably don't need
+			} );
+		};
+
+		const postTemplateInputId = 'custom-layouts__post-template-1';
+		const templateLoaded =
+			templateId &&
+			! isEmpty( templateData.template ) &&
+			! isEmpty( templateData.instances );
+
+		return (
+			<BaseControl
+				id={ postTemplateInputId }
+				label={ __( 'Post Template', 'custom-layouts' ) }
+				className={ 'components-base-post-template-control__field' }
+			>
+				<Button
+					className={
+						'components-base-post-template-control__button'
+					}
+					onClick={ newTemplateModal }
+				>
+					{ __( 'Add New', 'custom-layouts' ) }
+				</Button>
+				<div className="custom-layouts-attributes__control-row">
+					<select
+						id={ postTemplateInputId }
+						value={ templateId }
+						className={ 'components-select-control__input' }
+						onChange={ ( e ) => {
+							onChange( e.target.value );
+						} }
+						onBlur={ () => {
+							//this.props.onChange( e.target.value );
+						} }
+					>
+						{ allTemplateOptions.map( ( option, index ) => {
+							return (
+								<option key={ index } value={ option.value }>
+									{ option.label }
+								</option>
+							);
+						} ) }
+					</select>
+					<Button
+						onClick={ editTemplateModal }
+						isSecondary
+						disabled={
+							templateId === 'default' || ! templateLoaded
+								? true
+								: false
+						}
+					>
+						{ __( 'Edit', 'custom-layouts' ) }
+					</Button>
+				</div>
+			</BaseControl>
+		);
+	}
+);
+
+export default TemplateSelectControl;

components/template-select-control/style.scss

@@ -0,0 +1,20 @@
+
+// TODO - needs renaming for layouts + templates (some sort of base class?)
+.components-base-post-template-control__field {
+	position:relative;
+}
+
+.components-base-post-template-control__button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 0;
+    margin: 0;
+    min-height: revert;
+    height: auto;
+	color: var(--wp-admin-theme-color);
+
+	&:hover {
+		text-decoration: underline;
+	}
+}