@wordpress/edit-post 6.16.0 → 6.18.0

package/build-style/style-rtl.css

@@ -733,6 +733,34 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-left: 8px;
 }
 
+.is-distraction-free .interface-interface-skeleton__header {
+  border-bottom: none;
+}
+.is-distraction-free .edit-post-header {
+  -webkit-backdrop-filter: blur(20px) !important;
+          backdrop-filter: blur(20px) !important;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid #e0e0e0;
+  position: absolute;
+  width: 100%;
+}
+.is-distraction-free .edit-post-header > .edit-post-header__settings > .editor-post-preview {
+  visibility: hidden;
+}
+.is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .block-editor-post-preview__dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
+  display: none;
+}
+.is-distraction-free .interface-interface-skeleton__header:focus-within {
+  opacity: 1 !important;
+}
+.is-distraction-free .interface-interface-skeleton__header:focus-within div {
+  transform: translateX(0) translateZ(0) !important;
+}
+.is-distraction-free .components-editor-notices__dismissible {
+  position: absolute;
+  z-index: 35;
+}
+
 .edit-post-fullscreen-mode-close.components-button {
   display: none;
 }
@@ -1051,6 +1079,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding-left: 16px;
 }
 
+.is-distraction-free .components-editor-notices__snackbar {
+  bottom: 20px;
+}
+
 .edit-post-layout .components-editor-notices__snackbar {
   /* Set left position when auto-fold is not on the body element. */
   right: 0;
@@ -1341,7 +1373,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .edit-post-editor__list-view-panel {
-  min-width: 350px;
+  width: 350px;
+}
+.edit-post-editor__list-view-panel .edit-post-sidebar__panel-tabs {
+  flex-direction: row-reverse;
 }
 
 .edit-post-editor__inserter-panel-header {
@@ -1351,11 +1386,9 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   justify-content: flex-end;
 }
 
-.edit-post-editor__inserter-panel-content,
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__inserter-panel-content {
   height: calc(100% - 36px - 8px);
 }
-
 @media (min-width: 782px) {
   .edit-post-editor__inserter-panel-content {
     height: 100%;
@@ -1363,7 +1396,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .edit-post-editor__list-view-panel-header {
-  align-items: center;
   border-bottom: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
@@ -1371,12 +1403,66 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   padding-right: 16px;
   padding-left: 4px;
 }
+.edit-post-editor__list-view-panel-header ul {
+  width: calc(100% - 40px);
+}
+.edit-post-editor__list-view-panel-header li {
+  width: 50%;
+}
+.edit-post-editor__list-view-panel-header li button {
+  width: 100%;
+  text-align: initial;
+}
+.edit-post-editor__list-view-panel-header li:only-child {
+  width: 100%;
+}
 
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__list-view-panel-content,
+.edit-post-editor__list-view-container > .document-outline,
+.edit-post-editor__list-view-empty-headings {
+  overflow-x: hidden;
   overflow-y: auto;
+  height: 100%;
   padding: 8px 6px;
 }
 
+.edit-post-editor__list-view-empty-headings {
+  text-align: center;
+  color: #757575;
+}
+.edit-post-editor__list-view-empty-headings > svg {
+  margin-top: 28px;
+}
+.edit-post-editor__list-view-empty-headings > p {
+  padding-right: 32px;
+  padding-left: 32px;
+}
+
+.edit-post-editor__list-view-overview {
+  border-top: 1px solid #ddd;
+  width: calc(100% - 32px);
+  padding: 16px;
+  height: 72px;
+}
+.edit-post-editor__list-view-overview > div > span:first-child {
+  width: 90px;
+  display: inline-block;
+}
+.edit-post-editor__list-view-overview > div {
+  padding: 0 0 8px;
+}
+.edit-post-editor__list-view-overview > div > span {
+  font-size: 12px;
+  line-height: 1.4;
+  color: #757575;
+}
+
+.edit-post-editor__list-view-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 48px);
+}
+
 .components-panel__header.edit-post-sidebar__panel-tabs {
   justify-content: flex-start;
   padding-right: 0;

package/build-style/style.css

@@ -733,6 +733,34 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-right: 8px;
 }
 
+.is-distraction-free .interface-interface-skeleton__header {
+  border-bottom: none;
+}
+.is-distraction-free .edit-post-header {
+  -webkit-backdrop-filter: blur(20px) !important;
+          backdrop-filter: blur(20px) !important;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid #e0e0e0;
+  position: absolute;
+  width: 100%;
+}
+.is-distraction-free .edit-post-header > .edit-post-header__settings > .editor-post-preview {
+  visibility: hidden;
+}
+.is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle, .is-distraction-free .edit-post-header > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle, .is-distraction-free .edit-post-header > .edit-post-header__settings > .block-editor-post-preview__dropdown, .is-distraction-free .edit-post-header > .edit-post-header__settings > .interface-pinned-items {
+  display: none;
+}
+.is-distraction-free .interface-interface-skeleton__header:focus-within {
+  opacity: 1 !important;
+}
+.is-distraction-free .interface-interface-skeleton__header:focus-within div {
+  transform: translateX(0) translateZ(0) !important;
+}
+.is-distraction-free .components-editor-notices__dismissible {
+  position: absolute;
+  z-index: 35;
+}
+
 .edit-post-fullscreen-mode-close.components-button {
   display: none;
 }
@@ -1051,6 +1079,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding-right: 16px;
 }
 
+.is-distraction-free .components-editor-notices__snackbar {
+  bottom: 20px;
+}
+
 .edit-post-layout .components-editor-notices__snackbar {
   /* Set left position when auto-fold is not on the body element. */
   left: 0;
@@ -1341,7 +1373,10 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .edit-post-editor__list-view-panel {
-  min-width: 350px;
+  width: 350px;
+}
+.edit-post-editor__list-view-panel .edit-post-sidebar__panel-tabs {
+  flex-direction: row-reverse;
 }
 
 .edit-post-editor__inserter-panel-header {
@@ -1351,11 +1386,9 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   justify-content: flex-end;
 }
 
-.edit-post-editor__inserter-panel-content,
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__inserter-panel-content {
   height: calc(100% - 36px - 8px);
 }
-
 @media (min-width: 782px) {
   .edit-post-editor__inserter-panel-content {
     height: 100%;
@@ -1363,7 +1396,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 }
 
 .edit-post-editor__list-view-panel-header {
-  align-items: center;
   border-bottom: 1px solid #ddd;
   display: flex;
   justify-content: space-between;
@@ -1371,12 +1403,66 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   padding-left: 16px;
   padding-right: 4px;
 }
+.edit-post-editor__list-view-panel-header ul {
+  width: calc(100% - 40px);
+}
+.edit-post-editor__list-view-panel-header li {
+  width: 50%;
+}
+.edit-post-editor__list-view-panel-header li button {
+  width: 100%;
+  text-align: initial;
+}
+.edit-post-editor__list-view-panel-header li:only-child {
+  width: 100%;
+}
 
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__list-view-panel-content,
+.edit-post-editor__list-view-container > .document-outline,
+.edit-post-editor__list-view-empty-headings {
+  overflow-x: hidden;
   overflow-y: auto;
+  height: 100%;
   padding: 8px 6px;
 }
 
+.edit-post-editor__list-view-empty-headings {
+  text-align: center;
+  color: #757575;
+}
+.edit-post-editor__list-view-empty-headings > svg {
+  margin-top: 28px;
+}
+.edit-post-editor__list-view-empty-headings > p {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+
+.edit-post-editor__list-view-overview {
+  border-top: 1px solid #ddd;
+  width: calc(100% - 32px);
+  padding: 16px;
+  height: 72px;
+}
+.edit-post-editor__list-view-overview > div > span:first-child {
+  width: 90px;
+  display: inline-block;
+}
+.edit-post-editor__list-view-overview > div {
+  padding: 0 0 8px;
+}
+.edit-post-editor__list-view-overview > div > span {
+  font-size: 12px;
+  line-height: 1.4;
+  color: #757575;
+}
+
+.edit-post-editor__list-view-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 48px);
+}
+
 .components-panel__header.edit-post-sidebar__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.16.0",
+	"version": "6.18.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,31 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.19.0",
-		"@wordpress/api-fetch": "^6.16.0",
-		"@wordpress/block-editor": "^10.2.0",
-		"@wordpress/block-library": "^7.16.0",
-		"@wordpress/blocks": "^11.18.0",
-		"@wordpress/components": "^21.2.0",
-		"@wordpress/compose": "^5.17.0",
-		"@wordpress/core-data": "^5.2.0",
-		"@wordpress/data": "^7.3.0",
-		"@wordpress/deprecated": "^3.19.0",
-		"@wordpress/editor": "^12.18.0",
-		"@wordpress/element": "^4.17.0",
-		"@wordpress/hooks": "^3.19.0",
-		"@wordpress/i18n": "^4.19.0",
-		"@wordpress/icons": "^9.10.0",
-		"@wordpress/interface": "^4.18.0",
-		"@wordpress/keyboard-shortcuts": "^3.17.0",
-		"@wordpress/keycodes": "^3.19.0",
-		"@wordpress/media-utils": "^4.10.0",
-		"@wordpress/notices": "^3.19.0",
-		"@wordpress/plugins": "^4.17.0",
-		"@wordpress/preferences": "^2.11.0",
-		"@wordpress/url": "^3.20.0",
-		"@wordpress/viewport": "^4.17.0",
-		"@wordpress/warning": "^2.19.0",
+		"@wordpress/a11y": "^3.21.0",
+		"@wordpress/api-fetch": "^6.18.0",
+		"@wordpress/block-editor": "^10.4.0",
+		"@wordpress/block-library": "^7.18.0",
+		"@wordpress/blocks": "^11.20.0",
+		"@wordpress/components": "^22.0.0",
+		"@wordpress/compose": "^5.19.0",
+		"@wordpress/core-data": "^5.4.0",
+		"@wordpress/data": "^7.5.0",
+		"@wordpress/deprecated": "^3.21.0",
+		"@wordpress/editor": "^12.20.0",
+		"@wordpress/element": "^4.19.0",
+		"@wordpress/hooks": "^3.21.0",
+		"@wordpress/i18n": "^4.21.0",
+		"@wordpress/icons": "^9.12.0",
+		"@wordpress/interface": "^4.20.0",
+		"@wordpress/keyboard-shortcuts": "^3.19.0",
+		"@wordpress/keycodes": "^3.21.0",
+		"@wordpress/media-utils": "^4.12.0",
+		"@wordpress/notices": "^3.21.0",
+		"@wordpress/plugins": "^4.19.0",
+		"@wordpress/preferences": "^2.13.0",
+		"@wordpress/url": "^3.22.0",
+		"@wordpress/viewport": "^4.19.0",
+		"@wordpress/warning": "^2.21.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
+	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
 }

package/src/components/block-manager/category.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { includes, map, without } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ function BlockManagerCategory( { title, blockTypes } ) {
 			return blockTypes;
 		}
 		return blockTypes.filter( ( { name } ) => {
-			return includes( defaultAllowedBlockTypes || [], name );
+			return defaultAllowedBlockTypes?.includes( name );
 		} );
 	}, [ defaultAllowedBlockTypes, blockTypes ] );
 	const { showBlockTypes, hideBlockTypes } = useDispatch( editPostStore );
@@ -64,9 +64,8 @@ function BlockManagerCategory( { title, blockTypes } ) {
 		return null;
 	}
 
-	const checkedBlockNames = without(
-		map( filteredBlockTypes, 'name' ),
-		...hiddenBlockTypes
+	const checkedBlockNames = map( filteredBlockTypes, 'name' ).filter(
+		( type ) => ! hiddenBlockTypes.includes( type )
 	);
 
 	const titleId = 'edit-post-block-manager__category-title-' + instanceId;

package/src/components/block-manager/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, includes } from 'lodash';
+import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ function BlockManager( {
 			hasBlockSupport( blockType, 'inserter', true ) &&
 			( ! search || isMatchingSearchTerm( blockType, search ) ) &&
 			( ! blockType.parent ||
-				includes( blockType.parent, 'core/post-content' ) )
+				blockType.parent.includes( 'core/post-content' ) )
 	);
 
 	// Announce search results on change

package/src/components/device-preview/index.js

@@ -49,6 +49,8 @@ export default function DevicePreview() {
 			className="edit-post-post-preview-dropdown"
 			deviceType={ deviceType }
 			setDeviceType={ setPreviewDeviceType }
+			/* translators: button label text should, if possible, be under 16 characters. */
+			viewLabel={ __( 'Preview' ) }
 		>
 			{ isViewable && (
 				<MenuGroup>

package/src/components/editor-initialization/test/listener-hooks.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer, { act } from 'react-test-renderer';
+import { render, act } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -62,11 +62,6 @@ describe( 'listener hook tests', () => {
 		},
 	};
 
-	let registry;
-	beforeEach( () => {
-		registry = createRegistry( mockStores );
-	} );
-
 	const setMockReturnValue = ( store, functionName, value ) => {
 		mockStores[ store ].selectors[ functionName ].mockReturnValue( value );
 	};
@@ -74,20 +69,7 @@ describe( 'listener hook tests', () => {
 		mockStores[ store ].selectors[ functionName ];
 	const getSpyedAction = ( store, actionName ) =>
 		mockStores[ store ].actions[ actionName ];
-	const renderComponent = ( testedHook, id, renderer = null ) => {
-		const TestComponent = ( { postId } ) => {
-			testedHook( postId );
-			return null;
-		};
-		const TestedOutput = (
-			<RegistryProvider value={ registry }>
-				<TestComponent postId={ id } />
-			</RegistryProvider>
-		);
-		return renderer === null
-			? TestRenderer.create( TestedOutput )
-			: renderer.update( TestedOutput );
-	};
+
 	afterEach( () => {
 		Object.values( mockStores ).forEach( ( storeMocks ) => {
 			Object.values( storeMocks.selectors ).forEach( ( mock ) => {
@@ -99,17 +81,29 @@ describe( 'listener hook tests', () => {
 		} );
 	} );
 	describe( 'useBlockSelectionListener', () => {
+		const registry = createRegistry( mockStores );
+		const TestComponent = ( { postId } ) => {
+			useBlockSelectionListener( postId );
+			return null;
+		};
+		const TestedOutput = () => {
+			return (
+				<RegistryProvider value={ registry }>
+					<TestComponent postId={ 10 } />
+				</RegistryProvider>
+			);
+		};
+
 		it( 'does nothing when editor sidebar is not open', () => {
 			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', false );
-			act( () => {
-				renderComponent( useBlockSelectionListener, 10 );
-			} );
+			render( <TestedOutput /> );
+
 			expect(
 				getSpyedFunction( STORE_NAME, 'isEditorSidebarOpened' )
 			).toHaveBeenCalled();
 			expect(
 				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
-			).toHaveBeenCalledTimes( 0 );
+			).not.toHaveBeenCalled();
 		} );
 		it( 'opens block sidebar if block is selected', () => {
 			setMockReturnValue( STORE_NAME, 'isEditorSidebarOpened', true );
@@ -118,9 +112,9 @@ describe( 'listener hook tests', () => {
 				'getBlockSelectionStart',
 				true
 			);
-			act( () => {
-				renderComponent( useBlockSelectionListener, 10 );
-			} );
+
+			render( <TestedOutput /> );
+
 			expect(
 				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
 			).toHaveBeenCalledWith( 'edit-post/block' );
@@ -132,9 +126,9 @@ describe( 'listener hook tests', () => {
 				'getBlockSelectionStart',
 				false
 			);
-			act( () => {
-				renderComponent( useBlockSelectionListener, 10 );
-			} );
+
+			render( <TestedOutput /> );
+
 			expect(
 				getSpyedAction( STORE_NAME, 'openGeneralSidebar' )
 			).toHaveBeenCalledWith( 'edit-post/document' );
@@ -142,6 +136,19 @@ describe( 'listener hook tests', () => {
 	} );
 
 	describe( 'useUpdatePostLinkListener', () => {
+		const registry = createRegistry( mockStores );
+		const TestComponent = ( { postId } ) => {
+			useUpdatePostLinkListener( postId );
+			return null;
+		};
+		const TestedOutput = ( { postId = 10 } ) => {
+			return (
+				<RegistryProvider value={ registry }>
+					<TestComponent postId={ postId } />
+				</RegistryProvider>
+			);
+		};
+
 		const setAttribute = jest.fn();
 		const mockSelector = jest.fn();
 		beforeEach( () => {
@@ -158,29 +165,24 @@ describe( 'listener hook tests', () => {
 			setMockReturnValue( 'core/editor', 'getCurrentPost', {
 				link: 'foo',
 			} );
-			act( () => {
-				renderComponent( useUpdatePostLinkListener, 10 );
-			} );
+			render( <TestedOutput /> );
+
 			expect( setAttribute ).not.toHaveBeenCalled();
 		} );
 		it( 'updates nothing if there is no permalink', () => {
 			setMockReturnValue( 'core/editor', 'getCurrentPost', { link: '' } );
-			act( () => {
-				renderComponent( useUpdatePostLinkListener, 10 );
-			} );
+			render( <TestedOutput /> );
+
 			expect( setAttribute ).not.toHaveBeenCalled();
 		} );
 		it( 'only calls document query selector once across renders', () => {
 			setMockReturnValue( 'core/editor', 'getCurrentPost', {
 				link: 'foo',
 			} );
-			act( () => {
-				const renderer = renderComponent(
-					useUpdatePostLinkListener,
-					10
-				);
-				renderComponent( useUpdatePostLinkListener, 20, renderer );
-			} );
+			const { rerender } = render( <TestedOutput /> );
+
+			rerender( <TestedOutput id={ 20 } /> );
+
 			expect( mockSelector ).toHaveBeenCalledTimes( 1 );
 			act( () => {
 				registry.dispatch( 'core/editor' ).forceUpdate();
@@ -191,9 +193,7 @@ describe( 'listener hook tests', () => {
 			setMockReturnValue( 'core/editor', 'getCurrentPost', {
 				link: 'foo',
 			} );
-			act( () => {
-				renderComponent( useUpdatePostLinkListener, 10 );
-			} );
+			render( <TestedOutput /> );
 			expect( setAttribute ).toHaveBeenCalledTimes( 1 );
 			act( () => {
 				registry.dispatch( 'core/editor' ).forceUpdate();
@@ -204,9 +204,7 @@ describe( 'listener hook tests', () => {
 			setMockReturnValue( 'core/editor', 'getCurrentPost', {
 				link: 'foo',
 			} );
-			act( () => {
-				renderComponent( useUpdatePostLinkListener, 10 );
-			} );
+			render( <TestedOutput /> );
 			expect( setAttribute ).toHaveBeenCalledTimes( 1 );
 			expect( setAttribute ).toHaveBeenCalledWith( 'href', 'foo' );
 

package/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FullscreenModeClose when in full screen mode should display a default site icon if no user uploaded site icon exists 1`] = `
+<div>
+  <div>
+    <a
+      aria-label="Back"
+      class="components-button edit-post-fullscreen-mode-close"
+      href="edit.php?"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="36px"
+        viewBox="-2 -2 24 24"
+        width="36px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z"
+        />
+      </svg>
+    </a>
+  </div>
+</div>
+`;

package/src/components/header/fullscreen-mode-close/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -36,12 +36,11 @@ describe( 'FullscreenModeClose', () => {
 				} ) );
 			} );
 
-			const { container } = render( <FullscreenModeClose /> );
-			const siteIcon = container.querySelector(
-				'.edit-post-fullscreen-mode-close_site-icon'
-			);
+			render( <FullscreenModeClose /> );
+
+			const siteIcon = screen.getByAltText( 'Site Icon' );
 
-			expect( siteIcon ).toBeTruthy();
+			expect( siteIcon ).toBeVisible();
 		} );
 
 		it( 'should display a default site icon if no user uploaded site icon exists', () => {
@@ -58,13 +57,12 @@ describe( 'FullscreenModeClose', () => {
 			} );
 
 			const { container } = render( <FullscreenModeClose /> );
-			const siteIcon = container.querySelector(
-				'.edit-post-fullscreen-mode-close_site-icon'
-			);
-			const defaultIcon = container.querySelector( 'svg' );
 
-			expect( siteIcon ).toBeFalsy();
-			expect( defaultIcon ).toBeTruthy();
+			expect(
+				screen.queryByAltText( 'Site Icon' )
+			).not.toBeInTheDocument();
+
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 } );