Edit Site: Add multiple entity saving functionality.

packages/edit-site/package.json

@@ -28,6 +28,7 @@
 		"@wordpress/components": "file:../components",
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
+		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",

packages/edit-site/src/components/header/index.js

@@ -3,6 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import SaveButton from '../save-button';
+
 export default function Header() {
 	return (
 		<div
@@ -14,6 +19,9 @@ export default function Header() {
 			<h1 className="edit-site-header__title">
 				{ __( 'Site Editor' ) } { __( '(beta)' ) }
 			</h1>
+			<div className="edit-site-header__actions">
+				<SaveButton />
+			</div>
 		</div>
 	);
 }

packages/edit-site/src/components/header/style.scss

@@ -31,3 +31,7 @@
 	font-size: 16px;
 	padding: 0 20px;
 }
+
+.edit-site-header__actions {
+	padding: 0 20px;
+}

packages/edit-site/src/components/save-button/index.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { EntitiesSavedStates } from '@wordpress/editor';
+
+export default function SaveButton() {
+	const [ , setStatus ] = useEntityProp( 'postType', 'wp_template', 'status' );
+	// Publish template if not done yet.
+	useEffect( () => setStatus( 'publish' ), [] );
+
+	const { isDirty, isSaving } = useSelect( ( select ) => {
+		const { getEntityRecordChangesByRecord, isSavingEntityRecord } = select(
+			'core'
+		);
+		const entityRecordChangesByRecord = getEntityRecordChangesByRecord();
+		const changedKinds = Object.keys( entityRecordChangesByRecord );
+		return {
+			isDirty: changedKinds.length > 0,
+			isSaving: changedKinds.some( ( changedKind ) =>
+				Object.keys(
+					entityRecordChangesByRecord[ changedKind ]
+				).some( ( changedName ) =>
+					Object.keys(
+						entityRecordChangesByRecord[ changedKind ][ changedName ]
+					).some( ( changedKey ) =>
+						isSavingEntityRecord( changedKind, changedName, changedKey )
+					)
+				)
+			),
+		};
+	} );
+	const disabled = ! isDirty || isSaving;
+
+	const [ isOpen, setIsOpen ] = useState( false );
+	const open = useCallback( setIsOpen.bind( null, true ), [] );
+	const close = useCallback( setIsOpen.bind( null, false ), [] );
+	return (
+		<>
+			<Button
+				isPrimary
+				aria-disabled={ disabled }
+				disabled={ disabled }
+				isBusy={ isSaving }
+				onClick={ disabled ? undefined : open }
+			>
+				{ __( 'Update' ) }
+			</Button>
+			<EntitiesSavedStates isOpen={ isOpen } onRequestClose={ close } />
+		</>
+	);
+}