@wordpress/edit-site 5.28.1 → 5.28.2

package/build-style/style-rtl.css

@@ -1806,7 +1806,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-global-styles-screen-revisions__revision-item.is-selected::before {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
-.edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__changes,
+.edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__changes > li,
 .edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__meta,
 .edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__applied-text {
   color: #1e1e1e;
@@ -1828,7 +1828,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   width: 100%;
   height: auto;
   display: block;
-  padding: 12px 40px 8px 12px;
+  padding: 12px 40px 4px 12px;
   z-index: 1;
   position: relative;
   outline-offset: -2px;
@@ -1837,7 +1837,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-global-styles-screen-revisions__apply-button.is-primary,
 .edit-site-global-styles-screen-revisions__applied-text {
   align-self: flex-start;
-  margin: 0 40px 12px 12px;
+  margin: 4px 40px 12px 12px;
 }
 
 .edit-site-global-styles-screen-revisions__changes,
@@ -1859,15 +1859,14 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   font-size: 12px;
 }
 
-.edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
   display: flex;
   justify-content: start;
   width: 100%;
   align-items: flex-start;
   text-align: right;
+  margin-bottom: 4px;
 }
-.edit-site-global-styles-screen-revisions__changes img,
 .edit-site-global-styles-screen-revisions__meta img {
   width: 16px;
   height: 16px;
@@ -1880,10 +1879,13 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-global-styles-screen-revisions__changes {
-  margin-bottom: 4px;
   text-align: right;
-  color: #1e1e1e;
   line-height: 1.4;
+  margin-right: 12px;
+  list-style: disc;
+}
+.edit-site-global-styles-screen-revisions__changes li {
+  margin-bottom: 4px;
 }
 
 .edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination {
@@ -2856,7 +2858,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 .edit-site-change-status__content .edit-site-change-status__options label .components-text {
   display: block;
-  margin-right: 26px;
 }
 .edit-site-change-status__content .edit-site-change-status__password-legend {
   padding: 0;

package/build-style/style.css

@@ -1807,7 +1807,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-global-styles-screen-revisions__revision-item.is-selected::before {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
-.edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__changes,
+.edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__changes > li,
 .edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__meta,
 .edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__applied-text {
   color: #1e1e1e;
@@ -1829,7 +1829,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   width: 100%;
   height: auto;
   display: block;
-  padding: 12px 12px 8px 40px;
+  padding: 12px 12px 4px 40px;
   z-index: 1;
   position: relative;
   outline-offset: -2px;
@@ -1838,7 +1838,7 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 .edit-site-global-styles-screen-revisions__apply-button.is-primary,
 .edit-site-global-styles-screen-revisions__applied-text {
   align-self: flex-start;
-  margin: 0 12px 12px 40px;
+  margin: 4px 12px 12px 40px;
 }
 
 .edit-site-global-styles-screen-revisions__changes,
@@ -1860,15 +1860,14 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   font-size: 12px;
 }
 
-.edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
   display: flex;
   justify-content: start;
   width: 100%;
   align-items: flex-start;
   text-align: left;
+  margin-bottom: 4px;
 }
-.edit-site-global-styles-screen-revisions__changes img,
 .edit-site-global-styles-screen-revisions__meta img {
   width: 16px;
   height: 16px;
@@ -1881,10 +1880,13 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-global-styles-screen-revisions__changes {
-  margin-bottom: 4px;
   text-align: left;
-  color: #1e1e1e;
   line-height: 1.4;
+  margin-left: 12px;
+  list-style: disc;
+}
+.edit-site-global-styles-screen-revisions__changes li {
+  margin-bottom: 4px;
 }
 
 .edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination {
@@ -2857,7 +2859,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 .edit-site-change-status__content .edit-site-change-status__options label .components-text {
   display: block;
-  margin-left: 26px;
 }
 .edit-site-change-status__content .edit-site-change-status__password-legend {
   padding: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.28.1",
+	"version": "5.28.2",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,46 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.51.0",
-		"@wordpress/api-fetch": "^6.48.0",
-		"@wordpress/blob": "^3.51.0",
-		"@wordpress/block-editor": "^12.19.1",
-		"@wordpress/block-library": "^8.28.1",
-		"@wordpress/blocks": "^12.28.1",
-		"@wordpress/commands": "^0.22.1",
-		"@wordpress/components": "^26.0.1",
-		"@wordpress/compose": "^6.28.0",
-		"@wordpress/core-commands": "^0.20.1",
-		"@wordpress/core-data": "^6.28.1",
-		"@wordpress/data": "^9.21.0",
-		"@wordpress/dataviews": "^0.5.1",
-		"@wordpress/date": "^4.51.0",
-		"@wordpress/deprecated": "^3.51.0",
-		"@wordpress/dom": "^3.51.0",
-		"@wordpress/editor": "^13.28.1",
-		"@wordpress/element": "^5.28.0",
-		"@wordpress/escape-html": "^2.51.0",
-		"@wordpress/hooks": "^3.51.0",
-		"@wordpress/html-entities": "^3.51.0",
-		"@wordpress/i18n": "^4.51.0",
-		"@wordpress/icons": "^9.42.0",
-		"@wordpress/interface": "^5.28.1",
-		"@wordpress/keyboard-shortcuts": "^4.28.0",
-		"@wordpress/keycodes": "^3.51.0",
-		"@wordpress/media-utils": "^4.42.0",
-		"@wordpress/notices": "^4.19.0",
-		"@wordpress/patterns": "^1.12.1",
-		"@wordpress/plugins": "^6.19.1",
-		"@wordpress/preferences": "^3.28.1",
-		"@wordpress/primitives": "^3.49.0",
-		"@wordpress/private-apis": "^0.33.0",
-		"@wordpress/reusable-blocks": "^4.28.1",
-		"@wordpress/router": "^0.20.0",
-		"@wordpress/style-engine": "^1.34.0",
-		"@wordpress/url": "^3.52.0",
-		"@wordpress/viewport": "^5.28.0",
-		"@wordpress/widgets": "^3.28.1",
-		"@wordpress/wordcount": "^3.51.0",
+		"@wordpress/a11y": "^3.51.1",
+		"@wordpress/api-fetch": "^6.48.1",
+		"@wordpress/blob": "^3.51.1",
+		"@wordpress/block-editor": "^12.19.2",
+		"@wordpress/block-library": "^8.28.2",
+		"@wordpress/blocks": "^12.28.2",
+		"@wordpress/commands": "^0.22.2",
+		"@wordpress/components": "^26.0.2",
+		"@wordpress/compose": "^6.28.1",
+		"@wordpress/core-commands": "^0.20.2",
+		"@wordpress/core-data": "^6.28.2",
+		"@wordpress/data": "^9.21.1",
+		"@wordpress/dataviews": "^0.5.2",
+		"@wordpress/date": "^4.51.1",
+		"@wordpress/deprecated": "^3.51.1",
+		"@wordpress/dom": "^3.51.1",
+		"@wordpress/editor": "^13.28.2",
+		"@wordpress/element": "^5.28.1",
+		"@wordpress/escape-html": "^2.51.1",
+		"@wordpress/hooks": "^3.51.1",
+		"@wordpress/html-entities": "^3.51.1",
+		"@wordpress/i18n": "^4.51.1",
+		"@wordpress/icons": "^9.42.1",
+		"@wordpress/interface": "^5.28.2",
+		"@wordpress/keyboard-shortcuts": "^4.28.1",
+		"@wordpress/keycodes": "^3.51.1",
+		"@wordpress/media-utils": "^4.42.1",
+		"@wordpress/notices": "^4.19.1",
+		"@wordpress/patterns": "^1.12.2",
+		"@wordpress/plugins": "^6.19.2",
+		"@wordpress/preferences": "^3.28.2",
+		"@wordpress/primitives": "^3.49.1",
+		"@wordpress/private-apis": "^0.33.1",
+		"@wordpress/reusable-blocks": "^4.28.2",
+		"@wordpress/router": "^0.20.1",
+		"@wordpress/style-engine": "^1.34.1",
+		"@wordpress/url": "^3.52.1",
+		"@wordpress/viewport": "^5.28.1",
+		"@wordpress/widgets": "^3.28.2",
+		"@wordpress/wordcount": "^3.51.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5902fc0f490528da6965dd4cf97f11192bcf5956"
+	"gitHead": "730beb7fd33d3382d6032c3f33e451625a0fcf36"
 }

package/src/components/global-styles/font-library-modal/context.js

@@ -392,7 +392,7 @@ function FontLibraryProvider( { children } ) {
 					loadFontFaceInBrowser(
 						face,
 						getDisplaySrcFromFontFace( face.src ),
-						'iframe'
+						'all'
 					);
 				} );
 			}

package/src/components/global-styles/font-library-modal/utils/index.js

@@ -9,7 +9,7 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { FONT_WEIGHTS, FONT_STYLES } from './constants';
 import { unlock } from '../../../../lock-unlock';
 import { fetchInstallFontFace } from '../resolvers';
-import { formatFontFamily } from './preview-styles';
+import { formatFontFaceName } from './preview-styles';
 
 /**
  * Browser dependencies
@@ -99,7 +99,7 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 
 	const newFont = new window.FontFace(
-		formatFontFamily( fontFace.fontFamily ),
+		formatFontFaceName( fontFace.fontFamily ),
 		dataSource,
 		{
 			style: fontFace.fontStyle,

package/src/components/global-styles/font-library-modal/utils/make-families-from-faces.js

@@ -1,10 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../../lock-unlock';
+
+const { kebabCase } = unlock( componentsPrivateApis );
+
 export default function makeFamiliesFromFaces( fontFaces ) {
 	const fontFamiliesObject = fontFaces.reduce( ( acc, item ) => {
 		if ( ! acc[ item.fontFamily ] ) {
 			acc[ item.fontFamily ] = {
 				name: item.fontFamily,
 				fontFamily: item.fontFamily,
-				slug: item.fontFamily.replace( /\s+/g, '-' ).toLowerCase(),
+				slug: kebabCase( item.fontFamily.toLowerCase() ),
 				fontFace: [],
 			};
 		}

package/src/components/global-styles/font-library-modal/utils/preview-styles.js

@@ -30,22 +30,79 @@ function extractFontWeights( fontFaces ) {
 	return result;
 }
 
+/*
+ * Format the font family to use in the CSS font-family property of a CSS rule.
+ *
+ * The input can be a string with the font family name or a string with multiple font family names separated by commas.
+ * It follows the recommendations from the CSS Fonts Module Level 4.
+ * https://www.w3.org/TR/css-fonts-4/#font-family-prop
+ *
+ * @param {string} input - The font family.
+ * @return {string} The formatted font family.
+ *
+ * Example:
+ * formatFontFamily( "Open Sans, Font+Name, sans-serif" ) => '"Open Sans", "Font+Name", sans-serif'
+ * formatFontFamily( "'Open Sans', generic(kai), sans-serif" ) => '"Open Sans", sans-serif'
+ * formatFontFamily( "DotGothic16, Slabo 27px, serif" ) => '"DotGothic16","Slabo 27px",serif'
+ * formatFontFamily( "Mine's, Moe's Typography" ) => `"mine's","Moe's Typography"`
+ */
 export function formatFontFamily( input ) {
-	return input
-		.split( ',' )
-		.map( ( font ) => {
-			font = font.trim(); // Remove any leading or trailing white spaces
-			// If the font doesn't start with quotes and contains a space, then wrap in quotes.
-			// Check that string starts with a single or double quote and not a space
-			if (
-				! ( font.startsWith( '"' ) || font.startsWith( "'" ) ) &&
-				font.indexOf( ' ' ) !== -1
-			) {
-				return `"${ font }"`;
-			}
-			return font; // Return font as is if no transformation is needed
-		} )
-		.join( ', ' );
+	// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).
+	const regex = /^(?!generic\([ a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/;
+	const output = input.trim();
+
+	const formatItem = ( item ) => {
+		item = item.trim();
+		if ( item.match( regex ) ) {
+			// removes leading and trailing quotes.
+			item = item.replace( /^["']|["']$/g, '' );
+			return `"${ item }"`;
+		}
+		return item;
+	};
+
+	if ( output.includes( ',' ) ) {
+		return output
+			.split( ',' )
+			.map( formatItem )
+			.filter( ( item ) => item !== '' )
+			.join( ', ' );
+	}
+
+	return formatItem( output );
+}
+
+/*
+ * Format the font face name to use in the font-family property of a font face.
+ *
+ * The input can be a string with the font face name or a string with multiple font face names separated by commas.
+ * It removes the leading and trailing quotes from the font face name.
+ *
+ * @param {string} input - The font face name.
+ * @return {string} The formatted font face name.
+ *
+ * Example:
+ * formatFontFaceName("Open Sans") => "Open Sans"
+ * formatFontFaceName("'Open Sans', sans-serif") => "Open Sans"
+ * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
+ */
+export function formatFontFaceName( input ) {
+	let output = input.trim();
+	if ( output.includes( ',' ) ) {
+		output = output
+			.split( ',' )
+			// finds the first item that is not an empty string.
+			.find( ( item ) => item.trim() !== '' )
+			.trim();
+	}
+	// removes leading and trailing quotes.
+	output = output.replace( /^["']|["']$/g, '' );
+
+	// Firefox needs the font name to be wrapped in double quotes meanwhile other browsers don't.
+	if ( window.navigator.userAgent.toLowerCase().includes( 'firefox' ) ) {
+		output = `"${ output }"`;
+	}
+	return output;
 }
 
 export function getFamilyPreviewStyle( family ) {

package/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js

@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { getFamilyPreviewStyle, formatFontFamily } from '../preview-styles';
+import {
+	getFamilyPreviewStyle,
+	formatFontFamily,
+	formatFontFaceName,
+} from '../preview-styles';
 
 describe( 'getFamilyPreviewStyle', () => {
 	it( 'should return default fontStyle and fontWeight if fontFace is not provided', () => {
@@ -139,7 +143,7 @@ describe( 'formatFontFamily', () => {
 				"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
 			)
 		).toBe(
-			"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+			'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif'
 		);
 	} );
 
@@ -153,9 +157,60 @@ describe( 'formatFontFamily', () => {
 		);
 	} );
 
-	it( 'should wrap only those font names with spaces which are not already quoted', () => {
-		expect( formatFontFamily( 'Baloo Bhai 2, Arial' ) ).toBe(
-			'"Baloo Bhai 2", Arial'
+	it( 'should wrap names with special characters in quotes', () => {
+		expect(
+			formatFontFamily(
+				'Font+Name, Font*Name, _Font_Name_, generic(kai), sans-serif'
+			)
+		).toBe(
+			'"Font+Name", "Font*Name", "_Font_Name_", generic(kai), sans-serif'
+		);
+	} );
+
+	it( 'should fix empty wrong formatted font family', () => {
+		expect( formatFontFamily( ', Abril Fatface,Times,serif' ) ).toBe(
+			'"Abril Fatface", Times, serif'
+		);
+	} );
+
+	it( 'should not add quotes to generic names', () => {
+		expect(
+			formatFontFamily(
+				'Paren(thesis)Font, generic(kai), generic(fasongsong), generic( abc ), Helvetica Neue'
+			)
+		).toBe(
+			'"Paren(thesis)Font", generic(kai), generic(fasongsong), generic( abc ), "Helvetica Neue"'
 		);
 	} );
 } );
+
+describe( 'formatFontFaceName', () => {
+	it( 'should remove leading and trailing quotes', () => {
+		expect( formatFontFaceName( '"Open Sans"' ) ).toBe( 'Open Sans' );
+	} );
+
+	it( 'should remove leading and trailing quotes from multiple font face names', () => {
+		expect(
+			formatFontFaceName( "'Open Sans', 'Helvetica Neue', sans-serif" )
+		).toBe( 'Open Sans' );
+	} );
+
+	it( 'should remove leading and trailing quotes even from names with spaces and special characters', () => {
+		expect( formatFontFaceName( "'Font+Name 24', sans-serif" ) ).toBe(
+			'Font+Name 24'
+		);
+	} );
+
+	it( 'should ouput the font face name with quotes on Firefox', () => {
+		const mockUserAgent =
+			'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0';
+
+		// Mock the userAgent for this test
+		Object.defineProperty( window.navigator, 'userAgent', {
+			value: mockUserAgent,
+			configurable: true,
+		} );
+
+		expect( formatFontFaceName( 'Open Sans' ) ).toBe( '"Open Sans"' );
+	} );
+} );

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -25,19 +25,20 @@ function ChangesSummary( { revision, previousRevision } ) {
 	const changes = getGlobalStylesChanges( revision, previousRevision, {
 		maxResults: 7,
 	} );
-	const changesLength = changes.length;
 
-	if ( ! changesLength ) {
+	if ( ! changes.length ) {
 		return null;
 	}
 
 	return (
-		<span
+		<ul
 			data-testid="global-styles-revision-changes"
 			className="edit-site-global-styles-screen-revisions__changes"
 		>
-			{ changes.join( ', ' ) }.
-		</span>
+			{ changes.map( ( change ) => (
+				<li key={ change }>{ change }</li>
+			) ) }
+		</ul>
 	);
 }
 
@@ -219,6 +220,7 @@ function RevisionsButtons( {
 							) : (
 								<Button
 									disabled={ areStylesEqual }
+									size="compact"
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__apply-button"
 									onClick={ onApplyRevision }

package/src/components/global-styles/screen-revisions/style.scss

@@ -64,7 +64,7 @@
 			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 		}
 
-		.edit-site-global-styles-screen-revisions__changes,
+		.edit-site-global-styles-screen-revisions__changes > li,
 		.edit-site-global-styles-screen-revisions__meta,
 		.edit-site-global-styles-screen-revisions__applied-text {
 			color: $gray-900;
@@ -92,7 +92,7 @@
 		width: 100%;
 		height: auto;
 		display: block;
-		padding: $grid-unit-15 $grid-unit-15 $grid-unit-10 $grid-unit-50;
+		padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
 		z-index: 1;
 		position: relative;
 		outline-offset: -2px;
@@ -103,7 +103,7 @@
 .edit-site-global-styles-screen-revisions__applied-text {
 	align-self: flex-start;
 	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button.
-	margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-50;
+	margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50;
 }
 
 .edit-site-global-styles-screen-revisions__changes,
@@ -125,13 +125,14 @@
 	}
 }
 
-.edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
 	display: flex;
 	justify-content: start;
 	width: 100%;
 	align-items: flex-start;
 	text-align: left;
+	margin-bottom: $grid-unit-05;
+
 	img {
 		width: $grid-unit-20;
 		height: $grid-unit-20;
@@ -145,10 +146,14 @@
 }
 
 .edit-site-global-styles-screen-revisions__changes {
-	margin-bottom: $grid-unit-05;
 	text-align: left;
-	color: $gray-900;
 	line-height: $default-line-height;
+	margin-left: $grid-unit-15;
+	list-style: disc;
+
+	li {
+		margin-bottom: $grid-unit-05;
+	}
 }
 
 .edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination {

package/src/components/media/index.js

@@ -8,18 +8,16 @@ function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
 	const currentSize = size.find(
 		( s ) => !! media?.media_details?.sizes[ s ]
 	);
-	const mediaDetails = media?.media_details?.sizes[ currentSize ];
-	if ( ! mediaDetails ) {
+
+	const mediaUrl =
+		media?.media_details?.sizes[ currentSize ]?.source_url ||
+		media?.source_url;
+
+	if ( ! mediaUrl ) {
 		return null;
 	}
 
-	return (
-		<img
-			{ ...props }
-			src={ mediaDetails.source_url }
-			alt={ media.alt_text }
-		/>
-	);
+	return <img { ...props } src={ mediaUrl } alt={ media.alt_text } />;
 }
 
 export default Media;

package/src/components/sidebar/index.js

@@ -12,6 +12,7 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -31,7 +32,8 @@ import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen
 import SaveHub from '../save-hub';
 import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
-import SidebarNavigationScreenPagesDataViews from '../sidebar-navigation-screen-pages-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -69,7 +71,10 @@ function SidebarScreens() {
 				<SidebarNavigationScreenPages />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/pages">
-				<SidebarNavigationScreenPagesDataViews />
+				<SidebarNavigationScreen
+					title={ __( 'Pages' ) }
+					content={ <DataViewsSidebarContent /> }
+				/>
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page/:postId">
 				<SidebarNavigationScreenPage />

package/src/components/sidebar-dataviews/default-views.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { trash } from '@wordpress/icons';
 
 /**
@@ -49,7 +49,7 @@ const DEFAULT_PAGE_BASE = {
 export const DEFAULT_VIEWS = {
 	page: [
 		{
-			title: _x( 'All', 'pages' ),
+			title: __( 'All pages' ),
 			slug: 'all',
 			view: DEFAULT_PAGE_BASE,
 		},

package/src/components/sidebar-edit-mode/page-panels/style.scss

@@ -18,7 +18,6 @@
 		label {
 			.components-text {
 				display: block;
-				margin-left: $radio-input-size + 6;
 			}
 		}
 	}