Update editor sidebar validation notifications

assets/src/block-editor/components/sidebar-notification/index.js

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import './style.css';
+import { Loading } from '../../../components/loading';
+
+/**
+ * Notification component used in the block editor sidebar.
+ *
+ * @param {Object} props
+ * @param {ReactNode} props.action Call to action element.
+ * @param {ReactNode} props.icon Status icon element.
+ * @param {boolean} props.isLoading Flag indicating if it's a loading message.
+ * @param {string} props.message Message text.
+ */
+export function SidebarNotification( {
+	action,
+	icon,
+	isLoading = false,
+	message,
+} ) {
+	const iconElement = isLoading ? <Loading /> : icon;
+
+	return (
+		<div className={ classnames( 'sidebar-notification', { 'is-loading': isLoading } ) }>
+			{ iconElement && (
+				<div className="sidebar-notification__icon">
+					{ iconElement }
+				</div>
+			) }
+			<div className="sidebar-notification__content">
+				<p>
+					{ message }
+				</p>
+				{ action && (
+					<p>
+						{ action }
+					</p>
+				) }
+			</div>
+		</div>
+	);
+}
+SidebarNotification.propTypes = {
+	action: PropTypes.node,
+	icon: PropTypes.node,
+	isLoading: PropTypes.bool,
+	message: PropTypes.string.isRequired,
+};
+
+/**
+ * Sidebar notifications container component.
+ *
+ * @param {Object} props
+ * @param {Object} props.children Component children.
+ * @param {boolean} props.isShady Flag indicating if the component should have a background.
+ */
+export function SidebarNotificationsContainer( { children, isShady } ) {
+	return (
+		<div className={ classnames( 'sidebar-notifications-container', { 'is-shady': isShady } ) }>
+			{ children }
+		</div>
+	);
+}
+SidebarNotificationsContainer.propTypes = {
+	children: PropTypes.any,
+	isShady: PropTypes.bool,
+};

assets/src/block-editor/components/sidebar-notification/style.css

@@ -0,0 +1,60 @@
+.sidebar-notification {
+	display: flex;
+	min-height: 67px;
+	overflow: hidden;
+	padding: 14px 18px;
+	position: relative;
+}
+
+.sidebar-notification.is-loading {
+	align-items: center;
+}
+
+.sidebar-notification__icon {
+	align-items: center;
+	border-radius: 50%;
+	display: flex;
+	flex: 0 0 auto;
+	height: 24px;
+	justify-content: center;
+	margin: 0 12px 0 0;
+	position: relative;
+	width: 24px;
+}
+
+.sidebar-notification__icon svg {
+	height: 100%;
+	width: 100%;
+}
+
+.sidebar-notification__content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.sidebar-notification__content > p {
+	margin: 0;
+}
+
+.sidebar-notification__content > p + p {
+	margin-top: 4px;
+}
+
+/*
+ * Sidebar notifications container with light background.
+ */
+.sidebar-notifications-container.is-shady {
+	background: #f4f4f4;
+	border-bottom: 1px solid #e3e4e7;
+	padding: 18px 10px;
+}
+
+.sidebar-notifications-container.is-shady > .sidebar-notification {
+	background: #fff;
+	border-radius: 15px;
+}
+
+.sidebar-notifications-container.is-shady > .sidebar-notification + .sidebar-notification {
+	margin-top: 15px;
+}

assets/src/block-editor/components/sidebar-notification/test/sidebar-notification.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * WordPress dependencies
+ */
+import { render, unmountComponentAtNode } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { SidebarNotification } from '../index';
+
+describe( 'SidebarNotification', () => {
+	let container;
+
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		unmountComponentAtNode( container );
+		container.remove();
+		container = null;
+	} );
+
+	it( 'renders notification without icon and call to action', () => {
+		act( () => {
+			render( <SidebarNotification message="Foobar" />, container );
+		} );
+
+		expect( container.innerHTML ).toMatchSnapshot();
+		expect( container.children ).toHaveLength( 1 );
+		expect( container.querySelector( '.sidebar-notification' ) ).not.toBeNull();
+		expect( container.querySelector( '.sidebar-notification__icon' ) ).toBeNull();
+		expect( container.querySelector( '.sidebar-notification__content' ).textContent ).toBe( 'Foobar' );
+	} );
+
+	it( 'renders status message with icon and call to action', () => {
+		act( () => {
+			render(
+				<SidebarNotification
+					message="Foobar"
+					icon={ <svg /> }
+					action={ <button /> }
+				/>,
+				container,
+			);
+		} );
+
+		expect( container.innerHTML ).toMatchSnapshot();
+		expect( container.querySelector( 'svg' ) ).not.toBeNull();
+		expect( container.querySelector( 'button' ) ).not.toBeNull();
+	} );
+} );
+

assets/src/block-editor/components/sidebar-notification/test/sidebar-notifications-container.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * WordPress dependencies
+ */
+import { render, unmountComponentAtNode } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { SidebarNotificationsContainer } from '../index';
+
+describe( 'SidebarNotificationsContainer', () => {
+	let container;
+
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		unmountComponentAtNode( container );
+		container.remove();
+		container = null;
+	} );
+
+	it( 'renders sidebar notifications container along with children', () => {
+		act( () => {
+			render(
+				<SidebarNotificationsContainer>
+					{ 'Foo' }
+				</SidebarNotificationsContainer>,
+				container,
+			);
+		} );
+
+		expect( container.querySelector( '.sidebar-notifications-container' ) ).not.toBeNull();
+		expect( container.querySelector( '.sidebar-notifications-container' ).textContent ).toBe( 'Foo' );
+	} );
+} );
+

assets/src/block-validation/amp-validation-status/index.js

@@ -0,0 +1,2 @@
+export { default as AMPValidationStatusNotification } from './status-notification';
+export { default as AMPRevalidateNotification } from './revalidate-notification';

assets/src/block-validation/amp-validation-status/revalidate-notification.js

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { usePrevious } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BLOCK_VALIDATION_STORE_KEY } from '../store';
+import BellIcon from '../../../images/bell-icon.svg';
+import { SidebarNotification } from '../../block-editor/components/sidebar-notification';
+
+/**
+ * AMP re-validate status message.
+ */
+export default function AMPRevalidateNotification() {
+	const [ didFetchErrors, setDidFetchErrors ] = useState( false );
+	const [ loadingMessage, setLoadingMessage ] = useState( '' );
+	const { autosave, savePost } = useDispatch( 'core/editor' );
+
+	const {
+		hasErrorsFromRemovedBlocks,
+		hasActiveMetaboxes,
+		isDraft,
+		isFetchingErrors,
+		isEditedPostNew,
+		isPostDirty,
+	} = useSelect( ( select ) => {
+		let _hasErrorsFromRemovedBlocks = false;
+		for ( const validationError of select( BLOCK_VALIDATION_STORE_KEY ).getValidationErrors() ) {
+			const { clientId } = validationError;
+			const blockDetails = clientId ? select( 'core/block-editor' ).getBlock( clientId ) : null;
+			if ( clientId && ! blockDetails ) {
+				_hasErrorsFromRemovedBlocks = true;
+				break;
+			}
+		}
+
+		return {
+			hasErrorsFromRemovedBlocks: _hasErrorsFromRemovedBlocks,
+			hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
+			isDraft: [ 'draft', 'auto-draft' ].indexOf( select( 'core/editor' ).getEditedPostAttribute( 'status' ) ) !== -1,
+			isEditedPostNew: select( 'core/editor' ).isEditedPostNew(),
+			isFetchingErrors: select( BLOCK_VALIDATION_STORE_KEY ).getIsFetchingErrors(),
+			isPostDirty: select( BLOCK_VALIDATION_STORE_KEY ).getIsPostDirty(),
+		};
+	}, [] );
+
+	const wasEditedPostNew = usePrevious( isEditedPostNew );
+	const wasFetchingErrors = usePrevious( isFetchingErrors );
+
+	useEffect( () => {
+		if ( didFetchErrors ) {
+			return;
+		}
+
+		// Set up the state right after errors fetching has finished.
+		if ( ! isFetchingErrors && wasFetchingErrors ) {
+			setDidFetchErrors( true );
+		}
+	}, [ didFetchErrors, isFetchingErrors, wasFetchingErrors ] );
+
+	/**
+	 * Display best-suited loading message depending if the post has been
+	 * already validated or not, or the editor has just been opened.
+	 */
+	useEffect( () => {
+		if ( didFetchErrors ) {
+			setLoadingMessage( __( 'Re-validating page content.', 'amp' ) );
+		} else if ( isEditedPostNew || wasEditedPostNew ) {
+			setLoadingMessage( __( 'Validating page content.', 'amp' ) );
+		} else {
+			setLoadingMessage( __( 'Loading…', 'amp' ) );
+		}
+	}, [ didFetchErrors, isEditedPostNew, wasEditedPostNew ] );
+
+	if ( isFetchingErrors ) {
+		return (
+			<SidebarNotification message={ loadingMessage } isLoading={ true } />
+		);
+	}
+
+	/**
+	 * For posts where meta boxes are present, it's impossible to tell
+	 * if a meta box content has changed or not. Because of that, a dirty
+	 * state is ignored and it's always possible to save a post.
+	 * Likewise, we always display the re-validate message if there are
+	 * active meta boxes. Also show a re-validate message if there are validation
+	 * errors which used to be in the content but are no longer found, potentially
+	 * due to switching from the visual editor to the code editor.
+	 */
+	if ( ! isPostDirty && ! hasActiveMetaboxes && ! hasErrorsFromRemovedBlocks ) {
+		return null;
+	}
+
+	return (
+		<SidebarNotification
+			icon={ <BellIcon /> }
+			message={ hasActiveMetaboxes || ! isPostDirty
+				? __( 'Page content may have changed.', 'amp' )
+				: __( 'Page content has changed.', 'amp' ) }
+			action={ isDraft ? (
+				<Button
+					isLink
+					onClick={ () => savePost( { isPreview: true } ) }>
+					{ __( 'Save draft and validate', 'amp' ) }
+				</Button>
+			) : (
+				<Button
+					isLink
+					onClick={ () => autosave( { isPreview: true } ) }>
+					{ __( 'Re-validate', 'amp' ) }
+				</Button>
+			) }
+		/>
+	);
+}