npm - @wordpress/edit-site - Versions diffs - 5.28.3 → 5.28.4 - Mend

@wordpress/edit-site 5.28.3 → 5.28.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/build/components/sidebar-navigation-screen-templates-browse/index.js CHANGED Viewed

@@ -25,13 +25,15 @@ var _content = _interopRequireDefault(require("./content"));
 const config = {
   [_constants.TEMPLATE_POST_TYPE]: {
-    title: (0, _i18n.__)('All templates'),
-    description: (0, _i18n.__)('Create new templates, or reset any customizations made to the templates supplied by your theme.')
+    title: (0, _i18n.__)('Manage templates'),
+    description: (0, _i18n.__)('Create new templates, or reset any customizations made to the templates supplied by your theme.'),
+    contentTitle: (0, _i18n.__)('All templates')
   },
   [_constants.TEMPLATE_PART_POST_TYPE]: {
-    title: (0, _i18n.__)('All template parts'),
+    title: (0, _i18n.__)('Manage template parts'),
     description: (0, _i18n.__)('Create new template parts, or reset any customizations made to the template parts supplied by your theme.'),
-    backPath: '/patterns'
+    backPath: '/patterns',
+    contentTitle: (0, _i18n.__)('All template parts')
   }
 };
 const {
@@ -63,7 +65,7 @@ function SidebarNavigationScreenTemplatesBrowse() {
     content: (0, _react.createElement)(_content.default, {
       activeView: activeView,
       postType: postType,
-      config: config
+      title: config[postType].contentTitle
     })
   });
 }

package/build/components/sidebar-navigation-screen-templates-browse/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_i18n","require","_data","_components","_router","_sidebarNavigationScreen","_interopRequireDefault","_store","_constants","_lockUnlock","_content","config","TEMPLATE_POST_TYPE","title","__","description","TEMPLATE_PART_POST_TYPE","backPath","useLocation","unlock","routerPrivateApis","SidebarNavigationScreenTemplatesBrowse","params","postType","useNavigator","didAccessPatternsPage","activeView","isTemplatePartsMode","useSelect","select","editSiteStore","getSettings","supportsTemplatePartsMode","_react","createElement","default","isRoot","content"],"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\n\nimport { __experimentalUseNavigator as useNavigator } from '@wordpress/components';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/\n Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport { store as editSiteStore } from '../../store';\nimport {\n\tTEMPLATE_POST_TYPE,\n\tTEMPLATE_PART_POST_TYPE,\n} from '../../utils/constants';\nimport { unlock } from '../../lock-unlock';\nimport DataviewsTemplatesSidebarContent from './content';\n\nconst config = {\n\t[ TEMPLATE_POST_TYPE ]: {\n\t\ttitle: __( '~~All~~ templates' ),\n\t\tdescription: __(\n\t\t\t'Create new templates, or reset any customizations made to the templates supplied by your theme.'\n\t\t),\n\t},\n\t[ TEMPLATE_PART_POST_TYPE ]: {\n\t\ttitle: __( '~~All~~ template parts' ),\n\t\tdescription: __(\n\t\t\t'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'\n\t\t),\n\t\tbackPath: '/patterns',\n\t},\n};\n\nconst { useLocation } = unlock( routerPrivateApis );\n\nexport default function SidebarNavigationScreenTemplatesBrowse() {\n\tconst {\n\t\tparams: { postType },\n\t} = useNavigator();\n\tconst {\n\t\tparams: { didAccessPatternsPage, activeView = 'all' },\n\t} = useLocation();\n\n\tconst isTemplatePartsMode = useSelect( ( select ) => {\n\t\treturn !! select( editSiteStore ).getSettings()\n\t\t\t.supportsTemplatePartsMode;\n\t}, [] );\n\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\t// If a classic theme that supports template parts has never\n\t\t\t// accessed the Patterns page, return to the dashboard.\n\t\t\tisRoot={ isTemplatePartsMode && ! didAccessPatternsPage }\n\t\t\ttitle={ config[ postType ].title }\n\t\t\tdescription={ config[ postType ].description }\n\t\t\tbackPath={ config[ postType ].backPath }\n\t\t\tcontent={\n\t\t\t\t<DataviewsTemplatesSidebarContent\n\t\t\t\t\tactiveView={ activeView }\n\t\t\t\t\tpostType={ postType }\n\t\t\t\t\~~tconfig~~={ config }\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAKA,IAAAI,wBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA;AAIA,IAAAQ,WAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAJ,sBAAA,CAAAL,OAAA;AAnBA;AACA;AACA;;AAOA;AACA;AACA;;AAUA,MAAMU,MAAM,GAAG;EACd,CAAEC,6BAAkB,GAAI;IACvBC,KAAK,EAAE,IAAAC,QAAE,EAAE,~~eAAgB~~,CAAC;~~IAC5BC~~,WAAW,EAAE,IAAAD,QAAE,EACd,iGACD;~~EACD~~,CAAC;EACD,~~CAAEE~~,kCAAuB,GAAI;~~IAC5BH~~,KAAK,EAAE,IAAAC,QAAE,EAAE,~~oBAAqB~~,CAAC;~~IACjCC~~,WAAW,EAAE,IAAAD,QAAE,EACd,2GACD,CAAC;~~IACDG~~,QAAQ,EAAE;~~EACX~~;AACD,CAAC;AAED,MAAM;~~EAAEC~~;AAAY,CAAC,GAAG,IAAAC,kBAAM,EAAEC,mBAAkB,CAAC;AAEpC,SAASC,sCAAsCA,CAAA,EAAG;EAChE,MAAM;IACLC,MAAM,EAAE;MAAEC;IAAS;EACpB,CAAC,GAAG,IAAAC,sCAAY,EAAC,CAAC;EAClB,MAAM;IACLF,MAAM,EAAE;MAAEG,qBAAqB;MAAEC,UAAU,GAAG;IAAM;EACrD,CAAC,GAAGR,WAAW,CAAC,CAAC;EAEjB,MAAMS,mBAAmB,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IACpD,OAAO,CAAC,CAAEA,MAAM,CAAEC,YAAc,CAAC,CAACC,WAAW,CAAC,CAAC,CAC7CC,yBAAyB;EAC5B,CAAC,EAAE,EAAG,CAAC;EAEP,OACC,IAAAC,MAAA,CAAAC,aAAA,~~EAAC7B~~,wBAAA,~~CAAA8B~~;EACA;EACA;EAAA;IACAC,MAAM,EAAGT,mBAAmB,IAAI,CAAEF,qBAAuB;~~IACzDZ~~,KAAK,EAAGF,MAAM,~~CAAEY~~,QAAQ,CAAE,~~CAACV~~,KAAO;IAClCE,WAAW,EAAGJ,MAAM,~~CAAEY~~,QAAQ,CAAE,~~CAACR~~,WAAa;~~IAC9CE~~,QAAQ,~~EAAGN~~,MAAM,~~CAAEY~~,QAAQ,CAAE,CAACN,QAAU;IACxCoB,OAAO,EACN,IAAAJ,MAAA,CAAAC,aAAA,~~EAACxB~~,QAAA,~~CAAAyB~~,OAAgC;MAChCT,UAAU,EAAGA,UAAY;MACzBH,QAAQ,EAAGA,QAAU;~~MACrBZ~~,MAAM,~~EAAGA~~;~~IAAQ~~,~~CACjB~~;EACD,CACD,CAAC;AAEJ"}
1	+ {"version":3,"names":["_i18n","require","_data","_components","_router","_sidebarNavigationScreen","_interopRequireDefault","_store","_constants","_lockUnlock","_content","config","TEMPLATE_POST_TYPE","title","__","description","contentTitle","TEMPLATE_PART_POST_TYPE","backPath","useLocation","unlock","routerPrivateApis","SidebarNavigationScreenTemplatesBrowse","params","postType","useNavigator","didAccessPatternsPage","activeView","isTemplatePartsMode","useSelect","select","editSiteStore","getSettings","supportsTemplatePartsMode","_react","createElement","default","isRoot","content"],"sources":["@wordpress/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\n\nimport { __experimentalUseNavigator as useNavigator } from '@wordpress/components';\nimport { privateApis as routerPrivateApis } from '@wordpress/router';\n\n/\n Internal dependencies\n */\nimport SidebarNavigationScreen from '../sidebar-navigation-screen';\nimport { store as editSiteStore } from '../../store';\nimport {\n\tTEMPLATE_POST_TYPE,\n\tTEMPLATE_PART_POST_TYPE,\n} from '../../utils/constants';\nimport { unlock } from '../../lock-unlock';\nimport DataviewsTemplatesSidebarContent from './content';\n\nconst config = {\n\t[ TEMPLATE_POST_TYPE ]: {\n\t\ttitle: __( 'Manage templates' ),\n\t\tdescription: __(\n\t\t\t'Create new templates, or reset any customizations made to the templates supplied by your theme.'\n\t\t),\n\t\tcontentTitle: __( 'All templates' ),\n\t},\n\t[ TEMPLATE_PART_POST_TYPE ]: {\n\t\ttitle: __( 'Manage template parts' ),\n\t\tdescription: __(\n\t\t\t'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'\n\t\t),\n\t\tbackPath: '/patterns',\n\t\tcontentTitle: __( 'All template parts' ),\n\t},\n};\n\nconst { useLocation } = unlock( routerPrivateApis );\n\nexport default function SidebarNavigationScreenTemplatesBrowse() {\n\tconst {\n\t\tparams: { postType },\n\t} = useNavigator();\n\tconst {\n\t\tparams: { didAccessPatternsPage, activeView = 'all' },\n\t} = useLocation();\n\n\tconst isTemplatePartsMode = useSelect( ( select ) => {\n\t\treturn !! select( editSiteStore ).getSettings()\n\t\t\t.supportsTemplatePartsMode;\n\t}, [] );\n\n\treturn (\n\t\t<SidebarNavigationScreen\n\t\t\t// If a classic theme that supports template parts has never\n\t\t\t// accessed the Patterns page, return to the dashboard.\n\t\t\tisRoot={ isTemplatePartsMode && ! didAccessPatternsPage }\n\t\t\ttitle={ config[ postType ].title }\n\t\t\tdescription={ config[ postType ].description }\n\t\t\tbackPath={ config[ postType ].backPath }\n\t\t\tcontent={\n\t\t\t\t<DataviewsTemplatesSidebarContent\n\t\t\t\t\tactiveView={ activeView }\n\t\t\t\t\tpostType={ postType }\n\t\t\t\t\ttitle={ config[ postType ].contentTitle }\n\t\t\t\t/>\n\t\t\t}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAKA,IAAAI,wBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA;AAIA,IAAAQ,WAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAJ,sBAAA,CAAAL,OAAA;AAnBA;AACA;AACA;;AAOA;AACA;AACA;;AAUA,MAAMU,MAAM,GAAG;EACd,CAAEC,6BAAkB,GAAI;IACvBC,KAAK,EAAE,IAAAC,QAAE,EAAE,kBAAmB,CAAC;IAC/BC,WAAW,EAAE,IAAAD,QAAE,EACd,iGACD,CAAC;IACDE,YAAY,EAAE,IAAAF,QAAE,EAAE,eAAgB;EACnC,CAAC;EACD,CAAEG,kCAAuB,GAAI;IAC5BJ,KAAK,EAAE,IAAAC,QAAE,EAAE,uBAAwB,CAAC;IACpCC,WAAW,EAAE,IAAAD,QAAE,EACd,2GACD,CAAC;IACDI,QAAQ,EAAE,WAAW;IACrBF,YAAY,EAAE,IAAAF,QAAE,EAAE,oBAAqB;EACxC;AACD,CAAC;AAED,MAAM;EAAEK;AAAY,CAAC,GAAG,IAAAC,kBAAM,EAAEC,mBAAkB,CAAC;AAEpC,SAASC,sCAAsCA,CAAA,EAAG;EAChE,MAAM;IACLC,MAAM,EAAE;MAAEC;IAAS;EACpB,CAAC,GAAG,IAAAC,sCAAY,EAAC,CAAC;EAClB,MAAM;IACLF,MAAM,EAAE;MAAEG,qBAAqB;MAAEC,UAAU,GAAG;IAAM;EACrD,CAAC,GAAGR,WAAW,CAAC,CAAC;EAEjB,MAAMS,mBAAmB,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IACpD,OAAO,CAAC,CAAEA,MAAM,CAAEC,YAAc,CAAC,CAACC,WAAW,CAAC,CAAC,CAC7CC,yBAAyB;EAC5B,CAAC,EAAE,EAAG,CAAC;EAEP,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC9B,wBAAA,CAAA+B;EACA;EACA;EAAA;IACAC,MAAM,EAAGT,mBAAmB,IAAI,CAAEF,qBAAuB;IACzDb,KAAK,EAAGF,MAAM,CAAEa,QAAQ,CAAE,CAACX,KAAO;IAClCE,WAAW,EAAGJ,MAAM,CAAEa,QAAQ,CAAE,CAACT,WAAa;IAC9CG,QAAQ,EAAGP,MAAM,CAAEa,QAAQ,CAAE,CAACN,QAAU;IACxCoB,OAAO,EACN,IAAAJ,MAAA,CAAAC,aAAA,EAACzB,QAAA,CAAA0B,OAAgC;MAChCT,UAAU,EAAGA,UAAY;MACzBH,QAAQ,EAAGA,QAAU;MACrBX,KAAK,EAAGF,MAAM,CAAEa,QAAQ,CAAE,CAACR;IAAc,CACzC;EACD,CACD,CAAC;AAEJ"}

package/build/components/style-book/index.js CHANGED Viewed

@@ -340,6 +340,8 @@ const Example = ({
   const originalSettings = (0, _data.useSelect)(select => select(_blockEditor.store).getSettings(), []);
   const settings = (0, _element.useMemo)(() => ({
     ...originalSettings,
+    focusMode: false,
+    // Disable "Spotlight mode".
     __unstableIsPreviewMode: true
   }), [originalSettings]);

package/build/components/style-book/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_blocks","_blockEditor","_data","_compose","_element","_keycodes","_lockUnlock","_editorCanvasContainer","_globalStylesProvider","ExperimentalBlockEditorProvider","useGlobalStyle","GlobalStylesContext","useGlobalStylesOutputWithConfig","unlock","blockEditorPrivateApis","CompositeV2","Composite","CompositeItemV2","CompositeItem","useCompositeStoreV2","useCompositeStore","Tabs","componentsPrivateApis","STYLE_BOOK_IFRAME_STYLES","isObjectEmpty","object","Object","keys","length","getExamples","headingsExample","name","title","__","category","blocks","createBlock","content","level","otherExamples","getBlockTypes","filter","blockType","example","supports","inserter","map","getBlockFromExample","StyleBook","enableResizing","isSelected","onClick","onSelect","showCloseButton","onClose","showTabs","userConfig","resizeObserver","sizes","useResizeObserver","textColor","backgroundColor","examples","useMemo","tabs","getCategories","some","slug","icon","base","baseConfig","useContext","mergedConfig","mergeBaseAndUserConfigs","originalSettings","useSelect","select","blockEditorStore","getSettings","settings","__unstableIsPreviewMode","globalStyles","styles","_react","createElement","default","closeButtonLabel","className","classnames","width","style","color","background","TabList","tab","Tab","tabId","key","TabPanel","focusable","StyleBookBody","isFocused","setIsFocused","useState","buttonModeProps","role","onFocus","onBlur","onKeyDown","event","defaultPrevented","keyCode","ENTER","SPACE","preventDefault","readonly","buttonModeStyles","__unstableIframe","tabIndex","__unstableEditorStyles","Examples","label","sprintf","memo","compositeStore","orientation","store","Example","id","renderedBlocks","Array","isArray","render","Disabled","value","BlockList","renderAppender","_default","exports"],"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport {\n\tDisabled,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetCategories,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\nimport {\n\tBlockList,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { useMemo, useState, memo, useContext } from '@wordpress/element';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../lock-unlock';\nimport EditorCanvasContainer from '../editor-canvas-container';\nimport { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';\n\nconst {\n\tExperimentalBlockEditorProvider,\n\tuseGlobalStyle,\n\tGlobalStylesContext,\n\tuseGlobalStylesOutputWithConfig,\n} = unlock( blockEditorPrivateApis );\n\nconst {\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tuseCompositeStoreV2: useCompositeStore,\n\tTabs,\n} = unlock( componentsPrivateApis );\n\n// The content area of the Style Book is rendered within an iframe so that global styles\n// are applied to elements within the entire content area. To support elements that are\n// not part of the block previews, such as headings and layout for the block previews,\n// additional CSS rules need to be passed into the iframe. These are hard-coded below.\n// Note that button styles are unset, and then focus rules from the `Button` component are\n// applied to the `button` element, targeted via `.edit-site-style-book__example`.\n// This is to ensure that browser default styles for buttons are not applied to the previews.\nconst STYLE_BOOK_IFRAME_STYLES = `\n\t.edit-site-style-book__examples {\n\t\tmax-width: 900px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.edit-site-style-book__example {\n\t\tborder-radius: 2px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 40px;\n\t\tmargin-bottom: 40px;\n\t\tpadding: 16px;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tscroll-margin-top: 32px;\n\t\tscroll-margin-bottom: 32px;\n\t}\n\n\t.edit-site-style-book__example.is-selected {\n\t\tbox-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t}\n\n\t.edit-site-style-book__example:focus:not(:disabled) {\n\t\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t\toutline: 3px solid transparent;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example {\n\t\tflex-direction: row;\n\t}\n\n\t.edit-site-style-book__example-title {\n\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n\t\tfont-size: 11px;\n\t\tfont-weight: 500;\n\t\tline-height: normal;\n\t\tmargin: 0;\n\t\ttext-align: left;\n\t\ttext-transform: uppercase;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {\n\t\ttext-align: right;\n\t\twidth: 120px;\n\t}\n\n\t.edit-site-style-book__example-preview {\n\t\twidth: 100%;\n\t}\n\n\t.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,\n\t.edit-site-style-book__example-preview .block-list-appender {\n\t\tdisplay: none;\n\t}\n\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {\n\t\tmargin-top: 0;\n\t}\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {\n\t\tmargin-bottom: 0;\n\t}\n`;\n\nfunction isObjectEmpty( object ) {\n\treturn ! object \|\| Object.keys( object ).length === 0;\n}\n\nfunction getExamples() {\n\t// Use our own example for the Heading block so that we can show multiple\n\t// heading levels.\n\tconst headingsExample = {\n\t\tname: 'core/heading',\n\t\ttitle: __( 'Headings' ),\n\t\tcategory: 'text',\n\t\tblocks: [\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 1,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 2,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 3,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 4,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 5,\n\t\t\t} ),\n\t\t],\n\t};\n\n\tconst otherExamples = getBlockTypes()\n\t\t.filter( ( blockType ) => {\n\t\t\tconst { name, example, supports } = blockType;\n\t\t\treturn (\n\t\t\t\tname !== 'core/heading' &&\n\t\t\t\t!! example &&\n\t\t\t\tsupports.inserter !== false\n\t\t\t);\n\t\t} )\n\t\t.map( ( blockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\tblocks: getBlockFromExample( blockType.name, blockType.example ),\n\t\t} ) );\n\n\treturn [ headingsExample, ...otherExamples ];\n}\n\nfunction StyleBook( {\n\tenableResizing = true,\n\tisSelected,\n\tonClick,\n\tonSelect,\n\tshowCloseButton = true,\n\tonClose,\n\tshowTabs = true,\n\tuserConfig = {},\n} ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst examples = useMemo( getExamples, [] );\n\tconst tabs = useMemo(\n\t\t() =>\n\t\t\tgetCategories()\n\t\t\t\t.filter( ( category ) =>\n\t\t\t\t\texamples.some(\n\t\t\t\t\t\t( example ) => example.category === category.slug\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.map( ( category ) => ( {\n\t\t\t\t\tname: category.slug,\n\t\t\t\t\ttitle: category.title,\n\t\t\t\t\ticon: category.icon,\n\t\t\t\t} ) ),\n\t\t[ examples ]\n\t);\n\tconst { base: baseConfig } = useContext( GlobalStylesContext );\n\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {\n\t\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t\t}\n\t\treturn {};\n\t}, [ baseConfig, userConfig ] );\n\n\t// Copied from packages/edit-site/src/components/revisions/index.js\n\t// could we create a shared hook?\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\tconst [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );\n\n\tsettings.styles =\n\t\t! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )\n\t\t\t? globalStyles\n\t\t\t: settings.styles;\n\n\treturn (\n\t\t<EditorCanvasContainer\n\t\t\tonClose={ onClose }\n\t\t\tenableResizing={ enableResizing }\n\t\t\tcloseButtonLabel={\n\t\t\t\tshowCloseButton ? __( 'Close Style Book' ) : null\n\t\t\t}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ classnames( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t\t'is-button': !! onClick,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: textColor,\n\t\t\t\t\tbackground: backgroundColor,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t{ showTabs ? (\n\t\t\t\t\t<div className=\"edit-site-style-book__tabs\">\n\t\t\t\t\t\t<Tabs>\n\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<StyleBookBody\n\t\t\t\t\t\t\t\t\t\tcategory={ tab.name }\n\t\t\t\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t\t\t\t\tsizes={ sizes }\n\t\t\t\t\t\t\t\t\t\ttitle={ tab.title }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<StyleBookBody\n\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tsizes={ sizes }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</EditorCanvasContainer>\n\t);\n}\n\nconst StyleBookBody = ( {\n\tcategory,\n\texamples,\n\tisSelected,\n\tonClick,\n\tonSelect,\n\tsettings,\n\tsizes,\n\ttitle,\n} ) => {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\t// The presence of an `onClick` prop indicates that the Style Book is being used as a button.\n\t// In this case, add additional props to the iframe to make it behave like a button.\n\tconst buttonModeProps = {\n\t\trole: 'button',\n\t\tonFocus: () => setIsFocused( true ),\n\t\tonBlur: () => setIsFocused( false ),\n\t\tonKeyDown: ( event ) => {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst { keyCode } = event;\n\t\t\tif ( onClick && ( keyCode === ENTER \|\| keyCode === SPACE ) ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonClick( event );\n\t\t\t}\n\t\t},\n\t\tonClick: ( event ) => {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( onClick ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonClick( event );\n\t\t\t}\n\t\t},\n\t\treadonly: true,\n\t};\n\n\tconst buttonModeStyles = onClick\n\t\t? 'body { cursor: pointer; } body { pointer-events: none; }'\n\t\t: '';\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName={ classnames( 'edit-site-style-book__iframe', {\n\t\t\t\t'is-focused': isFocused && !! onClick,\n\t\t\t\t'is-button': !! onClick,\n\t\t\t} ) }\n\t\t\tname=\"style-book-canvas\"\n\t\t\ttabIndex={ 0 }\n\t\t\t{ ...( onClick ? buttonModeProps : {} ) }\n\t\t>\n\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t<style>\n\t\t\t\t{\n\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t`.is-root-container { display: flow-root; }\n\t\t\t\t\t\tbody { position: relative; padding: 32px !important; }` +\n\t\t\t\t\t\tSTYLE_BOOK_IFRAME_STYLES +\n\t\t\t\t\t\tbuttonModeStyles\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<Examples\n\t\t\t\tclassName={ classnames( 'edit-site-style-book__examples', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t} ) }\n\t\t\t\texamples={ examples }\n\t\t\t\tcategory={ category }\n\t\t\t\tlabel={\n\t\t\t\t\ttitle\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Category of blocks, e.g. Text.\n\t\t\t\t\t\t\t\t__( 'Examples of blocks in the %s category' ),\n\t\t\t\t\t\t\t\ttitle\n\t\t\t\t\t\t )\n\t\t\t\t\t\t: __( 'Examples of blocks' )\n\t\t\t\t}\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tkey={ category }\n\t\t\t/>\n\t\t</Iframe>\n\t);\n};\n\nconst Examples = memo(\n\t( { className, examples, category, label, isSelected, onSelect } ) => {\n\t\tconst compositeStore = useCompositeStore( { orientation: 'vertical' } );\n\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\tstore={ compositeStore }\n\t\t\t\tclassName={ className }\n\t\t\t\taria-label={ label }\n\t\t\t\trole=\"grid\"\n\t\t\t>\n\t\t\t\t{ examples\n\t\t\t\t\t.filter( ( example ) =>\n\t\t\t\t\t\tcategory ? example.category === category : true\n\t\t\t\t\t)\n\t\t\t\t\t.map( ( example ) => (\n\t\t\t\t\t\t<Example\n\t\t\t\t\t\t\tkey={ example.name }\n\t\t\t\t\t\t\tid={ `example-${ example.name }` }\n\t\t\t\t\t\t\ttitle={ example.title }\n\t\t\t\t\t\t\tblocks={ example.blocks }\n\t\t\t\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonSelect?.( example.name );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t</Composite>\n\t\t);\n\t}\n);\n\nconst Example = ( { id, title, blocks, isSelected, onClick } ) => {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\t// Cache the list of blocks to avoid additional processing when the component is re-rendered.\n\tconst renderedBlocks = useMemo(\n\t\t() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),\n\t\t[ blocks ]\n\t);\n\n\treturn (\n\t\t<div role=\"row\">\n\t\t\t<div role=\"gridcell\">\n\t\t\t\t<CompositeItem\n\t\t\t\t\tclassName={ classnames( 'edit-site-style-book__example', {\n\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t} ) }\n\t\t\t\t\tid={ id }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\t\t\t\ttitle\n\t\t\t\t\t) }\n\t\t\t\t\trender={ <div /> }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t>\n\t\t\t\t\t<span className=\"edit-site-style-book__example-title\">\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</span>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"edit-site-style-book__example-preview\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t>\n\t\t\t\t\t\t<Disabled className=\"edit-site-style-book__example-preview__content\">\n\t\t\t\t\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\t\t\t\t\tvalue={ renderedBlocks }\n\t\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BlockList renderAppender={ false } />\n\t\t\t\t\t\t\t</ExperimentalBlockEditorProvider>\n\t\t\t\t\t\t</Disabled>\n\t\t\t\t\t</div>\n\t\t\t\t</CompositeItem>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default StyleBook;\n"],"mappings":"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"}
1	+ {"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_i18n","_blocks","_blockEditor","_data","_compose","_element","_keycodes","_lockUnlock","_editorCanvasContainer","_globalStylesProvider","ExperimentalBlockEditorProvider","useGlobalStyle","GlobalStylesContext","useGlobalStylesOutputWithConfig","unlock","blockEditorPrivateApis","CompositeV2","Composite","CompositeItemV2","CompositeItem","useCompositeStoreV2","useCompositeStore","Tabs","componentsPrivateApis","STYLE_BOOK_IFRAME_STYLES","isObjectEmpty","object","Object","keys","length","getExamples","headingsExample","name","title","__","category","blocks","createBlock","content","level","otherExamples","getBlockTypes","filter","blockType","example","supports","inserter","map","getBlockFromExample","StyleBook","enableResizing","isSelected","onClick","onSelect","showCloseButton","onClose","showTabs","userConfig","resizeObserver","sizes","useResizeObserver","textColor","backgroundColor","examples","useMemo","tabs","getCategories","some","slug","icon","base","baseConfig","useContext","mergedConfig","mergeBaseAndUserConfigs","originalSettings","useSelect","select","blockEditorStore","getSettings","settings","__unstableIsPreviewMode","globalStyles","styles","_react","createElement","default","closeButtonLabel","className","classnames","width","style","color","background","TabList","tab","Tab","tabId","key","TabPanel","focusable","StyleBookBody","isFocused","setIsFocused","useState","buttonModeProps","role","onFocus","onBlur","onKeyDown","event","defaultPrevented","keyCode","ENTER","SPACE","preventDefault","readonly","buttonModeStyles","__unstableIframe","tabIndex","__unstableEditorStyles","Examples","label","sprintf","memo","compositeStore","orientation","store","Example","id","focusMode","renderedBlocks","Array","isArray","render","Disabled","value","BlockList","renderAppender","_default","exports"],"sources":["@wordpress/edit-site/src/components/style-book/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport {\n\tDisabled,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tgetCategories,\n\tgetBlockTypes,\n\tgetBlockFromExample,\n\tcreateBlock,\n} from '@wordpress/blocks';\nimport {\n\tBlockList,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\t__unstableEditorStyles as EditorStyles,\n\t__unstableIframe as Iframe,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useResizeObserver } from '@wordpress/compose';\nimport { useMemo, useState, memo, useContext } from '@wordpress/element';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/\n Internal dependencies\n /\nimport { unlock } from '../../lock-unlock';\nimport EditorCanvasContainer from '../editor-canvas-container';\nimport { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';\n\nconst {\n\tExperimentalBlockEditorProvider,\n\tuseGlobalStyle,\n\tGlobalStylesContext,\n\tuseGlobalStylesOutputWithConfig,\n} = unlock( blockEditorPrivateApis );\n\nconst {\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tuseCompositeStoreV2: useCompositeStore,\n\tTabs,\n} = unlock( componentsPrivateApis );\n\n// The content area of the Style Book is rendered within an iframe so that global styles\n// are applied to elements within the entire content area. To support elements that are\n// not part of the block previews, such as headings and layout for the block previews,\n// additional CSS rules need to be passed into the iframe. These are hard-coded below.\n// Note that button styles are unset, and then focus rules from the `Button` component are\n// applied to the `button` element, targeted via `.edit-site-style-book__example`.\n// This is to ensure that browser default styles for buttons are not applied to the previews.\nconst STYLE_BOOK_IFRAME_STYLES = `\n\t.edit-site-style-book__examples {\n\t\tmax-width: 900px;\n\t\tmargin: 0 auto;\n\t}\n\n\t.edit-site-style-book__example {\n\t\tborder-radius: 2px;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 40px;\n\t\tmargin-bottom: 40px;\n\t\tpadding: 16px;\n\t\twidth: 100%;\n\t\tbox-sizing: border-box;\n\t\tscroll-margin-top: 32px;\n\t\tscroll-margin-bottom: 32px;\n\t}\n\n\t.edit-site-style-book__example.is-selected {\n\t\tbox-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t}\n\n\t.edit-site-style-book__example:focus:not(:disabled) {\n\t\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));\n\t\toutline: 3px solid transparent;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example {\n\t\tflex-direction: row;\n\t}\n\n\t.edit-site-style-book__example-title {\n\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n\t\tfont-size: 11px;\n\t\tfont-weight: 500;\n\t\tline-height: normal;\n\t\tmargin: 0;\n\t\ttext-align: left;\n\t\ttext-transform: uppercase;\n\t}\n\n\t.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {\n\t\ttext-align: right;\n\t\twidth: 120px;\n\t}\n\n\t.edit-site-style-book__example-preview {\n\t\twidth: 100%;\n\t}\n\n\t.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,\n\t.edit-site-style-book__example-preview .block-list-appender {\n\t\tdisplay: none;\n\t}\n\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {\n\t\tmargin-top: 0;\n\t}\n\t.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {\n\t\tmargin-bottom: 0;\n\t}\n`;\n\nfunction isObjectEmpty( object ) {\n\treturn ! object \|\| Object.keys( object ).length === 0;\n}\n\nfunction getExamples() {\n\t// Use our own example for the Heading block so that we can show multiple\n\t// heading levels.\n\tconst headingsExample = {\n\t\tname: 'core/heading',\n\t\ttitle: __( 'Headings' ),\n\t\tcategory: 'text',\n\t\tblocks: [\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 1,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 2,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 3,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 4,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/heading', {\n\t\t\t\tcontent: __( 'Code Is Poetry' ),\n\t\t\t\tlevel: 5,\n\t\t\t} ),\n\t\t],\n\t};\n\n\tconst otherExamples = getBlockTypes()\n\t\t.filter( ( blockType ) => {\n\t\t\tconst { name, example, supports } = blockType;\n\t\t\treturn (\n\t\t\t\tname !== 'core/heading' &&\n\t\t\t\t!! example &&\n\t\t\t\tsupports.inserter !== false\n\t\t\t);\n\t\t} )\n\t\t.map( ( blockType ) => ( {\n\t\t\tname: blockType.name,\n\t\t\ttitle: blockType.title,\n\t\t\tcategory: blockType.category,\n\t\t\tblocks: getBlockFromExample( blockType.name, blockType.example ),\n\t\t} ) );\n\n\treturn [ headingsExample, ...otherExamples ];\n}\n\nfunction StyleBook( {\n\tenableResizing = true,\n\tisSelected,\n\tonClick,\n\tonSelect,\n\tshowCloseButton = true,\n\tonClose,\n\tshowTabs = true,\n\tuserConfig = {},\n} ) {\n\tconst [ resizeObserver, sizes ] = useResizeObserver();\n\tconst [ textColor ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst examples = useMemo( getExamples, [] );\n\tconst tabs = useMemo(\n\t\t() =>\n\t\t\tgetCategories()\n\t\t\t\t.filter( ( category ) =>\n\t\t\t\t\texamples.some(\n\t\t\t\t\t\t( example ) => example.category === category.slug\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.map( ( category ) => ( {\n\t\t\t\t\tname: category.slug,\n\t\t\t\t\ttitle: category.title,\n\t\t\t\t\ticon: category.icon,\n\t\t\t\t} ) ),\n\t\t[ examples ]\n\t);\n\tconst { base: baseConfig } = useContext( GlobalStylesContext );\n\n\tconst mergedConfig = useMemo( () => {\n\t\tif ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {\n\t\t\treturn mergeBaseAndUserConfigs( baseConfig, userConfig );\n\t\t}\n\t\treturn {};\n\t}, [ baseConfig, userConfig ] );\n\n\t// Copied from packages/edit-site/src/components/revisions/index.js\n\t// could we create a shared hook?\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),\n\t\t[ originalSettings ]\n\t);\n\n\tconst [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );\n\n\tsettings.styles =\n\t\t! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )\n\t\t\t? globalStyles\n\t\t\t: settings.styles;\n\n\treturn (\n\t\t<EditorCanvasContainer\n\t\t\tonClose={ onClose }\n\t\t\tenableResizing={ enableResizing }\n\t\t\tcloseButtonLabel={\n\t\t\t\tshowCloseButton ? __( 'Close Style Book' ) : null\n\t\t\t}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ classnames( 'edit-site-style-book', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t\t'is-button': !! onClick,\n\t\t\t\t} ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcolor: textColor,\n\t\t\t\t\tbackground: backgroundColor,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ resizeObserver }\n\t\t\t\t{ showTabs ? (\n\t\t\t\t\t<div className=\"edit-site-style-book__tabs\">\n\t\t\t\t\t\t<Tabs>\n\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<StyleBookBody\n\t\t\t\t\t\t\t\t\t\tcategory={ tab.name }\n\t\t\t\t\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t\t\t\t\tsizes={ sizes }\n\t\t\t\t\t\t\t\t\t\ttitle={ tab.title }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</Tabs>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<StyleBookBody\n\t\t\t\t\t\texamples={ examples }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\tsizes={ sizes }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</EditorCanvasContainer>\n\t);\n}\n\nconst StyleBookBody = ( {\n\tcategory,\n\texamples,\n\tisSelected,\n\tonClick,\n\tonSelect,\n\tsettings,\n\tsizes,\n\ttitle,\n} ) => {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\t// The presence of an `onClick` prop indicates that the Style Book is being used as a button.\n\t// In this case, add additional props to the iframe to make it behave like a button.\n\tconst buttonModeProps = {\n\t\trole: 'button',\n\t\tonFocus: () => setIsFocused( true ),\n\t\tonBlur: () => setIsFocused( false ),\n\t\tonKeyDown: ( event ) => {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst { keyCode } = event;\n\t\t\tif ( onClick && ( keyCode === ENTER \|\| keyCode === SPACE ) ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonClick( event );\n\t\t\t}\n\t\t},\n\t\tonClick: ( event ) => {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( onClick ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonClick( event );\n\t\t\t}\n\t\t},\n\t\treadonly: true,\n\t};\n\n\tconst buttonModeStyles = onClick\n\t\t? 'body { cursor: pointer; } body { pointer-events: none; }'\n\t\t: '';\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName={ classnames( 'edit-site-style-book__iframe', {\n\t\t\t\t'is-focused': isFocused && !! onClick,\n\t\t\t\t'is-button': !! onClick,\n\t\t\t} ) }\n\t\t\tname=\"style-book-canvas\"\n\t\t\ttabIndex={ 0 }\n\t\t\t{ ...( onClick ? buttonModeProps : {} ) }\n\t\t>\n\t\t\t<EditorStyles styles={ settings.styles } />\n\t\t\t<style>\n\t\t\t\t{\n\t\t\t\t\t// Forming a \"block formatting context\" to prevent margin collapsing.\n\t\t\t\t\t// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context\n\t\t\t\t\t`.is-root-container { display: flow-root; }\n\t\t\t\t\t\tbody { position: relative; padding: 32px !important; }` +\n\t\t\t\t\t\tSTYLE_BOOK_IFRAME_STYLES +\n\t\t\t\t\t\tbuttonModeStyles\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<Examples\n\t\t\t\tclassName={ classnames( 'edit-site-style-book__examples', {\n\t\t\t\t\t'is-wide': sizes.width > 600,\n\t\t\t\t} ) }\n\t\t\t\texamples={ examples }\n\t\t\t\tcategory={ category }\n\t\t\t\tlabel={\n\t\t\t\t\ttitle\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Category of blocks, e.g. Text.\n\t\t\t\t\t\t\t\t__( 'Examples of blocks in the %s category' ),\n\t\t\t\t\t\t\t\ttitle\n\t\t\t\t\t\t )\n\t\t\t\t\t\t: __( 'Examples of blocks' )\n\t\t\t\t}\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tkey={ category }\n\t\t\t/>\n\t\t</Iframe>\n\t);\n};\n\nconst Examples = memo(\n\t( { className, examples, category, label, isSelected, onSelect } ) => {\n\t\tconst compositeStore = useCompositeStore( { orientation: 'vertical' } );\n\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\tstore={ compositeStore }\n\t\t\t\tclassName={ className }\n\t\t\t\taria-label={ label }\n\t\t\t\trole=\"grid\"\n\t\t\t>\n\t\t\t\t{ examples\n\t\t\t\t\t.filter( ( example ) =>\n\t\t\t\t\t\tcategory ? example.category === category : true\n\t\t\t\t\t)\n\t\t\t\t\t.map( ( example ) => (\n\t\t\t\t\t\t<Example\n\t\t\t\t\t\t\tkey={ example.name }\n\t\t\t\t\t\t\tid={ `example-${ example.name }` }\n\t\t\t\t\t\t\ttitle={ example.title }\n\t\t\t\t\t\t\tblocks={ example.blocks }\n\t\t\t\t\t\t\tisSelected={ isSelected( example.name ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonSelect?.( example.name );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t</Composite>\n\t\t);\n\t}\n);\n\nconst Example = ( { id, title, blocks, isSelected, onClick } ) => {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo(\n\t\t() => ( {\n\t\t\t...originalSettings,\n\t\t\tfocusMode: false, // Disable \"Spotlight mode\".\n\t\t\t__unstableIsPreviewMode: true,\n\t\t} ),\n\t\t[ originalSettings ]\n\t);\n\n\t// Cache the list of blocks to avoid additional processing when the component is re-rendered.\n\tconst renderedBlocks = useMemo(\n\t\t() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),\n\t\t[ blocks ]\n\t);\n\n\treturn (\n\t\t<div role=\"row\">\n\t\t\t<div role=\"gridcell\">\n\t\t\t\t<CompositeItem\n\t\t\t\t\tclassName={ classnames( 'edit-site-style-book__example', {\n\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t} ) }\n\t\t\t\t\tid={ id }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s: Title of a block, e.g. Heading.\n\t\t\t\t\t\t__( 'Open %s styles in Styles panel' ),\n\t\t\t\t\t\ttitle\n\t\t\t\t\t) }\n\t\t\t\t\trender={ <div /> }\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t>\n\t\t\t\t\t<span className=\"edit-site-style-book__example-title\">\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</span>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"edit-site-style-book__example-preview\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t>\n\t\t\t\t\t\t<Disabled className=\"edit-site-style-book__example-preview__content\">\n\t\t\t\t\t\t\t<ExperimentalBlockEditorProvider\n\t\t\t\t\t\t\t\tvalue={ renderedBlocks }\n\t\t\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BlockList renderAppender={ false } />\n\t\t\t\t\t\t\t</ExperimentalBlockEditorProvider>\n\t\t\t\t\t\t</Disabled>\n\t\t\t\t\t</div>\n\t\t\t\t</CompositeItem>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default StyleBook;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAIA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAMA,IAAAI,YAAA,GAAAJ,OAAA;AAOA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,SAAA,GAAAR,OAAA;AAKA,IAAAS,WAAA,GAAAT,OAAA;AACA,IAAAU,sBAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,qBAAA,GAAAX,OAAA;AApCA;AACA;AACA;;AAGA;AACA;AACA;;AAwBA;AACA;AACA;;AAKA,MAAM;EACLY,+BAA+B;EAC/BC,cAAc;EACdC,mBAAmB;EACnBC;AACD,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEpC,MAAM;EACLC,WAAW,EAAEC,SAAS;EACtBC,eAAe,EAAEC,aAAa;EAC9BC,mBAAmB,EAAEC,iBAAiB;EACtCC;AACD,CAAC,GAAG,IAAAR,kBAAM,EAAES,uBAAsB,CAAC;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,wBAAwB,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,SAASC,aAAaA,CAAEC,MAAM,EAAG;EAChC,OAAO,CAAEA,MAAM,IAAIC,MAAM,CAACC,IAAI,CAAEF,MAAO,CAAC,CAACG,MAAM,KAAK,CAAC;AACtD;AAEA,SAASC,WAAWA,CAAA,EAAG;EACtB;EACA;EACA,MAAMC,eAAe,GAAG;IACvBC,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,IAAAC,QAAE,EAAE,UAAW,CAAC;IACvBC,QAAQ,EAAE,MAAM;IAChBC,MAAM,EAAE,CACP,IAAAC,mBAAW,EAAE,cAAc,EAAE;MAC5BC,OAAO,EAAE,IAAAJ,QAAE,EAAE,gBAAiB,CAAC;MAC/BK,KAAK,EAAE;IACR,CAAE,CAAC,EACH,IAAAF,mBAAW,EAAE,cAAc,EAAE;MAC5BC,OAAO,EAAE,IAAAJ,QAAE,EAAE,gBAAiB,CAAC;MAC/BK,KAAK,EAAE;IACR,CAAE,CAAC,EACH,IAAAF,mBAAW,EAAE,cAAc,EAAE;MAC5BC,OAAO,EAAE,IAAAJ,QAAE,EAAE,gBAAiB,CAAC;MAC/BK,KAAK,EAAE;IACR,CAAE,CAAC,EACH,IAAAF,mBAAW,EAAE,cAAc,EAAE;MAC5BC,OAAO,EAAE,IAAAJ,QAAE,EAAE,gBAAiB,CAAC;MAC/BK,KAAK,EAAE;IACR,CAAE,CAAC,EACH,IAAAF,mBAAW,EAAE,cAAc,EAAE;MAC5BC,OAAO,EAAE,IAAAJ,QAAE,EAAE,gBAAiB,CAAC;MAC/BK,KAAK,EAAE;IACR,CAAE,CAAC;EAEL,CAAC;EAED,MAAMC,aAAa,GAAG,IAAAC,qBAAa,EAAC,CAAC,CACnCC,MAAM,CAAIC,SAAS,IAAM;IACzB,MAAM;MAAEX,IAAI;MAAEY,OAAO;MAAEC;IAAS,CAAC,GAAGF,SAAS;IAC7C,OACCX,IAAI,KAAK,cAAc,IACvB,CAAC,CAAEY,OAAO,IACVC,QAAQ,CAACC,QAAQ,KAAK,KAAK;EAE7B,CAAE,CAAC,CACFC,GAAG,CAAIJ,SAAS,KAAQ;IACxBX,IAAI,EAAEW,SAAS,CAACX,IAAI;IACpBC,KAAK,EAAEU,SAAS,CAACV,KAAK;IACtBE,QAAQ,EAAEQ,SAAS,CAACR,QAAQ;IAC5BC,MAAM,EAAE,IAAAY,2BAAmB,EAAEL,SAAS,CAACX,IAAI,EAAEW,SAAS,CAACC,OAAQ;EAChE,CAAC,CAAG,CAAC;EAEN,OAAO,CAAEb,eAAe,EAAE,GAAGS,aAAa,CAAE;AAC7C;AAEA,SAASS,SAASA,CAAE;EACnBC,cAAc,GAAG,IAAI;EACrBC,UAAU;EACVC,OAAO;EACPC,QAAQ;EACRC,eAAe,GAAG,IAAI;EACtBC,OAAO;EACPC,QAAQ,GAAG,IAAI;EACfC,UAAU,GAAG,CAAC;AACf,CAAC,EAAG;EACH,MAAM,CAAEC,cAAc,EAAEC,KAAK,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;EACrD,MAAM,CAAEC,SAAS,CAAE,GAAGlD,cAAc,CAAE,YAAa,CAAC;EACpD,MAAM,CAAEmD,eAAe,CAAE,GAAGnD,cAAc,CAAE,kBAAmB,CAAC;EAChE,MAAMoD,QAAQ,GAAG,IAAAC,gBAAO,EAAElC,WAAW,EAAE,EAAG,CAAC;EAC3C,MAAMmC,IAAI,GAAG,IAAAD,gBAAO,EACnB,MACC,IAAAE,qBAAa,EAAC,CAAC,CACbxB,MAAM,CAAIP,QAAQ,IAClB4B,QAAQ,CAACI,IAAI,CACVvB,OAAO,IAAMA,OAAO,CAACT,QAAQ,KAAKA,QAAQ,CAACiC,IAC9C,CACD,CAAC,CACArB,GAAG,CAAIZ,QAAQ,KAAQ;IACvBH,IAAI,EAAEG,QAAQ,CAACiC,IAAI;IACnBnC,KAAK,EAAEE,QAAQ,CAACF,KAAK;IACrBoC,IAAI,EAAElC,QAAQ,CAACkC;EAChB,CAAC,CAAG,CAAC,EACP,CAAEN,QAAQ,CACX,CAAC;EACD,MAAM;IAAEO,IAAI,EAAEC;EAAW,CAAC,GAAG,IAAAC,mBAAU,EAAE5D,mBAAoB,CAAC;EAE9D,MAAM6D,YAAY,GAAG,IAAAT,gBAAO,EAAE,MAAM;IACnC,IAAK,CAAEvC,aAAa,CAAEgC,UAAW,CAAC,IAAI,CAAEhC,aAAa,CAAE8C,UAAW,CAAC,EAAG;MACrE,OAAO,IAAAG,6CAAuB,EAAEH,UAAU,EAAEd,UAAW,CAAC;IACzD;IACA,OAAO,CAAC,CAAC;EACV,CAAC,EAAE,CAAEc,UAAU,EAAEd,UAAU,CAAG,CAAC;;EAE/B;EACA;EACA,MAAMkB,gBAAgB,GAAG,IAAAC,eAAS,EAC/BC,MAAM,IAAMA,MAAM,CAAEC,kBAAiB,CAAC,CAACC,WAAW,CAAC,CAAC,EACtD,EACD,CAAC;EAED,MAAMC,QAAQ,GAAG,IAAAhB,gBAAO,EACvB,OAAQ;IAAE,GAAGW,gBAAgB;IAAEM,uBAAuB,EAAE;EAAK,CAAC,CAAE,EAChE,CAAEN,gBAAgB,CACnB,CAAC;EAED,MAAM,CAAEO,YAAY,CAAE,GAAGrE,+BAA+B,CAAE4D,YAAa,CAAC;EAExEO,QAAQ,CAACG,MAAM,GACd,CAAE1D,aAAa,CAAEyD,YAAa,CAAC,IAAI,CAAEzD,aAAa,CAAEgC,UAAW,CAAC,GAC7DyB,YAAY,GACZF,QAAQ,CAACG,MAAM;EAEnB,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC7E,sBAAA,CAAA8E,OAAqB;IACrB/B,OAAO,EAAGA,OAAS;IACnBL,cAAc,EAAGA,cAAgB;IACjCqC,gBAAgB,EACfjC,eAAe,GAAG,IAAApB,QAAE,EAAE,kBAAmB,CAAC,GAAG;EAC7C,GAED,IAAAkD,MAAA,CAAAC,aAAA;IACCG,SAAS,EAAG,IAAAC,mBAAU,EAAE,sBAAsB,EAAE;MAC/C,SAAS,EAAE9B,KAAK,CAAC+B,KAAK,GAAG,GAAG;MAC5B,WAAW,EAAE,CAAC,CAAEtC;IACjB,CAAE,CAAG;IACLuC,KAAK,EAAG;MACPC,KAAK,EAAE/B,SAAS;MAChBgC,UAAU,EAAE/B;IACb;EAAG,GAEDJ,cAAc,EACdF,QAAQ,GACT,IAAA4B,MAAA,CAAAC,aAAA;IAAKG,SAAS,EAAC;EAA4B,GAC1C,IAAAJ,MAAA,CAAAC,aAAA,EAAC/D,IAAI,QACJ,IAAA8D,MAAA,CAAAC,aAAA,EAAC/D,IAAI,CAACwE,OAAO,QACV7B,IAAI,CAAClB,GAAG,CAAIgD,GAAG,IAChB,IAAAX,MAAA,CAAAC,aAAA,EAAC/D,IAAI,CAAC0E,GAAG;IACRC,KAAK,EAAGF,GAAG,CAAC/D,IAAM;IAClBkE,GAAG,EAAGH,GAAG,CAAC/D;EAAM,GAEd+D,GAAG,CAAC9D,KACG,CACT,CACW,CAAC,EACbgC,IAAI,CAAClB,GAAG,CAAIgD,GAAG,IAChB,IAAAX,MAAA,CAAAC,aAAA,EAAC/D,IAAI,CAAC6E,QAAQ;IACbD,GAAG,EAAGH,GAAG,CAAC/D,IAAM;IAChBiE,KAAK,EAAGF,GAAG,CAAC/D,IAAM;IAClBoE,SAAS,EAAG;EAAO,GAEnB,IAAAhB,MAAA,CAAAC,aAAA,EAACgB,aAAa;IACblE,QAAQ,EAAG4D,GAAG,CAAC/D,IAAM;IACrB+B,QAAQ,EAAGA,QAAU;IACrBZ,UAAU,EAAGA,UAAY;IACzBE,QAAQ,EAAGA,QAAU;IACrB2B,QAAQ,EAAGA,QAAU;IACrBrB,KAAK,EAAGA,KAAO;IACf1B,KAAK,EAAG8D,GAAG,CAAC9D;EAAO,CACnB,CACa,CACd,CACG,CACF,CAAC,GAEN,IAAAmD,MAAA,CAAAC,aAAA,EAACgB,aAAa;IACbtC,QAAQ,EAAGA,QAAU;IACrBZ,UAAU,EAAGA,UAAY;IACzBC,OAAO,EAAGA,OAAS;IACnBC,QAAQ,EAAGA,QAAU;IACrB2B,QAAQ,EAAGA,QAAU;IACrBrB,KAAK,EAAGA;EAAO,CACf,CAEE,CACiB,CAAC;AAE1B;AAEA,MAAM0C,aAAa,GAAGA,CAAE;EACvBlE,QAAQ;EACR4B,QAAQ;EACRZ,UAAU;EACVC,OAAO;EACPC,QAAQ;EACR2B,QAAQ;EACRrB,KAAK;EACL1B;AACD,CAAC,KAAM;EACN,MAAM,CAAEqE,SAAS,EAAEC,YAAY,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;;EAErD;EACA;EACA,MAAMC,eAAe,GAAG;IACvBC,IAAI,EAAE,QAAQ;IACdC,OAAO,EAAEA,CAAA,KAAMJ,YAAY,CAAE,IAAK,CAAC;IACnCK,MAAM,EAAEA,CAAA,KAAML,YAAY,CAAE,KAAM,CAAC;IACnCM,SAAS,EAAIC,KAAK,IAAM;MACvB,IAAKA,KAAK,CAACC,gBAAgB,EAAG;QAC7B;MACD;MACA,MAAM;QAAEC;MAAQ,CAAC,GAAGF,KAAK;MACzB,IAAK1D,OAAO,KAAM4D,OAAO,KAAKC,eAAK,IAAID,OAAO,KAAKE,eAAK,CAAE,EAAG;QAC5DJ,KAAK,CAACK,cAAc,CAAC,CAAC;QACtB/D,OAAO,CAAE0D,KAAM,CAAC;MACjB;IACD,CAAC;IACD1D,OAAO,EAAI0D,KAAK,IAAM;MACrB,IAAKA,KAAK,CAACC,gBAAgB,EAAG;QAC7B;MACD;MACA,IAAK3D,OAAO,EAAG;QACd0D,KAAK,CAACK,cAAc,CAAC,CAAC;QACtB/D,OAAO,CAAE0D,KAAM,CAAC;MACjB;IACD,CAAC;IACDM,QAAQ,EAAE;EACX,CAAC;EAED,MAAMC,gBAAgB,GAAGjE,OAAO,GAC7B,4DAA4D,GAC5D,EAAE;EAEL,OACC,IAAAgC,MAAA,CAAAC,aAAA,EAACnF,YAAA,CAAAoH,gBAAM;IACN9B,SAAS,EAAG,IAAAC,mBAAU,EAAE,8BAA8B,EAAE;MACvD,YAAY,EAAEa,SAAS,IAAI,CAAC,CAAElD,OAAO;MACrC,WAAW,EAAE,CAAC,CAAEA;IACjB,CAAE,CAAG;IACLpB,IAAI,EAAC,mBAAmB;IACxBuF,QAAQ,EAAG,CAAG;IAAA,IACPnE,OAAO,GAAGqD,eAAe,GAAG,CAAC,CAAC;EAAA,GAErC,IAAArB,MAAA,CAAAC,aAAA,EAACnF,YAAA,CAAAsH,sBAAY;IAACrC,MAAM,EAAGH,QAAQ,CAACG;EAAQ,CAAE,CAAC,EAC3C,IAAAC,MAAA,CAAAC,aAAA;EAEE;EACA;EACC;AACN,6DAA6D,GACvD7D,wBAAwB,GACxB6F,gBAEI,CAAC,EACR,IAAAjC,MAAA,CAAAC,aAAA,EAACoC,QAAQ;IACRjC,SAAS,EAAG,IAAAC,mBAAU,EAAE,gCAAgC,EAAE;MACzD,SAAS,EAAE9B,KAAK,CAAC+B,KAAK,GAAG;IAC1B,CAAE,CAAG;IACL3B,QAAQ,EAAGA,QAAU;IACrB5B,QAAQ,EAAGA,QAAU;IACrBuF,KAAK,EACJzF,KAAK,GACF,IAAA0F,aAAO;IACP;IACA,IAAAzF,QAAE,EAAE,uCAAwC,CAAC,EAC7CD,KACA,CAAC,GACD,IAAAC,QAAE,EAAE,oBAAqB,CAC5B;IACDiB,UAAU,EAAGA,UAAY;IACzBE,QAAQ,EAAGA,QAAU;IACrB6C,GAAG,EAAG/D;EAAU,CAChB,CACM,CAAC;AAEX,CAAC;AAED,MAAMsF,QAAQ,GAAG,IAAAG,aAAI,EACpB,CAAE;EAAEpC,SAAS;EAAEzB,QAAQ;EAAE5B,QAAQ;EAAEuF,KAAK;EAAEvE,UAAU;EAAEE;AAAS,CAAC,KAAM;EACrE,MAAMwE,cAAc,GAAGxG,iBAAiB,CAAE;IAAEyG,WAAW,EAAE;EAAW,CAAE,CAAC;EAEvE,OACC,IAAA1C,MAAA,CAAAC,aAAA,EAACpE,SAAS;IACT8G,KAAK,EAAGF,cAAgB;IACxBrC,SAAS,EAAGA,SAAW;IACvB,cAAakC,KAAO;IACpBhB,IAAI,EAAC;EAAM,GAET3C,QAAQ,CACRrB,MAAM,CAAIE,OAAO,IACjBT,QAAQ,GAAGS,OAAO,CAACT,QAAQ,KAAKA,QAAQ,GAAG,IAC5C,CAAC,CACAY,GAAG,CAAIH,OAAO,IACd,IAAAwC,MAAA,CAAAC,aAAA,EAAC2C,OAAO;IACP9B,GAAG,EAAGtD,OAAO,CAACZ,IAAM;IACpBiG,EAAE,EAAI,WAAWrF,OAAO,CAACZ,IAAM,EAAG;IAClCC,KAAK,EAAGW,OAAO,CAACX,KAAO;IACvBG,MAAM,EAAGQ,OAAO,CAACR,MAAQ;IACzBe,UAAU,EAAGA,UAAU,CAAEP,OAAO,CAACZ,IAAK,CAAG;IACzCoB,OAAO,EAAGA,CAAA,KAAM;MACfC,QAAQ,GAAIT,OAAO,CAACZ,IAAK,CAAC;IAC3B;EAAG,CACH,CACA,CACO,CAAC;AAEd,CACD,CAAC;AAED,MAAMgG,OAAO,GAAGA,CAAE;EAAEC,EAAE;EAAEhG,KAAK;EAAEG,MAAM;EAAEe,UAAU;EAAEC;AAAQ,CAAC,KAAM;EACjE,MAAMuB,gBAAgB,GAAG,IAAAC,eAAS,EAC/BC,MAAM,IAAMA,MAAM,CAAEC,kBAAiB,CAAC,CAACC,WAAW,CAAC,CAAC,EACtD,EACD,CAAC;EACD,MAAMC,QAAQ,GAAG,IAAAhB,gBAAO,EACvB,OAAQ;IACP,GAAGW,gBAAgB;IACnBuD,SAAS,EAAE,KAAK;IAAE;IAClBjD,uBAAuB,EAAE;EAC1B,CAAC,CAAE,EACH,CAAEN,gBAAgB,CACnB,CAAC;;EAED;EACA,MAAMwD,cAAc,GAAG,IAAAnE,gBAAO,EAC7B,MAAQoE,KAAK,CAACC,OAAO,CAAEjG,MAAO,CAAC,GAAGA,MAAM,GAAG,CAAEA,MAAM,CAAI,EACvD,CAAEA,MAAM,CACT,CAAC;EAED,OACC,IAAAgD,MAAA,CAAAC,aAAA;IAAKqB,IAAI,EAAC;EAAK,GACd,IAAAtB,MAAA,CAAAC,aAAA;IAAKqB,IAAI,EAAC;EAAU,GACnB,IAAAtB,MAAA,CAAAC,aAAA,EAAClE,aAAa;IACbqE,SAAS,EAAG,IAAAC,mBAAU,EAAE,+BAA+B,EAAE;MACxD,aAAa,EAAEtC;IAChB,CAAE,CAAG;IACL8E,EAAE,EAAGA,EAAI;IACT,cAAa,IAAAN,aAAO;IACnB;IACA,IAAAzF,QAAE,EAAE,gCAAiC,CAAC,EACtCD,KACD,CAAG;IACHqG,MAAM,EAAG,IAAAlD,MAAA,CAAAC,aAAA,aAAM,CAAG;IAClBqB,IAAI,EAAC,QAAQ;IACbtD,OAAO,EAAGA;EAAS,GAEnB,IAAAgC,MAAA,CAAAC,aAAA;IAAMG,SAAS,EAAC;EAAqC,GAClDvD,KACG,CAAC,EACP,IAAAmD,MAAA,CAAAC,aAAA;IACCG,SAAS,EAAC,uCAAuC;IACjD;EAAW,GAEX,IAAAJ,MAAA,CAAAC,aAAA,EAACtF,WAAA,CAAAwI,QAAQ;IAAC/C,SAAS,EAAC;EAAgD,GACnE,IAAAJ,MAAA,CAAAC,aAAA,EAAC3E,+BAA+B;IAC/B8H,KAAK,EAAGL,cAAgB;IACxBnD,QAAQ,EAAGA;EAAU,GAErB,IAAAI,MAAA,CAAAC,aAAA,EAACnF,YAAA,CAAAuI,SAAS;IAACC,cAAc,EAAG;EAAO,CAAE,CACL,CACxB,CACN,CACS,CACX,CACD,CAAC;AAER,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAtD,OAAA,GAEarC,SAAS"}

package/build-module/components/global-styles/font-library-modal/collection-font-variant.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { CheckboxControl, Flex, privateApis as componentsPrivateApis } from '@wo
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 function CollectionFontVariant({
   face,
@@ -29,7 +29,7 @@ function CollectionFontVariant({
   } = unlock(componentsPrivateApis);
   const checkboxId = kebabCase(`${font.slug}-${getFontFaceVariantName(face)}`);
   return createElement("div", {
-    className: "font-library-modal__library-font-variant"
+    className: "font-library-modal__font-card"
   }, createElement(Flex, {
     justify: "flex-start",
     align: "center",
@@ -41,8 +41,8 @@ function CollectionFontVariant({
     id: checkboxId
   }), createElement("label", {
     htmlFor: checkboxId
-  }, createElement(FontFaceDemo, {
-    fontFace: face,
+  }, createElement(FontDemo, {
+    font: face,
     text: displayName,
     onClick: handleToggleActivation
   }))));

package/build-module/components/global-styles/font-library-modal/collection-font-variant.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["CheckboxControl","Flex","privateApis","componentsPrivateApis","getFontFaceVariantName","~~FontFaceDemo~~","unlock","CollectionFontVariant","face","font","handleToggleVariant","selected","handleToggleActivation","fontFace","displayName","name","kebabCase","checkboxId","slug","createElement","className","justify","align","gap","checked","onChange","__nextHasNoMarginBottom","id","htmlFor","text","onClick"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tCheckboxControl,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport ~~FontFaceDemo~~ from './font-demo';\nimport { unlock } from '../../../lock-unlock';\n\nfunction CollectionFontVariant( {\n\tface,\n\tfont,\n\thandleToggleVariant,\n\tselected,\n} ) {\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace ) {\n\t\t\thandleToggleVariant( font, face );\n\t\t\treturn;\n\t\t}\n\t\thandleToggleVariant( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst checkboxId = kebabCase(\n\t\t`${ font.slug }-${ getFontFaceVariantName( face ) }`\n\t);\n\n\treturn (\n\t\t<div className=\"font-library-~~modal__library~~-~~font-variant~~\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ selected }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<~~FontFaceDemo~~\n\t\t\t\t\t\~~tfontFace~~={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default CollectionFontVariant;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,eAAe,EACfC,IAAI,EACJC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;AAChD,OAAOC,~~YAAY~~,MAAM,aAAa;~~AACtC~~,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,SAASC,qBAAqBA,CAAE;EAC/BC,IAAI;EACJC,IAAI;EACJC,mBAAmB;EACnBC;AACD,CAAC,EAAG;EACH,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKH,IAAI,EAAEI,QAAQ,EAAG;MACrBH,mBAAmB,CAAED,IAAI,EAAED,IAAK,CAAC;MACjC;IACD;IACAE,mBAAmB,CAAED,IAAK,CAAC;EAC5B,CAAC;EAED,MAAMK,WAAW,GAAGL,IAAI,CAACM,IAAI,GAAG,GAAG,GAAGX,sBAAsB,CAAEI,IAAK,CAAC;EACpE,MAAM;IAAEQ;EAAU,CAAC,GAAGV,MAAM,CAAEH,qBAAsB,CAAC;EACrD,MAAMc,UAAU,GAAGD,SAAS,CAC1B,GAAGP,IAAI,CAACS,IAAM,IAAId,sBAAsB,CAAEI,IAAK,CAAG,EACpD,CAAC;EAED,OACCW,aAAA;IAAKC,SAAS,EAAC;~~EAA0C~~,~~GACxDD~~,aAAA,CAAClB,IAAI;IAACoB,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACnDJ,aAAA,CAACnB,eAAe;IACfwB,OAAO,EAAGb,QAAU;IACpBc,QAAQ,EAAGb,sBAAwB;IACnCc,uBAAuB,EAAG,IAAM;IAChCC,EAAE,EAAGV;EAAY,CACjB,CAAC,EACFE,aAAA;IAAOS,OAAO,EAAGX;EAAY,GAC5BE,aAAA,CAACd,~~YAAY~~;~~IACZQ~~,~~QAAQ~~,~~EAAGL~~,IAAM;~~IACjBqB~~,IAAI,EAAGf,WAAa;IACpBgB,OAAO,EAAGlB;EAAwB,CAClC,CACK,CACF,CACF,CAAC;AAER;AAEA,eAAeL,qBAAqB"}
1	+ {"version":3,"names":["CheckboxControl","Flex","privateApis","componentsPrivateApis","getFontFaceVariantName","FontDemo","unlock","CollectionFontVariant","face","font","handleToggleVariant","selected","handleToggleActivation","fontFace","displayName","name","kebabCase","checkboxId","slug","createElement","className","justify","align","gap","checked","onChange","__nextHasNoMarginBottom","id","htmlFor","text","onClick"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport {\n\tCheckboxControl,\n\tFlex,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n */\nimport { getFontFaceVariantName } from './utils';\nimport FontDemo from './font-demo';\nimport { unlock } from '../../../lock-unlock';\n\nfunction CollectionFontVariant( {\n\tface,\n\tfont,\n\thandleToggleVariant,\n\tselected,\n} ) {\n\tconst handleToggleActivation = () => {\n\t\tif ( font?.fontFace ) {\n\t\t\thandleToggleVariant( font, face );\n\t\t\treturn;\n\t\t}\n\t\thandleToggleVariant( font );\n\t};\n\n\tconst displayName = font.name + ' ' + getFontFaceVariantName( face );\n\tconst { kebabCase } = unlock( componentsPrivateApis );\n\tconst checkboxId = kebabCase(\n\t\t`${ font.slug }-${ getFontFaceVariantName( face ) }`\n\t);\n\n\treturn (\n\t\t<div className=\"font-library-modal__font-card\">\n\t\t\t<Flex justify=\"flex-start\" align=\"center\" gap=\"1rem\">\n\t\t\t\t<CheckboxControl\n\t\t\t\t\tchecked={ selected }\n\t\t\t\t\tonChange={ handleToggleActivation }\n\t\t\t\t\t__nextHasNoMarginBottom={ true }\n\t\t\t\t\tid={ checkboxId }\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={ checkboxId }>\n\t\t\t\t\t<FontDemo\n\t\t\t\t\t\tfont={ face }\n\t\t\t\t\t\ttext={ displayName }\n\t\t\t\t\t\tonClick={ handleToggleActivation }\n\t\t\t\t\t/>\n\t\t\t\t</label>\n\t\t\t</Flex>\n\t\t</div>\n\t);\n}\n\nexport default CollectionFontVariant;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,eAAe,EACfC,IAAI,EACJC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;AAChD,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,SAASC,qBAAqBA,CAAE;EAC/BC,IAAI;EACJC,IAAI;EACJC,mBAAmB;EACnBC;AACD,CAAC,EAAG;EACH,MAAMC,sBAAsB,GAAGA,CAAA,KAAM;IACpC,IAAKH,IAAI,EAAEI,QAAQ,EAAG;MACrBH,mBAAmB,CAAED,IAAI,EAAED,IAAK,CAAC;MACjC;IACD;IACAE,mBAAmB,CAAED,IAAK,CAAC;EAC5B,CAAC;EAED,MAAMK,WAAW,GAAGL,IAAI,CAACM,IAAI,GAAG,GAAG,GAAGX,sBAAsB,CAAEI,IAAK,CAAC;EACpE,MAAM;IAAEQ;EAAU,CAAC,GAAGV,MAAM,CAAEH,qBAAsB,CAAC;EACrD,MAAMc,UAAU,GAAGD,SAAS,CAC1B,GAAGP,IAAI,CAACS,IAAM,IAAId,sBAAsB,CAAEI,IAAK,CAAG,EACpD,CAAC;EAED,OACCW,aAAA;IAAKC,SAAS,EAAC;EAA+B,GAC7CD,aAAA,CAAClB,IAAI;IAACoB,OAAO,EAAC,YAAY;IAACC,KAAK,EAAC,QAAQ;IAACC,GAAG,EAAC;EAAM,GACnDJ,aAAA,CAACnB,eAAe;IACfwB,OAAO,EAAGb,QAAU;IACpBc,QAAQ,EAAGb,sBAAwB;IACnCc,uBAAuB,EAAG,IAAM;IAChCC,EAAE,EAAGV;EAAY,CACjB,CAAC,EACFE,aAAA;IAAOS,OAAO,EAAGX;EAAY,GAC5BE,aAAA,CAACd,QAAQ;IACRI,IAAI,EAAGD,IAAM;IACbqB,IAAI,EAAGf,WAAa;IACpBgB,OAAO,EAAGlB;EAAwB,CAClC,CACK,CACF,CACF,CAAC;AAER;AAEA,eAAeL,qBAAqB"}

package/build-module/components/global-styles/font-library-modal/font-card.js CHANGED Viewed

@@ -3,43 +3,38 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 import { _n, sprintf } from '@wordpress/i18n';
-import { __experimentalText as Text, Button, Flex, FlexItem, Icon } from '@wordpress/components';
+import { __experimentalUseNavigator as useNavigator, __experimentalText as Text, Button, Flex, FlexItem, Icon } from '@wordpress/components';
 /**
  * Internal dependencies
  */
 import FontDemo from './font-demo';
-import { getFamilyPreviewStyle } from './utils/preview-styles';
 import { chevronRight } from '@wordpress/icons';
 function FontCard({
   font,
   onClick,
-  variantsText
+  variantsText,
+  navigatorPath
 }) {
-  const fakeFontFace = {
-    fontStyle: 'normal',
-    fontWeight: '400',
-    fontFamily: font.fontFamily,
-    fake: true
-  };
-  const displayFontFace = font.fontFace && font.fontFace.length ? font?.fontFace?.find(face => face.fontStyle === 'normal' && face.fontWeight === '400') || font.fontFace[0] : fakeFontFace;
-  const demoStyle = getFamilyPreviewStyle(font);
   const variantsCount = font.fontFace?.length || 1;
   const style = {
     cursor: !!onClick ? 'pointer' : 'default'
   };
+  const navigator = useNavigator();
   return createElement(Button, {
-    onClick: onClick,
+    onClick: () => {
+      onClick();
+      if (navigatorPath) {
+        navigator.goTo(navigatorPath);
+      }
+    },
     style: style,
     className: "font-library-modal__font-card"
   }, createElement(Flex, {
     justify: "space-between",
     wrap: false
   }, createElement(FontDemo, {
-    customPreviewUrl: font.preview,
-    fontFace: displayFontFace,
-    text: font.name,
-    style: demoStyle
+    font: font
   }), createElement(Flex, {
     justify: "flex-end"
   }, createElement(FlexItem, null, createElement(Text, {

package/build-module/components/global-styles/font-library-modal/font-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_n","sprintf","__experimentalText","Text","Button","Flex","FlexItem","Icon","FontDemo","~~getFamilyPreviewStyle","~~chevronRight","FontCard","font","onClick","variantsText","~~fakeFontFace~~","~~fontStyle~~","~~fontWeight","fontFamily","fake","displayFontFace","~~fontFace","length","~~find~~","~~face~~","~~demoStyle~~","~~variantsCount~~","~~style~~","~~cursor","createElement","~~className","justify","wrap","~~customPreviewUrl","preview","text","name","~~icon"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-card.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { _n, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalText as Text,\n\tButton,\n\tFlex,\n\tFlexItem,\n\tIcon,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport FontDemo from './font-demo';\nimport { ~~getFamilyPreviewStyle } from './utils/preview-styles';\nimport {~~ chevronRight } from '@wordpress/icons';\n\nfunction FontCard( { font, onClick, variantsText } ) {\n\tconst ~~fakeFontFace~~ = {\n\t\~~tfontStyle: 'normal',\~~n\t\~~tfontWeight~~: '~~400~~'~~,\n\t\tfontFamily:~~ ~~font.fontFamily,\n\t\tfake~~: ~~true~~,\n\t};\n\n\tconst ~~displayFontFace~~ =\n\t\~~tfont.fontFace~~ ~~&& font.fontFace.length~~\n\t\t\~~t? font?.fontFace?.find(\~~n\t\t\~~t\t\t~~( ~~face~~ ~~) =>\~~n\t\t\t\t\t\~~tface.fontStyle === 'normal' && face.fontWeight === '400'\n\~~t\t\~~t )~~ \|\| ~~font.fontFace[~~ 0 ]\n\t\t\t~~: fakeFontFace;\n~~\n\~~tconst demoStyle = getFamilyPreviewStyle~~( ~~font~~ );\n\n\~~tconst variantsCount = font.fontFace?.length \|\| 1;\n~~\~~n\tconst style = {\n\~~t\~~tcursor: !! onClick ? 'pointer' : 'default',\n\~~t}~~;\n~~\n\~~treturn (\n\~~t\t~~<Button~~\n\t~~\t\tonClick={~~ ~~onClick~~ }\n\t\t\tstyle={ style }\n\t\t\tclassName=\"font-library-modal__font-card\"\n\t\t>\n\t\t\t<Flex justify=\"space-between\" wrap={ false }>\n\t\t\t\t<FontDemo~~\n\t\t\t\t\tcustomPreviewUrl={~~ font~~.preview }\n\t\t\t\t\tfontFace~~={ ~~displayFontFace }\n\t\t\t\t\ttext={~~ font~~.name~~ }~~\n\t\t\t\t\tstyle={~~ ~~demoStyle }\n\t\t\t\t~~/>\n\t\t\t\t<Flex justify=\"flex-end\">\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Text className=\"font-library-modal__font-card__count\">\n\t\t\t\t\t\t\t{ variantsText \|\|\n\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t/ translators: %d: Number of font variants. */\n\t\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t\t'%d variant',\n\t\t\t\t\t\t\t\t\t\t'%d variants',\n\t\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Icon icon={ chevronRight } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</Flex>\n\t\t</Button>\n\t);\n}\n\nexport default FontCard;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SACCC,kBAAkB,IAAIC,IAAI,EAC1BC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,IAAI,QACE,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,~~qBAAqB,QAAQ,wBAAwB;AAC9D,SAASC,~~YAAY,QAAQ,kBAAkB;AAE/C,SAASC,QAAQA,CAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC;~~AAAa~~,CAAC,EAAG;~~EACpD~~,MAAMC,~~YAAY~~,~~GAAG;IACpBC~~,~~SAAS~~,~~EAAE~~,QAAQ~~;IACnBC~~,~~UAAU~~,~~EAAE~~,~~KAAK;IACjBC,UAAU,EAAEN,~~IAAI,~~CAACM,UAAU;IAC3BC,IAAI,EAAE;EACP,~~CAAC;~~EAED~~,MAAMC,~~eAAe~~,~~GACpBR~~,~~IAAI,CAACS,QAAQ,IAAIT,IAAI,CAACS,QAAQ,CAACC,~~MAAM,~~GAClCV~~,~~IAAI~~,~~EAAES~~,~~QAAQ~~,~~EAAEE~~,~~IAAI,CAClBC,IAAI,IACLA,IAAI,CAACR,~~SAAS,~~KAAK~~,~~QAAQ,IAAIQ,IAAI,CAACP,UAAU,KAAK,KACpD,~~CAAC~~,IAAIL,IAAI,CAACS,QAAQ,CAAE,CAAC,CAAE,GACvBN,YAAY~~;~~EAEhB~~,~~MAAMU~~,SAAS,~~GAAGhB~~,~~qBAAqB~~,~~CAAEG~~,~~IAAK,~~CAAC;~~EAE/C~~,~~MAAMc~~,~~aAAa~~,~~GAAGd~~,~~IAAI,CAACS,QAAQ,EAAEC,~~MAAM,~~IAAI~~,~~CAAC;EAEhD~~,~~MAAMK~~,~~KAAK,GAAG~~;~~IACbC~~,~~MAAM~~,~~EAAE~~,CAAC,~~CAAEf~~,~~OAAO~~,~~GAAG~~,SAAS,~~GAAG;EAClC~~,~~CAAC;EAED~~,~~OACCgB~~,~~aAAA~~,~~CAACzB,MAAM~~;~~IACNS~~,~~OAAO,EAAGA,OAAS~~;~~IACnBc~~,KAAK,EAAGA,KAAO;~~IACfG~~,SAAS,EAAC;EAA+B,~~GAEzCD~~,aAAA,~~CAACxB~~,IAAI;~~IAAC0B~~,OAAO,EAAC,eAAe;IAACC,IAAI,EAAG;EAAO,~~GAC3CH~~,aAAA,~~CAACrB~~,QAAQ;~~IACRyB~~,~~gBAAgB,EAAGrB,~~IAAI,~~CAACsB,OAAS~~;~~IACjCb~~,~~QAAQ~~,~~EAAGD,eAAiB;IAC5Be,IAAI,EAAGvB,IAAI,CAACwB,IAAM;IAClBT,KAAK,EAAGF;EAAW,CACnB,~~CAAC,~~EACFI~~,aAAA,~~CAACxB~~,IAAI;~~IAAC0B~~,OAAO,EAAC;EAAU,~~GACvBF~~,aAAA,~~CAACvB~~,QAAQ,~~QACRuB~~,aAAA,~~CAAC1B~~,IAAI;~~IAAC2B~~,SAAS,EAAC;EAAsC,~~GACnDhB~~,YAAY,~~IACbb~~,OAAO,EACN;EACAD,EAAE,CACD,YAAY,EACZ,aAAa,~~EACb0B~~,aACD,CAAC,EACDA,aACD,CACI,CACG,CAAC,~~EACXG~~,aAAA,~~CAACvB~~,QAAQ,~~QACRuB~~,aAAA,~~CAACtB~~,IAAI;~~IAAC8B~~,IAAI,~~EAAG3B~~;EAAc,CAAE,CACpB,CACL,CACD,CACC,CAAC;AAEX;AAEA,eAAeC,QAAQ"}
1	+ {"version":3,"names":["_n","sprintf","__experimentalUseNavigator","useNavigator","__experimentalText","Text","Button","Flex","FlexItem","Icon","FontDemo","chevronRight","FontCard","font","onClick","variantsText","navigatorPath","variantsCount","fontFace","length","style","cursor","navigator","createElement","goTo","className","justify","wrap","icon"],"sources":["@wordpress/edit-site/src/components/global-styles/font-library-modal/font-card.js"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { _n, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalText as Text,\n\tButton,\n\tFlex,\n\tFlexItem,\n\tIcon,\n} from '@wordpress/components';\n\n/\n Internal dependencies\n /\nimport FontDemo from './font-demo';\nimport { chevronRight } from '@wordpress/icons';\n\nfunction FontCard( { font, onClick, variantsText, navigatorPath } ) {\n\tconst variantsCount = font.fontFace?.length \|\| 1;\n\n\tconst style = {\n\t\tcursor: !! onClick ? 'pointer' : 'default',\n\t};\n\n\tconst navigator = useNavigator();\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={ () => {\n\t\t\t\tonClick();\n\t\t\t\tif ( navigatorPath ) {\n\t\t\t\t\tnavigator.goTo( navigatorPath );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tstyle={ style }\n\t\t\tclassName=\"font-library-modal__font-card\"\n\t\t>\n\t\t\t<Flex justify=\"space-between\" wrap={ false }>\n\t\t\t\t<FontDemo font={ font } />\n\t\t\t\t<Flex justify=\"flex-end\">\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Text className=\"font-library-modal__font-card__count\">\n\t\t\t\t\t\t\t{ variantsText \|\|\n\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t/ translators: %d: Number of font variants. */\n\t\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t\t'%d variant',\n\t\t\t\t\t\t\t\t\t\t'%d variants',\n\t\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tvariantsCount\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Icon icon={ chevronRight } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</Flex>\n\t\t</Button>\n\t);\n}\n\nexport default FontCard;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SACCC,0BAA0B,IAAIC,YAAY,EAC1CC,kBAAkB,IAAIC,IAAI,EAC1BC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,IAAI,QACE,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,aAAa;AAClC,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SAASC,QAAQA,CAAE;EAAEC,IAAI;EAAEC,OAAO;EAAEC,YAAY;EAAEC;AAAc,CAAC,EAAG;EACnE,MAAMC,aAAa,GAAGJ,IAAI,CAACK,QAAQ,EAAEC,MAAM,IAAI,CAAC;EAEhD,MAAMC,KAAK,GAAG;IACbC,MAAM,EAAE,CAAC,CAAEP,OAAO,GAAG,SAAS,GAAG;EAClC,CAAC;EAED,MAAMQ,SAAS,GAAGnB,YAAY,CAAC,CAAC;EAEhC,OACCoB,aAAA,CAACjB,MAAM;IACNQ,OAAO,EAAGA,CAAA,KAAM;MACfA,OAAO,CAAC,CAAC;MACT,IAAKE,aAAa,EAAG;QACpBM,SAAS,CAACE,IAAI,CAAER,aAAc,CAAC;MAChC;IACD,CAAG;IACHI,KAAK,EAAGA,KAAO;IACfK,SAAS,EAAC;EAA+B,GAEzCF,aAAA,CAAChB,IAAI;IAACmB,OAAO,EAAC,eAAe;IAACC,IAAI,EAAG;EAAO,GAC3CJ,aAAA,CAACb,QAAQ;IAACG,IAAI,EAAGA;EAAM,CAAE,CAAC,EAC1BU,aAAA,CAAChB,IAAI;IAACmB,OAAO,EAAC;EAAU,GACvBH,aAAA,CAACf,QAAQ,QACRe,aAAA,CAAClB,IAAI;IAACoB,SAAS,EAAC;EAAsC,GACnDV,YAAY,IACbd,OAAO,EACN;EACAD,EAAE,CACD,YAAY,EACZ,aAAa,EACbiB,aACD,CAAC,EACDA,aACD,CACI,CACG,CAAC,EACXM,aAAA,CAACf,QAAQ,QACRe,aAAA,CAACd,IAAI;IAACmB,IAAI,EAAGjB;EAAc,CAAE,CACpB,CACL,CACD,CACC,CAAC;AAEX;AAEA,eAAeC,QAAQ"}

package/build-module/components/global-styles/font-library-modal/font-collection.js CHANGED Viewed

@@ -3,34 +3,36 @@ import { createElement, Fragment } from "react";
  * WordPress dependencies
  */
 import { useContext, useEffect, useState, useMemo, createInterpolateElement } from '@wordpress/element';
-import { __experimentalSpacer as Spacer, __experimentalInputControl as InputControl, __experimentalText as Text, __experimentalHStack as HStack, SelectControl, Spinner, Icon, FlexItem, Flex, Button } from '@wordpress/components';
+import { __experimentalSpacer as Spacer, __experimentalInputControl as InputControl, __experimentalText as Text, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorToParentButton as NavigatorToParentButton, __experimentalHeading as Heading, Notice, SelectControl, Spinner, Icon, FlexItem, Flex, Button, DropdownMenu } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { search, closeSmall } from '@wordpress/icons';
+import { search, closeSmall, moreVertical, chevronLeft } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import filterFonts from './utils/filter-fonts';
-import CollectionFontDetails from './collection-font-details';
 import { toggleFont } from './utils/toggleFont';
-import { getFontsOutline } from './utils/fonts-outline';
+import { getFontsOutline, isFontFontFaceInOutline } from './utils/fonts-outline';
 import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
+import { sortFontFaces } from './utils/sort-font-faces';
+import CollectionFontVariant from './collection-font-variant';
 const DEFAULT_CATEGORY = {
   slug: 'all',
   name: _x('All', 'font categories')
 };
+const LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';
+const MIN_WINDOW_HEIGHT = 500;
 function FontCollection({
   slug
 }) {
   var _selectedCollection$c;
   const requiresPermission = slug === 'google-fonts';
   const getGoogleFontsPermissionFromStorage = () => {
-    return window.localStorage.getItem('wp-font-library-google-fonts-permission') === 'true';
+    return window.localStorage.getItem(LOCAL_STORAGE_ITEM) === 'true';
   };
   const [selectedFont, setSelectedFont] = useState(null);
   const [fontsToInstall, setFontsToInstall] = useState([]);
@@ -41,6 +43,7 @@ function FontCollection({
     collections,
     getFontCollection,
     installFont,
+    isInstalling,
     notice,
     setNotice
   } = useContext(FontLibraryContext);
@@ -53,6 +56,10 @@ function FontCollection({
     window.addEventListener('storage', handleStorage);
     return () => window.removeEventListener('storage', handleStorage);
   }, [slug, requiresPermission]);
+  const revokeAccess = () => {
+    window.localStorage.setItem(LOCAL_STORAGE_ITEM, 'false');
+    window.dispatchEvent(new Event('storage'));
+  };
   useEffect(() => {
     const fetchFontCollection = async () => {
       try {
@@ -87,7 +94,8 @@ function FontCollection({
   // NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
   // The height of each font family item is 61px.
-  const pageSize = Math.floor((window.innerHeight - 417) / 61);
+  const windowHeight = Math.max(window.innerHeight, MIN_WINDOW_HEIGHT);
+  const pageSize = Math.floor((windowHeight - 417) / 61);
   const totalPages = Math.ceil(fonts.length / pageSize);
   const itemsStart = (page - 1) * pageSize;
   const itemsLimit = page * pageSize;
@@ -118,9 +126,6 @@ function FontCollection({
     });
     setPage(1);
   };
-  const handleUnselectFont = () => {
-    setSelectedFont(null);
-  };
   const handleToggleVariant = (font, face) => {
     const newFontsToInstall = toggleFont(font, face, fontsToInstall);
     setFontsToInstall(newFontsToInstall);
@@ -163,28 +168,53 @@ function FontCollection({
     }
     resetFontsToInstall();
   };
-  let footerComponent = null;
-  if (selectedFont) {
-    footerComponent = createElement(InstallFooter, {
-      handleInstall: handleInstall,
-      isDisabled: fontsToInstall.length === 0
-    });
-  } else if (!renderConfirmDialog && totalPages > 1) {
-    footerComponent = createElement(PaginationFooter, {
-      page: page,
-      totalPages: totalPages,
-      setPage: setPage
-    });
+  const getSortedFontFaces = fontFamily => {
+    if (!fontFamily) {
+      return [];
+    }
+    if (!fontFamily.fontFace || !fontFamily.fontFace.length) {
+      return [{
+        fontFamily: fontFamily.fontFamily,
+        fontStyle: 'normal',
+        fontWeight: '400'
+      }];
+    }
+    return sortFontFaces(fontFamily.fontFace);
+  };
+  if (renderConfirmDialog) {
+    return createElement(GoogleFontsConfirmDialog, null);
   }
-  return createElement(TabPanelLayout, {
-    title: !selectedFont ? selectedCollection.name : selectedFont.name,
-    description: !selectedFont ? selectedCollection.description : __('Select font variants to install.'),
-    notice: notice,
-    handleBack: !!selectedFont && handleUnselectFont,
-    footer: footerComponent
-  }, renderConfirmDialog && createElement(Fragment, null, createElement(Spacer, {
-    margin: 8
-  }), createElement(GoogleFontsConfirmDialog, null)), !renderConfirmDialog && !selectedFont && createElement(Flex, null, createElement(FlexItem, null, createElement(InputControl, {
+  const ActionsComponent = () => {
+    if (slug !== 'google-fonts' || renderConfirmDialog || selectedFont) {
+      return null;
+    }
+    return createElement(DropdownMenu, {
+      icon: moreVertical,
+      label: __('Actions'),
+      popoverProps: {
+        position: 'bottom left'
+      },
+      controls: [{
+        title: __('Revoke access to Google Fonts'),
+        onClick: revokeAccess
+      }]
+    });
+  };
+  return createElement("div", {
+    className: "font-library-modal__tabpanel-layout"
+  }, createElement(NavigatorProvider, {
+    initialPath: "/",
+    className: "font-library-modal__tabpanel-layout"
+  }, createElement(NavigatorScreen, {
+    path: "/"
+  }, createElement(HStack, {
+    justify: "space-between"
+  }, createElement(Heading, {
+    level: 2,
+    size: 13
+  }, selectedCollection.name), createElement(ActionsComponent, null)), createElement(Text, null, selectedCollection.description), createElement(Spacer, {
+    margin: 4
+  }), createElement(Flex, null, createElement(FlexItem, null, createElement(InputControl, {
     value: filters.search,
     placeholder: __('Font name…'),
     label: __('Search'),
@@ -205,27 +235,67 @@ function FontCollection({
     key: category.slug
   }, category.name))))), createElement(Spacer, {
     margin: 4
-  }), !renderConfirmDialog && !selectedCollection?.font_families && !notice && createElement(Spinner, null), !renderConfirmDialog && !!selectedCollection?.font_families?.length && !fonts.length && createElement(Text, null, __('No fonts found. Try with a different search term')), !renderConfirmDialog && selectedFont && createElement(CollectionFontDetails, {
-    font: selectedFont,
-    handleToggleVariant: handleToggleVariant,
-    fontToInstallOutline: fontToInstallOutline
-  }), !renderConfirmDialog && !selectedFont && createElement("div", {
+  }), !selectedCollection?.font_families && !notice && createElement(Spinner, null), !!selectedCollection?.font_families?.length && !fonts.length && createElement(Text, null, __('No fonts found. Try with a different search term')), createElement("div", {
     className: "font-library-modal__fonts-grid__main"
   }, items.map(font => createElement(FontCard, {
     key: font.font_family_settings.slug,
     font: font.font_family_settings,
+    navigatorPath: '/fontFamily',
     onClick: () => {
       setSelectedFont(font.font_family_settings);
     }
-  }))));
-}
-function PaginationFooter({
-  page,
-  totalPages,
-  setPage
-}) {
-  return createElement(Flex, {
-    justify: "center"
+  })))), createElement(NavigatorScreen, {
+    path: "/fontFamily"
+  }, createElement(Flex, {
+    justify: "flex-start"
+  }, createElement(NavigatorToParentButton, {
+    icon: chevronLeft,
+    isSmall: true,
+    onClick: () => {
+      setSelectedFont(null);
+    },
+    "aria-label": __('Navigate to the previous view')
+  }), createElement(Heading, {
+    level: 2,
+    size: 13,
+    className: "edit-site-global-styles-header"
+  }, selectedFont?.name)), notice && createElement(Fragment, null, createElement(Spacer, {
+    margin: 1
+  }), createElement(Notice, {
+    status: notice.type,
+    onRemove: () => setNotice(null)
+  }, notice.message), createElement(Spacer, {
+    margin: 1
+  })), createElement(Spacer, {
+    margin: 4
+  }), createElement(Text, null, " ", __('Select font variants to install.'), " "), createElement(Spacer, {
+    margin: 4
+  }), createElement(VStack, {
+    spacing: 0
+  }, createElement(Spacer, {
+    margin: 8
+  }), getSortedFontFaces(selectedFont).map((face, i) => createElement(CollectionFontVariant, {
+    font: selectedFont,
+    face: face,
+    key: `face${i}`,
+    handleToggleVariant: handleToggleVariant,
+    selected: isFontFontFaceInOutline(selectedFont.slug, selectedFont.fontFace ? face : null,
+    // If the font has no fontFace, we want to check if the font is in the outline
+    fontToInstallOutline)
+  }))), createElement(Spacer, {
+    margin: 16
+  }))), selectedFont && createElement(Flex, {
+    justify: "flex-end",
+    className: "font-library-modal__tabpanel-layout__footer"
+  }, createElement(Button, {
+    variant: "primary",
+    onClick: handleInstall,
+    isBusy: isInstalling,
+    disabled: fontsToInstall.length === 0 || isInstalling,
+    __experimentalIsFocusable: true
+  }, __('Install'))), !selectedFont && createElement(Flex, {
+    justify: "center",
+    className: "font-library-modal__tabpanel-layout__footer"
   }, createElement(Button, {
     label: __('First page'),
     size: "compact",
@@ -270,24 +340,7 @@ function PaginationFooter({
     onClick: () => setPage(totalPages),
     disabled: page === totalPages,
     __experimentalIsFocusable: true
-  }, createElement("span", null, "\xBB")));
-}
-function InstallFooter({
-  handleInstall,
-  isDisabled
-}) {
-  const {
-    isInstalling
-  } = useContext(FontLibraryContext);
-  return createElement(Flex, {
-    justify: "flex-end"
-  }, createElement(Button, {
-    variant: "primary",
-    onClick: handleInstall,
-    isBusy: isInstalling,
-    disabled: isDisabled || isInstalling,
-    __experimentalIsFocusable: true
-  }, __('Install')));
+  }, createElement("span", null, "\xBB"))));
 }
 export default FontCollection;
 //# sourceMappingURL=font-collection.js.map