@wordpress/edit-site 5.28.1 → 5.28.3

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.formatFontFaceName = formatFontFaceName;
 exports.formatFontFamily = formatFontFamily;
 exports.getFacePreviewStyle = getFacePreviewStyle;
 exports.getFamilyPreviewStyle = getFamilyPreviewStyle;
@@ -32,16 +33,71 @@ 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"`
+ */
 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}"`;
+  // 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 font; // Return font as is if no transformation is needed
-  }).join(', ');
+    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"
+ */
+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;
 }
 function getFamilyPreviewStyle(family) {
   const style = {

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

@@ -1 +1 @@
-{"version":3,"names":["findNearest","input","numbers","length","sort","a","b","Math","abs","extractFontWeights","fontFaces","result","forEach","face","weights","String","fontWeight","split","start","parseInt","end","i","push","formatFontFamily","map","font","trim","startsWith","indexOf","join","getFamilyPreviewStyle","family","style","fontFamily","Array","isArray","fontFace","fontStyle","normalFaces","filter","toLowerCase","normalWeights","nearestWeight","getFacePreviewStyle"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js"],"sourcesContent":["function findNearest( input, numbers ) {\n\t// If the numbers array is empty, return null\n\tif ( numbers.length === 0 ) {\n\t\treturn null;\n\t}\n\t// Sort the array based on the absolute difference with the input\n\tnumbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );\n\t// Return the first element (which will be the nearest) from the sorted array\n\treturn numbers[ 0 ];\n}\n\nfunction extractFontWeights( fontFaces ) {\n\tconst result = [];\n\n\tfontFaces.forEach( ( face ) => {\n\t\tconst weights = String( face.fontWeight ).split( ' ' );\n\n\t\tif ( weights.length === 2 ) {\n\t\t\tconst start = parseInt( weights[ 0 ] );\n\t\t\tconst end = parseInt( weights[ 1 ] );\n\n\t\t\tfor ( let i = start; i <= end; i += 100 ) {\n\t\t\t\tresult.push( i );\n\t\t\t}\n\t\t} else if ( weights.length === 1 ) {\n\t\t\tresult.push( parseInt( weights[ 0 ] ) );\n\t\t}\n\t} );\n\n\treturn result;\n}\n\nexport function formatFontFamily( input ) {\n\treturn input\n\t\t.split( ',' )\n\t\t.map( ( font ) => {\n\t\t\tfont = font.trim(); // Remove any leading or trailing white spaces\n\t\t\t// If the font doesn't start with quotes and contains a space, then wrap in quotes.\n\t\t\t// Check that string starts with a single or double quote and not a space\n\t\t\tif (\n\t\t\t\t! ( font.startsWith( '\"' ) || font.startsWith( \"'\" ) ) &&\n\t\t\t\tfont.indexOf( ' ' ) !== -1\n\t\t\t) {\n\t\t\t\treturn `\"${ font }\"`;\n\t\t\t}\n\t\t\treturn font; // Return font as is if no transformation is needed\n\t\t} )\n\t\t.join( ', ' );\n}\n\nexport function getFamilyPreviewStyle( family ) {\n\tconst style = { fontFamily: formatFontFamily( family.fontFamily ) };\n\n\tif ( ! Array.isArray( family.fontFace ) ) {\n\t\tstyle.fontWeight = '400';\n\t\tstyle.fontStyle = 'normal';\n\t\treturn style;\n\t}\n\n\tif ( family.fontFace ) {\n\t\t//get all the font faces with normal style\n\t\tconst normalFaces = family.fontFace.filter(\n\t\t\t( face ) => face.fontStyle.toLowerCase() === 'normal'\n\t\t);\n\t\tif ( normalFaces.length > 0 ) {\n\t\t\tstyle.fontStyle = 'normal';\n\t\t\tconst normalWeights = extractFontWeights( normalFaces );\n\t\t\tconst nearestWeight = findNearest( 400, normalWeights );\n\t\t\tstyle.fontWeight = String( nearestWeight ) || '400';\n\t\t} else {\n\t\t\tstyle.fontStyle =\n\t\t\t\t( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||\n\t\t\t\t'normal';\n\t\t\tstyle.fontWeight =\n\t\t\t\t( family.fontFace.length &&\n\t\t\t\t\tString( family.fontFace[ 0 ].fontWeight ) ) ||\n\t\t\t\t'400';\n\t\t}\n\t}\n\n\treturn style;\n}\n\nexport function getFacePreviewStyle( face ) {\n\treturn {\n\t\tfontFamily: formatFontFamily( face.fontFamily ),\n\t\tfontStyle: face.fontStyle || 'normal',\n\t\tfontWeight: face.fontWeight || '400',\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["findNearest","input","numbers","length","sort","a","b","Math","abs","extractFontWeights","fontFaces","result","forEach","face","weights","String","fontWeight","split","start","parseInt","end","i","push","formatFontFamily","regex","output","trim","formatItem","item","match","replace","includes","map","filter","join","formatFontFaceName","find","window","navigator","userAgent","toLowerCase","getFamilyPreviewStyle","family","style","fontFamily","Array","isArray","fontFace","fontStyle","normalFaces","normalWeights","nearestWeight","getFacePreviewStyle"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/utils/preview-styles.js"],"sourcesContent":["function findNearest( input, numbers ) {\n\t// If the numbers array is empty, return null\n\tif ( numbers.length === 0 ) {\n\t\treturn null;\n\t}\n\t// Sort the array based on the absolute difference with the input\n\tnumbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );\n\t// Return the first element (which will be the nearest) from the sorted array\n\treturn numbers[ 0 ];\n}\n\nfunction extractFontWeights( fontFaces ) {\n\tconst result = [];\n\n\tfontFaces.forEach( ( face ) => {\n\t\tconst weights = String( face.fontWeight ).split( ' ' );\n\n\t\tif ( weights.length === 2 ) {\n\t\t\tconst start = parseInt( weights[ 0 ] );\n\t\t\tconst end = parseInt( weights[ 1 ] );\n\n\t\t\tfor ( let i = start; i <= end; i += 100 ) {\n\t\t\t\tresult.push( i );\n\t\t\t}\n\t\t} else if ( weights.length === 1 ) {\n\t\t\tresult.push( parseInt( weights[ 0 ] ) );\n\t\t}\n\t} );\n\n\treturn result;\n}\n\n/*\n * Format the font family to use in the CSS font-family property of a CSS rule.\n *\n * The input can be a string with the font family name or a string with multiple font family names separated by commas.\n * It follows the recommendations from the CSS Fonts Module Level 4.\n * https://www.w3.org/TR/css-fonts-4/#font-family-prop\n *\n * @param {string} input - The font family.\n * @return {string} The formatted font family.\n *\n * Example:\n * formatFontFamily( \"Open Sans, Font+Name, sans-serif\" ) => '\"Open Sans\", \"Font+Name\", sans-serif'\n * formatFontFamily( \"'Open Sans', generic(kai), sans-serif\" ) => '\"Open Sans\", sans-serif'\n * formatFontFamily( \"DotGothic16, Slabo 27px, serif\" ) => '\"DotGothic16\",\"Slabo 27px\",serif'\n * formatFontFamily( \"Mine's, Moe's Typography\" ) => `\"mine's\",\"Moe's Typography\"`\n */\nexport function formatFontFamily( input ) {\n\t// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).\n\tconst regex = /^(?!generic\\([ a-zA-Z\\-]+\\)$)(?!^[a-zA-Z\\-]+$).+/;\n\tconst output = input.trim();\n\n\tconst formatItem = ( item ) => {\n\t\titem = item.trim();\n\t\tif ( item.match( regex ) ) {\n\t\t\t// removes leading and trailing quotes.\n\t\t\titem = item.replace( /^[\"']|[\"']$/g, '' );\n\t\t\treturn `\"${ item }\"`;\n\t\t}\n\t\treturn item;\n\t};\n\n\tif ( output.includes( ',' ) ) {\n\t\treturn output\n\t\t\t.split( ',' )\n\t\t\t.map( formatItem )\n\t\t\t.filter( ( item ) => item !== '' )\n\t\t\t.join( ', ' );\n\t}\n\n\treturn formatItem( output );\n}\n\n/*\n * Format the font face name to use in the font-family property of a font face.\n *\n * The input can be a string with the font face name or a string with multiple font face names separated by commas.\n * It removes the leading and trailing quotes from the font face name.\n *\n * @param {string} input - The font face name.\n * @return {string} The formatted font face name.\n *\n * Example:\n * formatFontFaceName(\"Open Sans\") => \"Open Sans\"\n * formatFontFaceName(\"'Open Sans', sans-serif\") => \"Open Sans\"\n * formatFontFaceName(\", 'Open Sans', 'Helvetica Neue', sans-serif\") => \"Open Sans\"\n */\nexport function formatFontFaceName( input ) {\n\tlet output = input.trim();\n\tif ( output.includes( ',' ) ) {\n\t\toutput = output\n\t\t\t.split( ',' )\n\t\t\t// finds the first item that is not an empty string.\n\t\t\t.find( ( item ) => item.trim() !== '' )\n\t\t\t.trim();\n\t}\n\t// removes leading and trailing quotes.\n\toutput = output.replace( /^[\"']|[\"']$/g, '' );\n\n\t// Firefox needs the font name to be wrapped in double quotes meanwhile other browsers don't.\n\tif ( window.navigator.userAgent.toLowerCase().includes( 'firefox' ) ) {\n\t\toutput = `\"${ output }\"`;\n\t}\n\treturn output;\n}\n\nexport function getFamilyPreviewStyle( family ) {\n\tconst style = { fontFamily: formatFontFamily( family.fontFamily ) };\n\n\tif ( ! Array.isArray( family.fontFace ) ) {\n\t\tstyle.fontWeight = '400';\n\t\tstyle.fontStyle = 'normal';\n\t\treturn style;\n\t}\n\n\tif ( family.fontFace ) {\n\t\t//get all the font faces with normal style\n\t\tconst normalFaces = family.fontFace.filter(\n\t\t\t( face ) => face.fontStyle.toLowerCase() === 'normal'\n\t\t);\n\t\tif ( normalFaces.length > 0 ) {\n\t\t\tstyle.fontStyle = 'normal';\n\t\t\tconst normalWeights = extractFontWeights( normalFaces );\n\t\t\tconst nearestWeight = findNearest( 400, normalWeights );\n\t\t\tstyle.fontWeight = String( nearestWeight ) || '400';\n\t\t} else {\n\t\t\tstyle.fontStyle =\n\t\t\t\t( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||\n\t\t\t\t'normal';\n\t\t\tstyle.fontWeight =\n\t\t\t\t( family.fontFace.length &&\n\t\t\t\t\tString( family.fontFace[ 0 ].fontWeight ) ) ||\n\t\t\t\t'400';\n\t\t}\n\t}\n\n\treturn style;\n}\n\nexport function getFacePreviewStyle( face ) {\n\treturn {\n\t\tfontFamily: formatFontFamily( face.fontFamily ),\n\t\tfontStyle: face.fontStyle || 'normal',\n\t\tfontWeight: face.fontWeight || '400',\n\t};\n}\n"],"mappings":"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"}

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

@@ -37,14 +37,15 @@ function ChangesSummary({
   const changes = getGlobalStylesChanges(revision, previousRevision, {
     maxResults: 7
   });
-  const changesLength = changes.length;
-  if (!changesLength) {
+  if (!changes.length) {
     return null;
   }
-  return (0, _react.createElement)("span", {
+  return (0, _react.createElement)("ul", {
     "data-testid": "global-styles-revision-changes",
     className: "edit-site-global-styles-screen-revisions__changes"
-  }, changes.join(', '), ".");
+  }, changes.map(change => (0, _react.createElement)("li", {
+    key: change
+  }, change)));
 }
 
 /**
@@ -167,6 +168,7 @@ function RevisionsButtons({
       className: "edit-site-global-styles-screen-revisions__applied-text"
     }, (0, _i18n.__)('These styles are already applied to your site.')) : (0, _react.createElement)(_components.Button, {
       disabled: areStylesEqual,
+      size: "compact",
       variant: "primary",
       className: "edit-site-global-styles-screen-revisions__apply-button",
       onClick: onApplyRevision

package/build/components/global-styles/screen-revisions/revisions-buttons.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_components","_date","_coreData","_data","_blockEditor","_lockUnlock","DAY_IN_MILLISECONDS","getGlobalStylesChanges","unlock","blockEditorPrivateApis","ChangesSummary","revision","previousRevision","changes","maxResults","changesLength","length","_react","createElement","className","join","getRevisionLabel","id","authorDisplayName","formattedModifiedDate","areStylesEqual","__","sprintf","RevisionsButtons","userRevisions","selectedRevisionId","onChange","canApplyRevision","onApplyRevision","currentThemeName","currentUser","useSelect","select","getCurrentTheme","getCurrentUser","coreStore","currentTheme","name","rendered","stylesheet","dateNowInMs","getDate","getTime","datetimeAbbreviated","getSettings","formats","role","map","index","author","modified","isUnsaved","revisionAuthor","authorAvatar","avatar_urls","isFirstItem","isSelected","isReset","modifiedDate","displayDate","dateI18n","humanTimeDiff","revisionLabel","classnames","key","Button","disabled","onClick","dateTime","alt","src","variant","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\n\nconst DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;\nconst { getGlobalStylesChanges } = unlock( blockEditorPrivateApis );\n\nfunction ChangesSummary( { revision, previousRevision } ) {\n\tconst changes = getGlobalStylesChanges( revision, previousRevision, {\n\t\tmaxResults: 7,\n\t} );\n\tconst changesLength = changes.length;\n\n\tif ( ! changesLength ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<span\n\t\t\tdata-testid=\"global-styles-revision-changes\"\n\t\t\tclassName=\"edit-site-global-styles-screen-revisions__changes\"\n\t\t>\n\t\t\t{ changes.join( ', ' ) }.\n\t\t</span>\n\t);\n}\n\n/**\n * Returns a button label for the revision.\n *\n * @param {string|number} id                    A revision object.\n * @param {string}        authorDisplayName     Author name.\n * @param {string}        formattedModifiedDate Revision modified date formatted.\n * @param {boolean}       areStylesEqual        Whether the revision matches the current editor styles.\n * @return {string} Translated label.\n */\nfunction getRevisionLabel(\n\tid,\n\tauthorDisplayName,\n\tformattedModifiedDate,\n\tareStylesEqual\n) {\n\tif ( 'parent' === id ) {\n\t\treturn __( 'Reset the styles to the theme defaults' );\n\t}\n\n\tif ( 'unsaved' === id ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %s: author display name */\n\t\t\t__( 'Unsaved changes by %s' ),\n\t\t\tauthorDisplayName\n\t\t);\n\t}\n\n\treturn areStylesEqual\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: author display name, %2$s: revision creation date.\n\t\t\t\t__(\n\t\t\t\t\t'Changes saved by %1$s on %2$s. This revision matches current editor styles.'\n\t\t\t\t),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  )\n\t\t: sprintf(\n\t\t\t\t// translators: %1$s: author display name, %2$s: revision creation date.\n\t\t\t\t__( 'Changes saved by %1$s on %2$s' ),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  );\n}\n\n/**\n * Returns a rendered list of revisions buttons.\n *\n * @typedef {Object} props\n * @property {Array<Object>} userRevisions      A collection of user revisions.\n * @property {number}        selectedRevisionId The id of the currently-selected revision.\n * @property {Function}      onChange           Callback fired when a revision is selected.\n *\n * @param    {props}         Component          props.\n * @return {JSX.Element} The modal component.\n */\nfunction RevisionsButtons( {\n\tuserRevisions,\n\tselectedRevisionId,\n\tonChange,\n\tcanApplyRevision,\n\tonApplyRevision,\n} ) {\n\tconst { currentThemeName, currentUser } = useSelect( ( select ) => {\n\t\tconst { getCurrentTheme, getCurrentUser } = select( coreStore );\n\t\tconst currentTheme = getCurrentTheme();\n\t\treturn {\n\t\t\tcurrentThemeName:\n\t\t\t\tcurrentTheme?.name?.rendered || currentTheme?.stylesheet,\n\t\t\tcurrentUser: getCurrentUser(),\n\t\t};\n\t}, [] );\n\tconst dateNowInMs = getDate().getTime();\n\tconst { datetimeAbbreviated } = getSettings().formats;\n\n\treturn (\n\t\t<ol\n\t\t\tclassName=\"edit-site-global-styles-screen-revisions__revisions-list\"\n\t\t\taria-label={ __( 'Global styles revisions list' ) }\n\t\t\trole=\"group\"\n\t\t>\n\t\t\t{ userRevisions.map( ( revision, index ) => {\n\t\t\t\tconst { id, author, modified } = revision;\n\t\t\t\tconst isUnsaved = 'unsaved' === id;\n\t\t\t\t// Unsaved changes are created by the current user.\n\t\t\t\tconst revisionAuthor = isUnsaved ? currentUser : author;\n\t\t\t\tconst authorDisplayName = revisionAuthor?.name || __( 'User' );\n\t\t\t\tconst authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];\n\t\t\t\tconst isFirstItem = index === 0;\n\t\t\t\tconst isSelected = selectedRevisionId\n\t\t\t\t\t? selectedRevisionId === id\n\t\t\t\t\t: isFirstItem;\n\t\t\t\tconst areStylesEqual = ! canApplyRevision && isSelected;\n\t\t\t\tconst isReset = 'parent' === id;\n\t\t\t\tconst modifiedDate = getDate( modified );\n\t\t\t\tconst displayDate =\n\t\t\t\t\tmodified &&\n\t\t\t\t\tdateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS\n\t\t\t\t\t\t? dateI18n( datetimeAbbreviated, modifiedDate )\n\t\t\t\t\t\t: humanTimeDiff( modified );\n\t\t\t\tconst revisionLabel = getRevisionLabel(\n\t\t\t\t\tid,\n\t\t\t\t\tauthorDisplayName,\n\t\t\t\t\tdateI18n( datetimeAbbreviated, modifiedDate ),\n\t\t\t\t\tareStylesEqual\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'edit-site-global-styles-screen-revisions__revision-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t\t\t\t'is-active': areStylesEqual,\n\t\t\t\t\t\t\t\t'is-reset': isReset,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\taria-current={ isSelected }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__revision-button\"\n\t\t\t\t\t\t\tdisabled={ isSelected }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonChange( revision );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taria-label={ revisionLabel }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isReset ? (\n\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ __( 'Default styles' ) }\n\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t{ currentThemeName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ isUnsaved ? (\n\t\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__date\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( '(Unsaved)' ) }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<time\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__date\"\n\t\t\t\t\t\t\t\t\t\t\tdateTime={ modified }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ displayDate }\n\t\t\t\t\t\t\t\t\t\t</time>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\talt={ authorDisplayName }\n\t\t\t\t\t\t\t\t\t\t\tsrc={ authorAvatar }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{ authorDisplayName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{ isSelected && (\n\t\t\t\t\t\t\t\t\t\t<ChangesSummary\n\t\t\t\t\t\t\t\t\t\t\trevision={ revision }\n\t\t\t\t\t\t\t\t\t\t\tpreviousRevision={\n\t\t\t\t\t\t\t\t\t\t\t\tindex < userRevisions.length\n\t\t\t\t\t\t\t\t\t\t\t\t\t? userRevisions[ index + 1 ]\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{ isSelected &&\n\t\t\t\t\t\t\t( areStylesEqual ? (\n\t\t\t\t\t\t\t\t<p className=\"edit-site-global-styles-screen-revisions__applied-text\">\n\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t'These styles are already applied to your site.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ areStylesEqual }\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__apply-button\"\n\t\t\t\t\t\t\t\t\tonClick={ onApplyRevision }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ isReset\n\t\t\t\t\t\t\t\t\t\t? __( 'Reset to defaults' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Apply' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ol>\n\t);\n}\n\nexport default RevisionsButtons;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;AAKA,IAAAO,WAAA,GAAAP,OAAA;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,MAAMQ,mBAAmB,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,GAAG,EAAE;AAC/C,MAAM;EAAEC;AAAuB,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEnE,SAASC,cAAcA,CAAE;EAAEC,QAAQ;EAAEC;AAAiB,CAAC,EAAG;EACzD,MAAMC,OAAO,GAAGN,sBAAsB,CAAEI,QAAQ,EAAEC,gBAAgB,EAAE;IACnEE,UAAU,EAAE;EACb,CAAE,CAAC;EACH,MAAMC,aAAa,GAAGF,OAAO,CAACG,MAAM;EAEpC,IAAK,CAAED,aAAa,EAAG;IACtB,OAAO,IAAI;EACZ;EAEA,OACC,IAAAE,MAAA,CAAAC,aAAA;IACC,eAAY,gCAAgC;IAC5CC,SAAS,EAAC;EAAmD,GAE3DN,OAAO,CAACO,IAAI,CAAE,IAAK,CAAC,EAAE,GACnB,CAAC;AAET;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CACxBC,EAAE,EACFC,iBAAiB,EACjBC,qBAAqB,EACrBC,cAAc,EACb;EACD,IAAK,QAAQ,KAAKH,EAAE,EAAG;IACtB,OAAO,IAAAI,QAAE,EAAE,wCAAyC,CAAC;EACtD;EAEA,IAAK,SAAS,KAAKJ,EAAE,EAAG;IACvB,OAAO,IAAAK,aAAO,GACb;IACA,IAAAD,QAAE,EAAE,uBAAwB,CAAC,EAC7BH,iBACD,CAAC;EACF;EAEA,OAAOE,cAAc,GAClB,IAAAE,aAAO;EACP;EACA,IAAAD,QAAE,EACD,6EACD,CAAC,EACDH,iBAAiB,EACjBC,qBACA,CAAC,GACD,IAAAG,aAAO;EACP;EACA,IAAAD,QAAE,EAAE,+BAAgC,CAAC,EACrCH,iBAAiB,EACjBC,qBACA,CAAC;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASI,gBAAgBA,CAAE;EAC1BC,aAAa;EACbC,kBAAkB;EAClBC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,gBAAgB;IAAEC;EAAY,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAClE,MAAM;MAAEC,eAAe;MAAEC;IAAe,CAAC,GAAGF,MAAM,CAAEG,eAAU,CAAC;IAC/D,MAAMC,YAAY,GAAGH,eAAe,CAAC,CAAC;IACtC,OAAO;MACNJ,gBAAgB,EACfO,YAAY,EAAEC,IAAI,EAAEC,QAAQ,IAAIF,YAAY,EAAEG,UAAU;MACzDT,WAAW,EAAEI,cAAc,CAAC;IAC7B,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EACP,MAAMM,WAAW,GAAG,IAAAC,aAAO,EAAC,CAAC,CAACC,OAAO,CAAC,CAAC;EACvC,MAAM;IAAEC;EAAoB,CAAC,GAAG,IAAAC,iBAAW,EAAC,CAAC,CAACC,OAAO;EAErD,OACC,IAAAjC,MAAA,CAAAC,aAAA;IACCC,SAAS,EAAC,0DAA0D;IACpE,cAAa,IAAAO,QAAE,EAAE,8BAA+B,CAAG;IACnDyB,IAAI,EAAC;EAAO,GAEVtB,aAAa,CAACuB,GAAG,CAAE,CAAEzC,QAAQ,EAAE0C,KAAK,KAAM;IAC3C,MAAM;MAAE/B,EAAE;MAAEgC,MAAM;MAAEC;IAAS,CAAC,GAAG5C,QAAQ;IACzC,MAAM6C,SAAS,GAAG,SAAS,KAAKlC,EAAE;IAClC;IACA,MAAMmC,cAAc,GAAGD,SAAS,GAAGrB,WAAW,GAAGmB,MAAM;IACvD,MAAM/B,iBAAiB,GAAGkC,cAAc,EAAEf,IAAI,IAAI,IAAAhB,QAAE,EAAE,MAAO,CAAC;IAC9D,MAAMgC,YAAY,GAAGD,cAAc,EAAEE,WAAW,GAAI,IAAI,CAAE;IAC1D,MAAMC,WAAW,GAAGP,KAAK,KAAK,CAAC;IAC/B,MAAMQ,UAAU,GAAG/B,kBAAkB,GAClCA,kBAAkB,KAAKR,EAAE,GACzBsC,WAAW;IACd,MAAMnC,cAAc,GAAG,CAAEO,gBAAgB,IAAI6B,UAAU;IACvD,MAAMC,OAAO,GAAG,QAAQ,KAAKxC,EAAE;IAC/B,MAAMyC,YAAY,GAAG,IAAAjB,aAAO,EAAES,QAAS,CAAC;IACxC,MAAMS,WAAW,GAChBT,QAAQ,IACRV,WAAW,GAAGkB,YAAY,CAAChB,OAAO,CAAC,CAAC,GAAGzC,mBAAmB,GACvD,IAAA2D,cAAQ,EAAEjB,mBAAmB,EAAEe,YAAa,CAAC,GAC7C,IAAAG,mBAAa,EAAEX,QAAS,CAAC;IAC7B,MAAMY,aAAa,GAAG9C,gBAAgB,CACrCC,EAAE,EACFC,iBAAiB,EACjB,IAAA0C,cAAQ,EAAEjB,mBAAmB,EAAEe,YAAa,CAAC,EAC7CtC,cACD,CAAC;IAED,OACC,IAAAR,MAAA,CAAAC,aAAA;MACCC,SAAS,EAAG,IAAAiD,mBAAU,EACrB,yDAAyD,EACzD;QACC,aAAa,EAAEP,UAAU;QACzB,WAAW,EAAEpC,cAAc;QAC3B,UAAU,EAAEqC;MACb,CACD,CAAG;MACHO,GAAG,EAAG/C,EAAI;MACV,gBAAeuC;IAAY,GAE3B,IAAA5C,MAAA,CAAAC,aAAA,EAAClB,WAAA,CAAAsE,MAAM;MACNnD,SAAS,EAAC,2DAA2D;MACrEoD,QAAQ,EAAGV,UAAY;MACvBW,OAAO,EAAGA,CAAA,KAAM;QACfzC,QAAQ,CAAEpB,QAAS,CAAC;MACrB,CAAG;MACH,cAAawD;IAAe,GAE1BL,OAAO,GACR,IAAA7C,MAAA,CAAAC,aAAA;MAAMC,SAAS,EAAC;IAAuD,GACpE,IAAAO,QAAE,EAAE,gBAAiB,CAAC,EACxB,IAAAT,MAAA,CAAAC,aAAA;MAAMC,SAAS,EAAC;IAAgD,GAC7De,gBACG,CACD,CAAC,GAEP,IAAAjB,MAAA,CAAAC,aAAA;MAAMC,SAAS,EAAC;IAAuD,GACpEqC,SAAS,GACV,IAAAvC,MAAA,CAAAC,aAAA;MAAMC,SAAS,EAAC;IAAgD,GAC7D,IAAAO,QAAE,EAAE,WAAY,CACb,CAAC,GAEP,IAAAT,MAAA,CAAAC,aAAA;MACCC,SAAS,EAAC,gDAAgD;MAC1DsD,QAAQ,EAAGlB;IAAU,GAEnBS,WACG,CACN,EACD,IAAA/C,MAAA,CAAAC,aAAA;MAAMC,SAAS,EAAC;IAAgD,GAC/D,IAAAF,MAAA,CAAAC,aAAA;MACCwD,GAAG,EAAGnD,iBAAmB;MACzBoD,GAAG,EAAGjB;IAAc,CACpB,CAAC,EACAnC,iBACG,CAAC,EACLsC,UAAU,IACX,IAAA5C,MAAA,CAAAC,aAAA,EAACR,cAAc;MACdC,QAAQ,EAAGA,QAAU;MACrBC,gBAAgB,EACfyC,KAAK,GAAGxB,aAAa,CAACb,MAAM,GACzBa,aAAa,CAAEwB,KAAK,GAAG,CAAC,CAAE,GAC1B,CAAC;IACJ,CACD,CAEG,CAEA,CAAC,EACPQ,UAAU,KACTpC,cAAc,GACf,IAAAR,MAAA,CAAAC,aAAA;MAAGC,SAAS,EAAC;IAAwD,GAClE,IAAAO,QAAE,EACH,gDACD,CACE,CAAC,GAEJ,IAAAT,MAAA,CAAAC,aAAA,EAAClB,WAAA,CAAAsE,MAAM;MACNC,QAAQ,EAAG9C,cAAgB;MAC3BmD,OAAO,EAAC,SAAS;MACjBzD,SAAS,EAAC,wDAAwD;MAClEqD,OAAO,EAAGvC;IAAiB,GAEzB6B,OAAO,GACN,IAAApC,QAAE,EAAE,mBAAoB,CAAC,GACzB,IAAAA,QAAE,EAAE,OAAQ,CACR,CACR,CACC,CAAC;EAEP,CAAE,CACC,CAAC;AAEP;AAAC,IAAAmD,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcnD,gBAAgB"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_components","_date","_coreData","_data","_blockEditor","_lockUnlock","DAY_IN_MILLISECONDS","getGlobalStylesChanges","unlock","blockEditorPrivateApis","ChangesSummary","revision","previousRevision","changes","maxResults","length","_react","createElement","className","map","change","key","getRevisionLabel","id","authorDisplayName","formattedModifiedDate","areStylesEqual","__","sprintf","RevisionsButtons","userRevisions","selectedRevisionId","onChange","canApplyRevision","onApplyRevision","currentThemeName","currentUser","useSelect","select","getCurrentTheme","getCurrentUser","coreStore","currentTheme","name","rendered","stylesheet","dateNowInMs","getDate","getTime","datetimeAbbreviated","getSettings","formats","role","index","author","modified","isUnsaved","revisionAuthor","authorAvatar","avatar_urls","isFirstItem","isSelected","isReset","modifiedDate","displayDate","dateI18n","humanTimeDiff","revisionLabel","classnames","Button","disabled","onClick","dateTime","alt","src","size","variant","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\n\nconst DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;\nconst { getGlobalStylesChanges } = unlock( blockEditorPrivateApis );\n\nfunction ChangesSummary( { revision, previousRevision } ) {\n\tconst changes = getGlobalStylesChanges( revision, previousRevision, {\n\t\tmaxResults: 7,\n\t} );\n\n\tif ( ! changes.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ul\n\t\t\tdata-testid=\"global-styles-revision-changes\"\n\t\t\tclassName=\"edit-site-global-styles-screen-revisions__changes\"\n\t\t>\n\t\t\t{ changes.map( ( change ) => (\n\t\t\t\t<li key={ change }>{ change }</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n\n/**\n * Returns a button label for the revision.\n *\n * @param {string|number} id                    A revision object.\n * @param {string}        authorDisplayName     Author name.\n * @param {string}        formattedModifiedDate Revision modified date formatted.\n * @param {boolean}       areStylesEqual        Whether the revision matches the current editor styles.\n * @return {string} Translated label.\n */\nfunction getRevisionLabel(\n\tid,\n\tauthorDisplayName,\n\tformattedModifiedDate,\n\tareStylesEqual\n) {\n\tif ( 'parent' === id ) {\n\t\treturn __( 'Reset the styles to the theme defaults' );\n\t}\n\n\tif ( 'unsaved' === id ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %s: author display name */\n\t\t\t__( 'Unsaved changes by %s' ),\n\t\t\tauthorDisplayName\n\t\t);\n\t}\n\n\treturn areStylesEqual\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: author display name, %2$s: revision creation date.\n\t\t\t\t__(\n\t\t\t\t\t'Changes saved by %1$s on %2$s. This revision matches current editor styles.'\n\t\t\t\t),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  )\n\t\t: sprintf(\n\t\t\t\t// translators: %1$s: author display name, %2$s: revision creation date.\n\t\t\t\t__( 'Changes saved by %1$s on %2$s' ),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  );\n}\n\n/**\n * Returns a rendered list of revisions buttons.\n *\n * @typedef {Object} props\n * @property {Array<Object>} userRevisions      A collection of user revisions.\n * @property {number}        selectedRevisionId The id of the currently-selected revision.\n * @property {Function}      onChange           Callback fired when a revision is selected.\n *\n * @param    {props}         Component          props.\n * @return {JSX.Element} The modal component.\n */\nfunction RevisionsButtons( {\n\tuserRevisions,\n\tselectedRevisionId,\n\tonChange,\n\tcanApplyRevision,\n\tonApplyRevision,\n} ) {\n\tconst { currentThemeName, currentUser } = useSelect( ( select ) => {\n\t\tconst { getCurrentTheme, getCurrentUser } = select( coreStore );\n\t\tconst currentTheme = getCurrentTheme();\n\t\treturn {\n\t\t\tcurrentThemeName:\n\t\t\t\tcurrentTheme?.name?.rendered || currentTheme?.stylesheet,\n\t\t\tcurrentUser: getCurrentUser(),\n\t\t};\n\t}, [] );\n\tconst dateNowInMs = getDate().getTime();\n\tconst { datetimeAbbreviated } = getSettings().formats;\n\n\treturn (\n\t\t<ol\n\t\t\tclassName=\"edit-site-global-styles-screen-revisions__revisions-list\"\n\t\t\taria-label={ __( 'Global styles revisions list' ) }\n\t\t\trole=\"group\"\n\t\t>\n\t\t\t{ userRevisions.map( ( revision, index ) => {\n\t\t\t\tconst { id, author, modified } = revision;\n\t\t\t\tconst isUnsaved = 'unsaved' === id;\n\t\t\t\t// Unsaved changes are created by the current user.\n\t\t\t\tconst revisionAuthor = isUnsaved ? currentUser : author;\n\t\t\t\tconst authorDisplayName = revisionAuthor?.name || __( 'User' );\n\t\t\t\tconst authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];\n\t\t\t\tconst isFirstItem = index === 0;\n\t\t\t\tconst isSelected = selectedRevisionId\n\t\t\t\t\t? selectedRevisionId === id\n\t\t\t\t\t: isFirstItem;\n\t\t\t\tconst areStylesEqual = ! canApplyRevision && isSelected;\n\t\t\t\tconst isReset = 'parent' === id;\n\t\t\t\tconst modifiedDate = getDate( modified );\n\t\t\t\tconst displayDate =\n\t\t\t\t\tmodified &&\n\t\t\t\t\tdateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS\n\t\t\t\t\t\t? dateI18n( datetimeAbbreviated, modifiedDate )\n\t\t\t\t\t\t: humanTimeDiff( modified );\n\t\t\t\tconst revisionLabel = getRevisionLabel(\n\t\t\t\t\tid,\n\t\t\t\t\tauthorDisplayName,\n\t\t\t\t\tdateI18n( datetimeAbbreviated, modifiedDate ),\n\t\t\t\t\tareStylesEqual\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'edit-site-global-styles-screen-revisions__revision-item',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t\t\t\t'is-active': areStylesEqual,\n\t\t\t\t\t\t\t\t'is-reset': isReset,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\taria-current={ isSelected }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__revision-button\"\n\t\t\t\t\t\t\tdisabled={ isSelected }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonChange( revision );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taria-label={ revisionLabel }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isReset ? (\n\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ __( 'Default styles' ) }\n\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t{ currentThemeName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ isUnsaved ? (\n\t\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__date\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( '(Unsaved)' ) }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<time\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__date\"\n\t\t\t\t\t\t\t\t\t\t\tdateTime={ modified }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ displayDate }\n\t\t\t\t\t\t\t\t\t\t</time>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t<span className=\"edit-site-global-styles-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\talt={ authorDisplayName }\n\t\t\t\t\t\t\t\t\t\t\tsrc={ authorAvatar }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{ authorDisplayName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{ isSelected && (\n\t\t\t\t\t\t\t\t\t\t<ChangesSummary\n\t\t\t\t\t\t\t\t\t\t\trevision={ revision }\n\t\t\t\t\t\t\t\t\t\t\tpreviousRevision={\n\t\t\t\t\t\t\t\t\t\t\t\tindex < userRevisions.length\n\t\t\t\t\t\t\t\t\t\t\t\t\t? userRevisions[ index + 1 ]\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{ isSelected &&\n\t\t\t\t\t\t\t( areStylesEqual ? (\n\t\t\t\t\t\t\t\t<p className=\"edit-site-global-styles-screen-revisions__applied-text\">\n\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t'These styles are already applied to your site.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={ areStylesEqual }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-screen-revisions__apply-button\"\n\t\t\t\t\t\t\t\t\tonClick={ onApplyRevision }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ isReset\n\t\t\t\t\t\t\t\t\t\t? __( 'Reset to defaults' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Apply' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ol>\n\t);\n}\n\nexport default RevisionsButtons;\n"],"mappings":"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"}

package/build/components/layout/index.js

@@ -219,7 +219,7 @@ function Layout() {
     }
   }, (0, _react.createElement)(_headerEditMode.default, null)))), (0, _react.createElement)("div", {
     className: "edit-site-layout__content"
-  }, (0, _react.createElement)(_interface.NavigableRegion, {
+  }, (!isMobileViewport || isMobileViewport && !areas.mobile) && (0, _react.createElement)(_interface.NavigableRegion, {
     ariaLabel: (0, _i18n.__)('Navigation'),
     className: "edit-site-layout__sidebar-region"
   }, (0, _react.createElement)(_components.__unstableAnimatePresence, null, canvasMode === 'view' && (0, _react.createElement)(_components.__unstableMotion.div, {
@@ -240,12 +240,17 @@ function Layout() {
       ease: 'easeOut'
     },
     className: "edit-site-layout__sidebar"
-  }, (0, _react.createElement)(_sidebar.default, null)))), (0, _react.createElement)(_savePanel.default, null), areas.content && canvasMode !== 'edit' && (0, _react.createElement)("div", {
+  }, (0, _react.createElement)(_sidebar.default, null)))), (0, _react.createElement)(_savePanel.default, null), isMobileViewport && areas.mobile && (0, _react.createElement)("div", {
+    className: "edit-site-layout__mobile",
+    style: {
+      maxWidth: widths?.content
+    }
+  }, areas.mobile), !isMobileViewport && areas.content && canvasMode !== 'edit' && (0, _react.createElement)("div", {
     className: "edit-site-layout__area",
     style: {
       maxWidth: widths?.content
     }
-  }, areas.content), areas.preview && (0, _react.createElement)("div", {
+  }, areas.content), !isMobileViewport && areas.preview && (0, _react.createElement)("div", {
     className: "edit-site-layout__canvas-container"
   }, canvasResizer, !!canvasSize.width && (0, _react.createElement)(_components.__unstableMotion.div, {
     whileHover: canvasMode === 'view' ? {

package/build/components/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_data","_components","_compose","_i18n","_element","_interface","_keyboardShortcuts","_commands","_preferences","_blockEditor","_coreCommands","_sidebar","_errorBoundary","_store","_headerEditMode","_useInitEditedEntityFromUrl","_siteHub","_resizableFrame","_useSyncCanvasModeWithUrl","_lockUnlock","_savePanel","_register","_global","_useCommonCommands","_useEditModeCommands","_hooks","_router","useCommands","unlock","coreCommandsPrivateApis","useCommandContext","commandsPrivateApis","useGlobalStyle","blockEditorPrivateApis","ANIMATION_DURATION","Layout","useInitEditedEntityFromURL","useSyncCanvasModeWithURL","useEditModeCommands","useCommonCommands","useBlockCommands","isMobileViewport","useViewportMatch","isDistractionFree","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","useSelect","select","getAllShortcutKeyCombinations","keyboardShortcutsStore","getCanvasMode","editSiteStore","preferencesStore","get","blockEditorStore","getBlockSelectionStart","navigateRegionsProps","useNavigateRegions","previous","next","disableMotion","useReducedMotion","canvasResizer","canvasSize","useResizeObserver","fullResizer","isEditorLoading","useIsSiteEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","useState","areas","widths","useLayoutAreas","headerAnimationState","commandContext","backgroundColor","gradientValue","_react","createElement","Fragment","CommandMenu","default","ref","className","classnames","__unstableMotion","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","__unstableAnimatePresence","initial","NavigableRegion","key","ariaLabel","__","as","motion","y","exit","duration","ease","content","style","maxWidth","preview","width","scale","layout","isReady","isFullWidth","defaultSize","height","isOversized","setIsOversized","innerContentStyle","background"],"sources":["@wordpress/edit-site/src/components/layout/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\t__unstableUseNavigateRegions as useNavigateRegions,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { NavigableRegion } from '@wordpress/interface';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport {\n\tCommandMenu,\n\tprivateApis as commandsPrivateApis,\n} from '@wordpress/commands';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tuseBlockCommands,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';\n\n/**\n * Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport Header from '../header-edit-mode';\nimport useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';\nimport SiteHub from '../site-hub';\nimport ResizableFrame from '../resizable-frame';\nimport useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';\nimport { unlock } from '../../lock-unlock';\nimport SavePanel from '../save-panel';\nimport KeyboardShortcutsRegister from '../keyboard-shortcuts/register';\nimport KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';\nimport { useCommonCommands } from '../../hooks/commands/use-common-commands';\nimport { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';\nimport { useIsSiteEditorLoading } from './hooks';\nimport useLayoutAreas from './router';\n\nconst { useCommands } = unlock( coreCommandsPrivateApis );\nconst { useCommandContext } = unlock( commandsPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst ANIMATION_DURATION = 0.5;\n\nexport default function Layout() {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\tuseSyncCanvasModeWithURL();\n\tuseCommands();\n\tuseEditModeCommands();\n\tuseCommonCommands();\n\tuseBlockCommands();\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tconst {\n\t\tisDistractionFree,\n\t\thasFixedToolbar,\n\t\thasBlockSelected,\n\t\tcanvasMode,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t} = useSelect( ( select ) => {\n\t\tconst { getAllShortcutKeyCombinations } = select(\n\t\t\tkeyboardShortcutsStore\n\t\t);\n\t\tconst { getCanvasMode } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t\tpreviousShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-site/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-site/next-region'\n\t\t\t),\n\t\t\thasFixedToolbar: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'fixedToolbar'\n\t\t\t),\n\t\t\tisDistractionFree: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'distractionFree'\n\t\t\t),\n\t\t\thasBlockSelected:\n\t\t\t\tselect( blockEditorStore ).getBlockSelectionStart(),\n\t\t};\n\t}, [] );\n\tconst navigateRegionsProps = useNavigateRegions( {\n\t\tprevious: previousShortcut,\n\t\tnext: nextShortcut,\n\t} );\n\tconst disableMotion = useReducedMotion();\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer ] = useResizeObserver();\n\tconst isEditorLoading = useIsSiteEditorLoading();\n\tconst [ isResizableFrameOversized, setIsResizableFrameOversized ] =\n\t\tuseState( false );\n\tconst { areas, widths } = useLayoutAreas();\n\n\t// This determines which animation variant should apply to the header.\n\t// There is also a `isDistractionFreeHovering` state that gets priority\n\t// when hovering the `edit-site-layout__header-container` in distraction\n\t// free mode. It's set via framer and trickles down to all the children\n\t// so they can use this variant state too.\n\t//\n\t// TODO: The issue with this is we want to have the hover state stick when hovering\n\t// a popover opened via the header. We'll probably need to lift this state to\n\t// handle it ourselves. Also, focusWithin the header needs to be handled.\n\tlet headerAnimationState;\n\n\tif ( canvasMode === 'view' ) {\n\t\t// We need 'view' to always take priority so 'isDistractionFree'\n\t\t// doesn't bleed over into the view (sidebar) state\n\t\theaderAnimationState = 'view';\n\t} else if ( isDistractionFree ) {\n\t\theaderAnimationState = 'isDistractionFree';\n\t} else {\n\t\theaderAnimationState = canvasMode; // edit, view, init\n\t}\n\n\t// Sets the right context for the command palette\n\tlet commandContext = 'site-editor';\n\n\tif ( canvasMode === 'edit' ) {\n\t\tcommandContext = 'site-editor-edit';\n\t}\n\tif ( hasBlockSelected ) {\n\t\tcommandContext = 'block-selection-edit';\n\t}\n\tuseCommandContext( commandContext );\n\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\n\t// Synchronizing the URL with the store value of canvasMode happens in an effect\n\t// This condition ensures the component is only rendered after the synchronization happens\n\t// which prevents any animations due to potential canvasMode value change.\n\tif ( canvasMode === 'init' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<CommandMenu />\n\t\t\t<KeyboardShortcutsRegister />\n\t\t\t<KeyboardShortcutsGlobal />\n\t\t\t{ fullResizer }\n\t\t\t<div\n\t\t\t\t{ ...navigateRegionsProps }\n\t\t\t\tref={ navigateRegionsProps.ref }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-layout',\n\t\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-distraction-free':\n\t\t\t\t\t\t\tisDistractionFree && canvasMode === 'edit',\n\t\t\t\t\t\t'is-full-canvas': canvasMode === 'edit',\n\t\t\t\t\t\t'has-fixed-toolbar': hasFixedToolbar,\n\t\t\t\t\t\t'is-block-toolbar-visible': hasBlockSelected,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"edit-site-layout__header-container\"\n\t\t\t\t\tvariants={ {\n\t\t\t\t\t\tisDistractionFree: {\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.8,\n\t\t\t\t\t\t\t\tdelayChildren: 0.8,\n\t\t\t\t\t\t\t}, // How long to wait before the header exits\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.2,\n\t\t\t\t\t\t\t\tdelayChildren: 0.2,\n\t\t\t\t\t\t\t}, // How long to wait before the header shows\n\t\t\t\t\t\t},\n\t\t\t\t\t\tview: { opacity: 1 },\n\t\t\t\t\t\tedit: { opacity: 1 },\n\t\t\t\t\t} }\n\t\t\t\t\twhileHover={\n\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t? 'isDistractionFreeHovering'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tanimate={ headerAnimationState }\n\t\t\t\t>\n\t\t\t\t\t<SiteHub\n\t\t\t\t\t\tisTransparent={ isResizableFrameOversized }\n\t\t\t\t\t\tclassName=\"edit-site-layout__hub\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ canvasMode === 'edit' && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tkey=\"header\"\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__header\"\n\t\t\t\t\t\t\t\tariaLabel={ __( 'Editor top bar' ) }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\tisDistractionFree: { opacity: 0, y: 0 },\n\t\t\t\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tview: { opacity: 1, y: '-100%' },\n\t\t\t\t\t\t\t\t\tedit: { opacity: 1, y: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\t\ty: '-100%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\topacity: isDistractionFree ? 1 : 0,\n\t\t\t\t\t\t\t\t\ty: isDistractionFree ? 0 : '-100%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\tduration: disableMotion ? 0 : 0.2,\n\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Header />\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</motion.div>\n\n\t\t\t\t<div className=\"edit-site-layout__content\">\n\t\t\t\t\t{ /*\n\t\t\t\t\t\tThe NavigableRegion must always be rendered and not use\n\t\t\t\t\t\t`inert` otherwise `useNavigateRegions` will fail.\n\t\t\t\t\t*/ }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tariaLabel={ __( 'Navigation' ) }\n\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar-region\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t{ canvasMode === 'view' && (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t// Disable transition in mobile to emulate a full page transition.\n\t\t\t\t\t\t\t\t\t\t\tdisableMotion || isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t</NavigableRegion>\n\n\t\t\t\t\t<SavePanel />\n\n\t\t\t\t\t{ areas.content && canvasMode !== 'edit' && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__area\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tmaxWidth: widths?.content,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ areas.content }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ areas.preview && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__canvas-container\">\n\t\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\t\t\tcanvasMode === 'view'\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1.005,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\t\tlayout=\"position\"\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'edit-site-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-right-aligned':\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t<ResizableFrame\n\t\t\t\t\t\t\t\t\t\t\tisReady={ ! isEditorLoading }\n\t\t\t\t\t\t\t\t\t\t\tisFullWidth={\n\t\t\t\t\t\t\t\t\t\t\t\tcanvasMode === 'edit'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tdefaultSize={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcanvasSize.width -\n\t\t\t\t\t\t\t\t\t\t\t\t\t24 /* $canvas-padding */,\n\t\t\t\t\t\t\t\t\t\t\t\theight: canvasSize.height,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tisOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tsetIsOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tinnerContentStyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.preview }\n\t\t\t\t\t\t\t\t\t\t</ResizableFrame>\n\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_data","_components","_compose","_i18n","_element","_interface","_keyboardShortcuts","_commands","_preferences","_blockEditor","_coreCommands","_sidebar","_errorBoundary","_store","_headerEditMode","_useInitEditedEntityFromUrl","_siteHub","_resizableFrame","_useSyncCanvasModeWithUrl","_lockUnlock","_savePanel","_register","_global","_useCommonCommands","_useEditModeCommands","_hooks","_router","useCommands","unlock","coreCommandsPrivateApis","useCommandContext","commandsPrivateApis","useGlobalStyle","blockEditorPrivateApis","ANIMATION_DURATION","Layout","useInitEditedEntityFromURL","useSyncCanvasModeWithURL","useEditModeCommands","useCommonCommands","useBlockCommands","isMobileViewport","useViewportMatch","isDistractionFree","hasFixedToolbar","hasBlockSelected","canvasMode","previousShortcut","nextShortcut","useSelect","select","getAllShortcutKeyCombinations","keyboardShortcutsStore","getCanvasMode","editSiteStore","preferencesStore","get","blockEditorStore","getBlockSelectionStart","navigateRegionsProps","useNavigateRegions","previous","next","disableMotion","useReducedMotion","canvasResizer","canvasSize","useResizeObserver","fullResizer","isEditorLoading","useIsSiteEditorLoading","isResizableFrameOversized","setIsResizableFrameOversized","useState","areas","widths","useLayoutAreas","headerAnimationState","commandContext","backgroundColor","gradientValue","_react","createElement","Fragment","CommandMenu","default","ref","className","classnames","__unstableMotion","div","variants","opacity","transition","type","delay","delayChildren","isDistractionFreeHovering","view","edit","whileHover","undefined","animate","isTransparent","__unstableAnimatePresence","initial","NavigableRegion","key","ariaLabel","__","as","motion","y","exit","duration","ease","mobile","style","maxWidth","content","preview","width","scale","layout","isReady","isFullWidth","defaultSize","height","isOversized","setIsOversized","innerContentStyle","background"],"sources":["@wordpress/edit-site/src/components/layout/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\t__unstableUseNavigateRegions as useNavigateRegions,\n} from '@wordpress/components';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { NavigableRegion } from '@wordpress/interface';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport {\n\tCommandMenu,\n\tprivateApis as commandsPrivateApis,\n} from '@wordpress/commands';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tuseBlockCommands,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';\n\n/**\n * Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport ErrorBoundary from '../error-boundary';\nimport { store as editSiteStore } from '../../store';\nimport Header from '../header-edit-mode';\nimport useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';\nimport SiteHub from '../site-hub';\nimport ResizableFrame from '../resizable-frame';\nimport useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';\nimport { unlock } from '../../lock-unlock';\nimport SavePanel from '../save-panel';\nimport KeyboardShortcutsRegister from '../keyboard-shortcuts/register';\nimport KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';\nimport { useCommonCommands } from '../../hooks/commands/use-common-commands';\nimport { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';\nimport { useIsSiteEditorLoading } from './hooks';\nimport useLayoutAreas from './router';\n\nconst { useCommands } = unlock( coreCommandsPrivateApis );\nconst { useCommandContext } = unlock( commandsPrivateApis );\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst ANIMATION_DURATION = 0.5;\n\nexport default function Layout() {\n\t// This ensures the edited entity id and type are initialized properly.\n\tuseInitEditedEntityFromURL();\n\tuseSyncCanvasModeWithURL();\n\tuseCommands();\n\tuseEditModeCommands();\n\tuseCommonCommands();\n\tuseBlockCommands();\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tconst {\n\t\tisDistractionFree,\n\t\thasFixedToolbar,\n\t\thasBlockSelected,\n\t\tcanvasMode,\n\t\tpreviousShortcut,\n\t\tnextShortcut,\n\t} = useSelect( ( select ) => {\n\t\tconst { getAllShortcutKeyCombinations } = select(\n\t\t\tkeyboardShortcutsStore\n\t\t);\n\t\tconst { getCanvasMode } = unlock( select( editSiteStore ) );\n\t\treturn {\n\t\t\tcanvasMode: getCanvasMode(),\n\t\t\tpreviousShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-site/previous-region'\n\t\t\t),\n\t\t\tnextShortcut: getAllShortcutKeyCombinations(\n\t\t\t\t'core/edit-site/next-region'\n\t\t\t),\n\t\t\thasFixedToolbar: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'fixedToolbar'\n\t\t\t),\n\t\t\tisDistractionFree: select( preferencesStore ).get(\n\t\t\t\t'core',\n\t\t\t\t'distractionFree'\n\t\t\t),\n\t\t\thasBlockSelected:\n\t\t\t\tselect( blockEditorStore ).getBlockSelectionStart(),\n\t\t};\n\t}, [] );\n\tconst navigateRegionsProps = useNavigateRegions( {\n\t\tprevious: previousShortcut,\n\t\tnext: nextShortcut,\n\t} );\n\tconst disableMotion = useReducedMotion();\n\tconst [ canvasResizer, canvasSize ] = useResizeObserver();\n\tconst [ fullResizer ] = useResizeObserver();\n\tconst isEditorLoading = useIsSiteEditorLoading();\n\tconst [ isResizableFrameOversized, setIsResizableFrameOversized ] =\n\t\tuseState( false );\n\tconst { areas, widths } = useLayoutAreas();\n\n\t// This determines which animation variant should apply to the header.\n\t// There is also a `isDistractionFreeHovering` state that gets priority\n\t// when hovering the `edit-site-layout__header-container` in distraction\n\t// free mode. It's set via framer and trickles down to all the children\n\t// so they can use this variant state too.\n\t//\n\t// TODO: The issue with this is we want to have the hover state stick when hovering\n\t// a popover opened via the header. We'll probably need to lift this state to\n\t// handle it ourselves. Also, focusWithin the header needs to be handled.\n\tlet headerAnimationState;\n\n\tif ( canvasMode === 'view' ) {\n\t\t// We need 'view' to always take priority so 'isDistractionFree'\n\t\t// doesn't bleed over into the view (sidebar) state\n\t\theaderAnimationState = 'view';\n\t} else if ( isDistractionFree ) {\n\t\theaderAnimationState = 'isDistractionFree';\n\t} else {\n\t\theaderAnimationState = canvasMode; // edit, view, init\n\t}\n\n\t// Sets the right context for the command palette\n\tlet commandContext = 'site-editor';\n\n\tif ( canvasMode === 'edit' ) {\n\t\tcommandContext = 'site-editor-edit';\n\t}\n\tif ( hasBlockSelected ) {\n\t\tcommandContext = 'block-selection-edit';\n\t}\n\tuseCommandContext( commandContext );\n\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\n\t// Synchronizing the URL with the store value of canvasMode happens in an effect\n\t// This condition ensures the component is only rendered after the synchronization happens\n\t// which prevents any animations due to potential canvasMode value change.\n\tif ( canvasMode === 'init' ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<CommandMenu />\n\t\t\t<KeyboardShortcutsRegister />\n\t\t\t<KeyboardShortcutsGlobal />\n\t\t\t{ fullResizer }\n\t\t\t<div\n\t\t\t\t{ ...navigateRegionsProps }\n\t\t\t\tref={ navigateRegionsProps.ref }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'edit-site-layout',\n\t\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-distraction-free':\n\t\t\t\t\t\t\tisDistractionFree && canvasMode === 'edit',\n\t\t\t\t\t\t'is-full-canvas': canvasMode === 'edit',\n\t\t\t\t\t\t'has-fixed-toolbar': hasFixedToolbar,\n\t\t\t\t\t\t'is-block-toolbar-visible': hasBlockSelected,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"edit-site-layout__header-container\"\n\t\t\t\t\tvariants={ {\n\t\t\t\t\t\tisDistractionFree: {\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.8,\n\t\t\t\t\t\t\t\tdelayChildren: 0.8,\n\t\t\t\t\t\t\t}, // How long to wait before the header exits\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\tdelay: 0.2,\n\t\t\t\t\t\t\t\tdelayChildren: 0.2,\n\t\t\t\t\t\t\t}, // How long to wait before the header shows\n\t\t\t\t\t\t},\n\t\t\t\t\t\tview: { opacity: 1 },\n\t\t\t\t\t\tedit: { opacity: 1 },\n\t\t\t\t\t} }\n\t\t\t\t\twhileHover={\n\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t? 'isDistractionFreeHovering'\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tanimate={ headerAnimationState }\n\t\t\t\t>\n\t\t\t\t\t<SiteHub\n\t\t\t\t\t\tisTransparent={ isResizableFrameOversized }\n\t\t\t\t\t\tclassName=\"edit-site-layout__hub\"\n\t\t\t\t\t/>\n\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ canvasMode === 'edit' && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tkey=\"header\"\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__header\"\n\t\t\t\t\t\t\t\tariaLabel={ __( 'Editor top bar' ) }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\tisDistractionFree: { opacity: 0, y: 0 },\n\t\t\t\t\t\t\t\t\tisDistractionFreeHovering: {\n\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tview: { opacity: 1, y: '-100%' },\n\t\t\t\t\t\t\t\t\tedit: { opacity: 1, y: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\texit={ {\n\t\t\t\t\t\t\t\t\ty: '-100%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\topacity: isDistractionFree ? 1 : 0,\n\t\t\t\t\t\t\t\t\ty: isDistractionFree ? 0 : '-100%',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\tduration: disableMotion ? 0 : 0.2,\n\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Header />\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</motion.div>\n\n\t\t\t\t<div className=\"edit-site-layout__content\">\n\t\t\t\t\t{ /*\n\t\t\t\t\t\tThe NavigableRegion must always be rendered and not use\n\t\t\t\t\t\t`inert` otherwise `useNavigateRegions` will fail.\n\t\t\t\t\t*/ }\n\t\t\t\t\t{ ( ! isMobileViewport ||\n\t\t\t\t\t\t( isMobileViewport && ! areas.mobile ) ) && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tariaLabel={ __( 'Navigation' ) }\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar-region\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ canvasMode === 'view' && (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration:\n\t\t\t\t\t\t\t\t\t\t\t\t// Disable transition in mobile to emulate a full page transition.\n\t\t\t\t\t\t\t\t\t\t\t\tdisableMotion ||\n\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__sidebar\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<SavePanel />\n\n\t\t\t\t\t{ isMobileViewport && areas.mobile && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"edit-site-layout__mobile\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tmaxWidth: widths?.content,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ areas.mobile }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport &&\n\t\t\t\t\t\tareas.content &&\n\t\t\t\t\t\tcanvasMode !== 'edit' && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"edit-site-layout__area\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tmaxWidth: widths?.content,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ areas.content }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! isMobileViewport && areas.preview && (\n\t\t\t\t\t\t<div className=\"edit-site-layout__canvas-container\">\n\t\t\t\t\t\t\t{ canvasResizer }\n\t\t\t\t\t\t\t{ !! canvasSize.width && (\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\t\t\tcanvasMode === 'view'\n\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1.005,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.5,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tinitial={ false }\n\t\t\t\t\t\t\t\t\tlayout=\"position\"\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'edit-site-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'is-right-aligned':\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t: ANIMATION_DURATION,\n\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ErrorBoundary>\n\t\t\t\t\t\t\t\t\t\t<ResizableFrame\n\t\t\t\t\t\t\t\t\t\t\tisReady={ ! isEditorLoading }\n\t\t\t\t\t\t\t\t\t\t\tisFullWidth={\n\t\t\t\t\t\t\t\t\t\t\t\tcanvasMode === 'edit'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tdefaultSize={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcanvasSize.width -\n\t\t\t\t\t\t\t\t\t\t\t\t\t24 /* $canvas-padding */,\n\t\t\t\t\t\t\t\t\t\t\t\theight: canvasSize.height,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tisOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tisResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tsetIsOversized={\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsResizableFrameOversized\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tinnerContentStyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ areas.preview }\n\t\t\t\t\t\t\t\t\t\t</ResizableFrame>\n\t\t\t\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],"mappings":"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"}

package/build/components/layout/router.js

@@ -35,8 +35,13 @@ function useLayoutAreas() {
     postId,
     path,
     layout,
-    isCustom
+    isCustom,
+    canvas
   } = params !== null && params !== void 0 ? params : {};
+
+  // Note: Since "sidebar" is not yet supported here,
+  // returning undefined from "mobile" means show the sidebar.
+
   // Regular page
   if (path === '/page') {
     return {
@@ -44,7 +49,10 @@ function useLayoutAreas() {
         content: undefined,
         preview: (0, _react.createElement)(_editor.default, {
           isLoading: isSiteEditorLoading
-        })
+        }),
+        mobile: canvas === 'edit' ? (0, _react.createElement)(_editor.default, {
+          isLoading: isSiteEditorLoading
+        }) : undefined
       },
       widths: {
         content: undefined
@@ -75,7 +83,10 @@ function useLayoutAreas() {
       areas: {
         preview: (0, _react.createElement)(_editor.default, {
           isLoading: isSiteEditorLoading
-        })
+        }),
+        mobile: canvas === 'edit' ? (0, _react.createElement)(_editor.default, {
+          isLoading: isSiteEditorLoading
+        }) : undefined
       }
     };
   }
@@ -89,6 +100,9 @@ function useLayoutAreas() {
         }),
         preview: isListLayout && (0, _react.createElement)(_editor.default, {
           isLoading: isSiteEditorLoading
+        }),
+        mobile: (0, _react.createElement)(_pageTemplatesTemplateParts.default, {
+          postType: _constants.TEMPLATE_POST_TYPE
         })
       },
       widths: {
@@ -106,6 +120,9 @@ function useLayoutAreas() {
         }),
         preview: isListLayout && (0, _react.createElement)(_editor.default, {
           isLoading: isSiteEditorLoading
+        }),
+        mobile: (0, _react.createElement)(_pageTemplatesTemplateParts.default, {
+          postType: _constants.TEMPLATE_PART_POST_TYPE
         })
       },
       widths: {
@@ -118,7 +135,8 @@ function useLayoutAreas() {
   if (path === '/patterns') {
     return {
       areas: {
-        content: (0, _react.createElement)(_pagePatterns.default, null)
+        content: (0, _react.createElement)(_pagePatterns.default, null),
+        mobile: (0, _react.createElement)(_pagePatterns.default, null)
       }
     };
   }
@@ -128,7 +146,10 @@ function useLayoutAreas() {
     areas: {
       preview: (0, _react.createElement)(_editor.default, {
         isLoading: isSiteEditorLoading
-      })
+      }),
+      mobile: canvas === 'edit' ? (0, _react.createElement)(_editor.default, {
+        isLoading: isSiteEditorLoading
+      }) : undefined
     }
   };
 }

package/build/components/layout/router.js.map

@@ -1 +1 @@
-{"version":3,"names":["_router","require","_lockUnlock","_hooks","_editor","_interopRequireDefault","_pagePages","_pagePatterns","_pageTemplatesTemplateParts","_constants","useLocation","unlock","routerPrivateApis","useLayoutAreas","isSiteEditorLoading","useIsSiteEditorLoading","params","postType","postId","path","layout","isCustom","areas","content","undefined","preview","_react","createElement","default","isLoading","widths","isListLayout","window","__experimentalAdminViews","TEMPLATE_POST_TYPE","TEMPLATE_PART_POST_TYPE"],"sources":["@wordpress/edit-site/src/components/layout/router.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useIsSiteEditorLoading } from './hooks';\nimport Editor from '../editor';\nimport PagePages from '../page-pages';\nimport PagePatterns from '../page-patterns';\nimport PageTemplatesTemplateParts from '../page-templates-template-parts';\n\nimport {\n\tTEMPLATE_POST_TYPE,\n\tTEMPLATE_PART_POST_TYPE,\n} from '../../utils/constants';\n\nconst { useLocation } = unlock( routerPrivateApis );\n\nexport default function useLayoutAreas() {\n\tconst isSiteEditorLoading = useIsSiteEditorLoading();\n\tconst { params } = useLocation();\n\tconst { postType, postId, path, layout, isCustom } = params ?? {};\n\t// Regular page\n\tif ( path === '/page' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: undefined,\n\t\t\t\tpreview: <Editor isLoading={ isSiteEditorLoading } />,\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// List layout is still experimental.\n\t// Extracted it here out of the conditionals so it doesn't unintentionally becomes stable.\n\tconst isListLayout =\n\t\tisCustom !== 'true' &&\n\t\tlayout === 'list' &&\n\t\twindow?.__experimentalAdminViews;\n\n\tif ( path === '/pages' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: <PagePages />,\n\t\t\t\tpreview: isListLayout && (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t),\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: isListLayout ? 380 : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Regular other post types\n\tif ( postType && postId ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tpreview: <Editor isLoading={ isSiteEditorLoading } />,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Templates\n\tif ( path === '/wp_template/all' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: (\n\t\t\t\t\t<PageTemplatesTemplateParts\n\t\t\t\t\t\tpostType={ TEMPLATE_POST_TYPE }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tpreview: isListLayout && (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t),\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: isListLayout ? 380 : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Template parts\n\tif ( path === '/wp_template_part/all' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: (\n\t\t\t\t\t<PageTemplatesTemplateParts\n\t\t\t\t\t\tpostType={ TEMPLATE_PART_POST_TYPE }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tpreview: isListLayout && (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t),\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: isListLayout ? 380 : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Patterns\n\tif ( path === '/patterns' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: <PagePatterns />,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Fallback shows the home page preview\n\treturn {\n\t\tareas: { preview: <Editor isLoading={ isSiteEditorLoading } /> },\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["_router","require","_lockUnlock","_hooks","_editor","_interopRequireDefault","_pagePages","_pagePatterns","_pageTemplatesTemplateParts","_constants","useLocation","unlock","routerPrivateApis","useLayoutAreas","isSiteEditorLoading","useIsSiteEditorLoading","params","postType","postId","path","layout","isCustom","canvas","areas","content","undefined","preview","_react","createElement","default","isLoading","mobile","widths","isListLayout","window","__experimentalAdminViews","TEMPLATE_POST_TYPE","TEMPLATE_PART_POST_TYPE"],"sources":["@wordpress/edit-site/src/components/layout/router.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useIsSiteEditorLoading } from './hooks';\nimport Editor from '../editor';\nimport PagePages from '../page-pages';\nimport PagePatterns from '../page-patterns';\nimport PageTemplatesTemplateParts from '../page-templates-template-parts';\n\nimport {\n\tTEMPLATE_POST_TYPE,\n\tTEMPLATE_PART_POST_TYPE,\n} from '../../utils/constants';\n\nconst { useLocation } = unlock( routerPrivateApis );\n\nexport default function useLayoutAreas() {\n\tconst isSiteEditorLoading = useIsSiteEditorLoading();\n\tconst { params } = useLocation();\n\tconst { postType, postId, path, layout, isCustom, canvas } = params ?? {};\n\n\t// Note: Since \"sidebar\" is not yet supported here,\n\t// returning undefined from \"mobile\" means show the sidebar.\n\n\t// Regular page\n\tif ( path === '/page' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: undefined,\n\t\t\t\tpreview: <Editor isLoading={ isSiteEditorLoading } />,\n\t\t\t\tmobile:\n\t\t\t\t\tcanvas === 'edit' ? (\n\t\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t\t) : undefined,\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// List layout is still experimental.\n\t// Extracted it here out of the conditionals so it doesn't unintentionally becomes stable.\n\tconst isListLayout =\n\t\tisCustom !== 'true' &&\n\t\tlayout === 'list' &&\n\t\twindow?.__experimentalAdminViews;\n\n\tif ( path === '/pages' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: <PagePages />,\n\t\t\t\tpreview: isListLayout && (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t),\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: isListLayout ? 380 : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Regular other post types\n\tif ( postType && postId ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tpreview: <Editor isLoading={ isSiteEditorLoading } />,\n\t\t\t\tmobile:\n\t\t\t\t\tcanvas === 'edit' ? (\n\t\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t\t) : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Templates\n\tif ( path === '/wp_template/all' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: (\n\t\t\t\t\t<PageTemplatesTemplateParts\n\t\t\t\t\t\tpostType={ TEMPLATE_POST_TYPE }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tpreview: isListLayout && (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t),\n\t\t\t\tmobile: (\n\t\t\t\t\t<PageTemplatesTemplateParts\n\t\t\t\t\t\tpostType={ TEMPLATE_POST_TYPE }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: isListLayout ? 380 : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Template parts\n\tif ( path === '/wp_template_part/all' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: (\n\t\t\t\t\t<PageTemplatesTemplateParts\n\t\t\t\t\t\tpostType={ TEMPLATE_PART_POST_TYPE }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tpreview: isListLayout && (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t),\n\t\t\t\tmobile: (\n\t\t\t\t\t<PageTemplatesTemplateParts\n\t\t\t\t\t\tpostType={ TEMPLATE_PART_POST_TYPE }\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t\twidths: {\n\t\t\t\tcontent: isListLayout ? 380 : undefined,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Patterns\n\tif ( path === '/patterns' ) {\n\t\treturn {\n\t\t\tareas: {\n\t\t\t\tcontent: <PagePatterns />,\n\t\t\t\tmobile: <PagePatterns />,\n\t\t\t},\n\t\t};\n\t}\n\n\t// Fallback shows the home page preview\n\treturn {\n\t\tareas: {\n\t\t\tpreview: <Editor isLoading={ isSiteEditorLoading } />,\n\t\t\tmobile:\n\t\t\t\tcanvas === 'edit' ? (\n\t\t\t\t\t<Editor isLoading={ isSiteEditorLoading } />\n\t\t\t\t) : undefined,\n\t\t},\n\t};\n}\n"],"mappings":"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"}

package/build/components/media/index.js

@@ -19,13 +19,13 @@ function Media({
     record: media
   } = (0, _coreData.useEntityRecord)('root', 'media', id);
   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 (0, _react.createElement)("img", {
     ...props,
-    src: mediaDetails.source_url,
+    src: mediaUrl,
     alt: media.alt_text
   });
 }

package/build/components/media/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_coreData","require","Media","id","size","props","record","media","useEntityRecord","currentSize","find","s","media_details","sizes","mediaDetails","_react","createElement","src","source_url","alt","alt_text","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/media/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEntityRecord } from '@wordpress/core-data';\n\nfunction Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {\n\tconst { record: media } = useEntityRecord( 'root', 'media', id );\n\tconst currentSize = size.find(\n\t\t( s ) => !! media?.media_details?.sizes[ s ]\n\t);\n\tconst mediaDetails = media?.media_details?.sizes[ currentSize ];\n\tif ( ! mediaDetails ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<img\n\t\t\t{ ...props }\n\t\t\tsrc={ mediaDetails.source_url }\n\t\t\talt={ media.alt_text }\n\t\t/>\n\t);\n}\n\nexport default Media;\n"],"mappings":";;;;;;;AAGA,IAAAA,SAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA,SAASC,KAAKA,CAAE;EAAEC,EAAE;EAAEC,IAAI,GAAG,CAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAE;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC7E,MAAM;IAAEC,MAAM,EAAEC;EAAM,CAAC,GAAG,IAAAC,yBAAe,EAAE,MAAM,EAAE,OAAO,EAAEL,EAAG,CAAC;EAChE,MAAMM,WAAW,GAAGL,IAAI,CAACM,IAAI,CAC1BC,CAAC,IAAM,CAAC,CAAEJ,KAAK,EAAEK,aAAa,EAAEC,KAAK,CAAEF,CAAC,CAC3C,CAAC;EACD,MAAMG,YAAY,GAAGP,KAAK,EAAEK,aAAa,EAAEC,KAAK,CAAEJ,WAAW,CAAE;EAC/D,IAAK,CAAEK,YAAY,EAAG;IACrB,OAAO,IAAI;EACZ;EAEA,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAA,GACMX,KAAK;IACVY,GAAG,EAAGH,YAAY,CAACI,UAAY;IAC/BC,GAAG,EAAGZ,KAAK,CAACa;EAAU,CACtB,CAAC;AAEJ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcrB,KAAK"}
+{"version":3,"names":["_coreData","require","Media","id","size","props","record","media","useEntityRecord","currentSize","find","s","media_details","sizes","mediaUrl","source_url","_react","createElement","src","alt","alt_text","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/media/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEntityRecord } from '@wordpress/core-data';\n\nfunction Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {\n\tconst { record: media } = useEntityRecord( 'root', 'media', id );\n\tconst currentSize = size.find(\n\t\t( s ) => !! media?.media_details?.sizes[ s ]\n\t);\n\n\tconst mediaUrl =\n\t\tmedia?.media_details?.sizes[ currentSize ]?.source_url ||\n\t\tmedia?.source_url;\n\n\tif ( ! mediaUrl ) {\n\t\treturn null;\n\t}\n\n\treturn <img { ...props } src={ mediaUrl } alt={ media.alt_text } />;\n}\n\nexport default Media;\n"],"mappings":";;;;;;;AAGA,IAAAA,SAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA,SAASC,KAAKA,CAAE;EAAEC,EAAE;EAAEC,IAAI,GAAG,CAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAE;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC7E,MAAM;IAAEC,MAAM,EAAEC;EAAM,CAAC,GAAG,IAAAC,yBAAe,EAAE,MAAM,EAAE,OAAO,EAAEL,EAAG,CAAC;EAChE,MAAMM,WAAW,GAAGL,IAAI,CAACM,IAAI,CAC1BC,CAAC,IAAM,CAAC,CAAEJ,KAAK,EAAEK,aAAa,EAAEC,KAAK,CAAEF,CAAC,CAC3C,CAAC;EAED,MAAMG,QAAQ,GACbP,KAAK,EAAEK,aAAa,EAAEC,KAAK,CAAEJ,WAAW,CAAE,EAAEM,UAAU,IACtDR,KAAK,EAAEQ,UAAU;EAElB,IAAK,CAAED,QAAQ,EAAG;IACjB,OAAO,IAAI;EACZ;EAEA,OAAO,IAAAE,MAAA,CAAAC,aAAA;IAAA,GAAUZ,KAAK;IAAGa,GAAG,EAAGJ,QAAU;IAACK,GAAG,EAAGZ,KAAK,CAACa;EAAU,CAAE,CAAC;AACpE;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcrB,KAAK"}

package/build/components/page-patterns/use-patterns.js

@@ -89,6 +89,9 @@ const selectThemePatterns = (0, _rememo.default)(select => {
   const {
     getSettings
   } = (0, _lockUnlock.unlock)(select(_store.store));
+  const {
+    getIsResolving
+  } = select(_coreData.store);
   const settings = getSettings();
   const blockPatterns = (_settings$__experimen = settings.__experimentalAdditionalBlockPatterns) !== null && _settings$__experimen !== void 0 ? _settings$__experimen : settings.__experimentalBlockPatterns;
   const restBlockPatterns = select(_coreData.store).getBlockPatterns();
@@ -102,15 +105,17 @@ const selectThemePatterns = (0, _rememo.default)(select => {
   }));
   return {
     patterns,
-    isResolving: false
+    isResolving: getIsResolving('getBlockPatterns')
   };
-}, select => [select(_coreData.store).getBlockPatterns(), (0, _lockUnlock.unlock)(select(_store.store)).getSettings()]);
+}, select => [select(_coreData.store).getBlockPatterns(), select(_coreData.store).getIsResolving('getBlockPatterns'), (0, _lockUnlock.unlock)(select(_store.store)).getSettings()]);
 const selectPatterns = (0, _rememo.default)((select, categoryId, syncStatus, search = '') => {
   const {
-    patterns: themePatterns
+    patterns: themePatterns,
+    isResolving: isResolvingThemePatterns
   } = selectThemePatterns(select);
   const {
-    patterns: userPatterns
+    patterns: userPatterns,
+    isResolving: isResolvingUserPatterns
   } = selectUserPatterns(select);
   let patterns = [...(themePatterns || []), ...(userPatterns || [])];
   if (syncStatus) {
@@ -132,7 +137,7 @@ const selectPatterns = (0, _rememo.default)((select, categoryId, syncStatus, sea
   }
   return {
     patterns,
-    isResolving: false
+    isResolving: isResolvingThemePatterns || isResolvingUserPatterns
   };
 }, select => [selectThemePatterns(select), selectUserPatterns(select)]);