@wordpress/edit-site 6.8.4 → 6.8.6
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.
- package/build/components/editor/index.js +1 -1
- package/build/components/editor/index.js.map +1 -1
- package/build/components/global-styles/font-families.js +2 -16
- package/build/components/global-styles/font-families.js.map +1 -1
- package/build/components/global-styles/screen-typography.js +5 -3
- package/build/components/global-styles/screen-typography.js.map +1 -1
- package/build/components/global-styles/ui.js +0 -4
- package/build/components/global-styles/ui.js.map +1 -1
- package/build/components/sidebar-dataviews/dataview-item.js +1 -3
- package/build/components/sidebar-dataviews/dataview-item.js.map +1 -1
- package/build/components/sidebar-dataviews/default-views.js +0 -42
- package/build/components/sidebar-dataviews/default-views.js.map +1 -1
- package/build/components/sidebar-dataviews/index.js +1 -4
- package/build/components/sidebar-dataviews/index.js.map +1 -1
- package/build-module/components/editor/index.js +2 -2
- package/build-module/components/editor/index.js.map +1 -1
- package/build-module/components/global-styles/font-families.js +4 -18
- package/build-module/components/global-styles/font-families.js.map +1 -1
- package/build-module/components/global-styles/screen-typography.js +5 -3
- package/build-module/components/global-styles/screen-typography.js.map +1 -1
- package/build-module/components/global-styles/ui.js +0 -4
- package/build-module/components/global-styles/ui.js.map +1 -1
- package/build-module/components/sidebar-dataviews/dataview-item.js +1 -3
- package/build-module/components/sidebar-dataviews/dataview-item.js.map +1 -1
- package/build-module/components/sidebar-dataviews/default-views.js +1 -42
- package/build-module/components/sidebar-dataviews/default-views.js.map +1 -1
- package/build-module/components/sidebar-dataviews/index.js +2 -5
- package/build-module/components/sidebar-dataviews/index.js.map +1 -1
- package/build-style/posts-rtl.css +4 -15
- package/build-style/posts.css +4 -15
- package/build-style/style-rtl.css +7 -18
- package/build-style/style.css +7 -18
- package/package.json +30 -30
- package/src/components/editor/index.js +2 -2
- package/src/components/editor/style.scss +4 -0
- package/src/components/global-styles/font-families.js +5 -28
- package/src/components/global-styles/screen-typography.js +3 -3
- package/src/components/global-styles/ui.js +0 -5
- package/src/components/sidebar-dataviews/dataview-item.js +0 -2
- package/src/components/sidebar-dataviews/default-views.js +1 -45
- package/src/components/sidebar-dataviews/index.js +2 -7
- package/src/components/sidebar-dataviews/style.scss +0 -4
- package/build/components/global-styles/screen-typeset.js +0 -40
- package/build/components/global-styles/screen-typeset.js.map +0 -1
- package/build/components/global-styles/typeset-button.js +0 -98
- package/build/components/global-styles/typeset-button.js.map +0 -1
- package/build-module/components/global-styles/screen-typeset.js +0 -34
- package/build-module/components/global-styles/screen-typeset.js.map +0 -1
- package/build-module/components/global-styles/typeset-button.js +0 -90
- package/build-module/components/global-styles/typeset-button.js.map +0 -1
- package/src/components/global-styles/screen-typeset.js +0 -42
- package/src/components/global-styles/typeset-button.js +0 -100
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _i18n = require("@wordpress/i18n");
|
|
9
|
-
var _components = require("@wordpress/components");
|
|
10
|
-
var _coreData = require("@wordpress/core-data");
|
|
11
|
-
var _data = require("@wordpress/data");
|
|
12
|
-
var _blockEditor = require("@wordpress/block-editor");
|
|
13
|
-
var _editor = require("@wordpress/editor");
|
|
14
|
-
var _element = require("@wordpress/element");
|
|
15
|
-
var _icons = require("@wordpress/icons");
|
|
16
|
-
var _context = _interopRequireDefault(require("./font-library-modal/context"));
|
|
17
|
-
var _utils = require("./utils");
|
|
18
|
-
var _navigationButton = require("./navigation-button");
|
|
19
|
-
var _subtitle = _interopRequireDefault(require("./subtitle"));
|
|
20
|
-
var _lockUnlock = require("../../lock-unlock");
|
|
21
|
-
var _useThemeStyleVariationsByProperty = require("../../hooks/use-theme-style-variations/use-theme-style-variations-by-property");
|
|
22
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
-
/**
|
|
24
|
-
* WordPress dependencies
|
|
25
|
-
*/
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Internal dependencies
|
|
29
|
-
*/
|
|
30
|
-
|
|
31
|
-
const {
|
|
32
|
-
GlobalStylesContext
|
|
33
|
-
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
|
|
34
|
-
const {
|
|
35
|
-
mergeBaseAndUserConfigs
|
|
36
|
-
} = (0, _lockUnlock.unlock)(_editor.privateApis);
|
|
37
|
-
function TypesetButton() {
|
|
38
|
-
const propertiesToFilter = ['typography'];
|
|
39
|
-
const typographyVariations = (0, _useThemeStyleVariationsByProperty.useCurrentMergeThemeStyleVariationsWithUserConfig)(propertiesToFilter);
|
|
40
|
-
const hasTypographyVariations = typographyVariations?.length > 1;
|
|
41
|
-
const {
|
|
42
|
-
base,
|
|
43
|
-
user: userConfig
|
|
44
|
-
} = (0, _element.useContext)(GlobalStylesContext);
|
|
45
|
-
const config = mergeBaseAndUserConfigs(base, userConfig);
|
|
46
|
-
const allFontFamilies = (0, _utils.getFontFamilies)(config);
|
|
47
|
-
const hasFonts = allFontFamilies.filter(font => font !== null).length > 0;
|
|
48
|
-
const variations = (0, _data.useSelect)(select => {
|
|
49
|
-
return select(_coreData.store).__experimentalGetCurrentThemeGlobalStylesVariations();
|
|
50
|
-
}, []);
|
|
51
|
-
const userTypographyConfig = (0, _useThemeStyleVariationsByProperty.filterObjectByProperties)(userConfig, 'typography');
|
|
52
|
-
const title = (0, _element.useMemo)(() => {
|
|
53
|
-
if (Object.keys(userTypographyConfig).length === 0) {
|
|
54
|
-
return (0, _i18n.__)('Default');
|
|
55
|
-
}
|
|
56
|
-
const activeVariation = variations?.find(variation => {
|
|
57
|
-
return JSON.stringify((0, _useThemeStyleVariationsByProperty.filterObjectByProperties)(variation, 'typography')) === JSON.stringify(userTypographyConfig);
|
|
58
|
-
});
|
|
59
|
-
if (activeVariation) {
|
|
60
|
-
return activeVariation.title;
|
|
61
|
-
}
|
|
62
|
-
return allFontFamilies.map(font => font?.name).join(', ');
|
|
63
|
-
}, [allFontFamilies, userTypographyConfig, variations]);
|
|
64
|
-
return hasTypographyVariations && hasFonts && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
|
|
65
|
-
spacing: 2,
|
|
66
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
|
|
67
|
-
justify: "space-between",
|
|
68
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
|
|
69
|
-
level: 3,
|
|
70
|
-
children: (0, _i18n.__)('Typeset')
|
|
71
|
-
})
|
|
72
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
|
|
73
|
-
isBordered: true,
|
|
74
|
-
isSeparated: true,
|
|
75
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
|
|
76
|
-
path: "/typography/typeset",
|
|
77
|
-
"aria-label": (0, _i18n.__)('Typeset'),
|
|
78
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
|
|
79
|
-
direction: "row",
|
|
80
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
|
|
81
|
-
children: title
|
|
82
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
|
|
83
|
-
icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
|
|
84
|
-
})]
|
|
85
|
-
})
|
|
86
|
-
})
|
|
87
|
-
})]
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
var _default = ({
|
|
91
|
-
...props
|
|
92
|
-
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.default, {
|
|
93
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TypesetButton, {
|
|
94
|
-
...props
|
|
95
|
-
})
|
|
96
|
-
});
|
|
97
|
-
exports.default = _default;
|
|
98
|
-
//# sourceMappingURL=typeset-button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_i18n","require","_components","_coreData","_data","_blockEditor","_editor","_element","_icons","_context","_interopRequireDefault","_utils","_navigationButton","_subtitle","_lockUnlock","_useThemeStyleVariationsByProperty","_jsxRuntime","GlobalStylesContext","unlock","blockEditorPrivateApis","mergeBaseAndUserConfigs","editorPrivateApis","TypesetButton","propertiesToFilter","typographyVariations","useCurrentMergeThemeStyleVariationsWithUserConfig","hasTypographyVariations","length","base","user","userConfig","useContext","config","allFontFamilies","getFontFamilies","hasFonts","filter","font","variations","useSelect","select","coreStore","__experimentalGetCurrentThemeGlobalStylesVariations","userTypographyConfig","filterObjectByProperties","title","useMemo","Object","keys","__","activeVariation","find","variation","JSON","stringify","map","name","join","jsxs","__experimentalVStack","spacing","children","jsx","__experimentalHStack","justify","default","level","__experimentalItemGroup","isBordered","isSeparated","NavigationButtonAsItem","path","direction","FlexItem","Icon","icon","isRTL","chevronLeft","chevronRight","_default","props","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/typeset-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { isRTL, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\nimport { useMemo, useContext } from '@wordpress/element';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport FontLibraryProvider from './font-library-modal/context';\nimport { getFontFamilies } from './utils';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\nimport { unlock } from '../../lock-unlock';\nimport {\n\tfilterObjectByProperties,\n\tuseCurrentMergeThemeStyleVariationsWithUserConfig,\n} from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\nconst { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );\n\nfunction TypesetButton() {\n\tconst propertiesToFilter = [ 'typography' ];\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );\n\tconst hasTypographyVariations = typographyVariations?.length > 1;\n\tconst { base, user: userConfig } = useContext( GlobalStylesContext );\n\tconst config = mergeBaseAndUserConfigs( base, userConfig );\n\tconst allFontFamilies = getFontFamilies( config );\n\tconst hasFonts =\n\t\tallFontFamilies.filter( ( font ) => font !== null ).length > 0;\n\tconst variations = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\n\t}, [] );\n\tconst userTypographyConfig = filterObjectByProperties(\n\t\tuserConfig,\n\t\t'typography'\n\t);\n\n\tconst title = useMemo( () => {\n\t\tif ( Object.keys( userTypographyConfig ).length === 0 ) {\n\t\t\treturn __( 'Default' );\n\t\t}\n\t\tconst activeVariation = variations?.find( ( variation ) => {\n\t\t\treturn (\n\t\t\t\tJSON.stringify(\n\t\t\t\t\tfilterObjectByProperties( variation, 'typography' )\n\t\t\t\t) === JSON.stringify( userTypographyConfig )\n\t\t\t);\n\t\t} );\n\t\tif ( activeVariation ) {\n\t\t\treturn activeVariation.title;\n\t\t}\n\t\treturn allFontFamilies.map( ( font ) => font?.name ).join( ', ' );\n\t}, [ allFontFamilies, userTypographyConfig, variations ] );\n\n\treturn (\n\t\thasTypographyVariations &&\n\t\thasFonts && (\n\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>\n\t\t\t\t</HStack>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tpath=\"/typography/typeset\"\n\t\t\t\t\t\taria-label={ __( 'Typeset' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t\t<FlexItem>{ title }</FlexItem>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</VStack>\n\t\t)\n\t);\n}\n\nexport default ( { ...props } ) => (\n\t<FontLibraryProvider>\n\t\t<TypesetButton { ...props } />\n\t</FontLibraryProvider>\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { __ } from '@wordpress/i18n';
|
|
5
|
-
import { useSelect } from '@wordpress/data';
|
|
6
|
-
import { store as editorStore } from '@wordpress/editor';
|
|
7
|
-
import { __experimentalVStack as VStack } from '@wordpress/components';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Internal dependencies
|
|
11
|
-
*/
|
|
12
|
-
import TypographyVariations from './variations/variations-typography';
|
|
13
|
-
import ScreenHeader from './header';
|
|
14
|
-
import FontFamilies from './font-families';
|
|
15
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
18
|
-
function ScreenTypeset() {
|
|
19
|
-
const fontLibraryEnabled = useSelect(select => select(editorStore).getEditorSettings().fontLibraryEnabled, []);
|
|
20
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
21
|
-
children: [/*#__PURE__*/_jsx(ScreenHeader, {
|
|
22
|
-
title: __('Typesets'),
|
|
23
|
-
description: __('Fonts and typographic styling applied across the site.')
|
|
24
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
25
|
-
className: "edit-site-global-styles-screen",
|
|
26
|
-
children: /*#__PURE__*/_jsxs(VStack, {
|
|
27
|
-
spacing: 7,
|
|
28
|
-
children: [/*#__PURE__*/_jsx(TypographyVariations, {}), fontLibraryEnabled && /*#__PURE__*/_jsx(FontFamilies, {})]
|
|
29
|
-
})
|
|
30
|
-
})]
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
export default ScreenTypeset;
|
|
34
|
-
//# sourceMappingURL=screen-typeset.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["__","useSelect","store","editorStore","__experimentalVStack","VStack","TypographyVariations","ScreenHeader","FontFamilies","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ScreenTypeset","fontLibraryEnabled","select","getEditorSettings","children","title","description","className","spacing"],"sources":["@wordpress/edit-site/src/components/global-styles/screen-typeset.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TypographyVariations from './variations/variations-typography';\nimport ScreenHeader from './header';\nimport FontFamilies from './font-families';\n\nfunction ScreenTypeset() {\n\tconst fontLibraryEnabled = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).getEditorSettings().fontLibraryEnabled,\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Typesets' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Fonts and typographic styling applied across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"edit-site-global-styles-screen\">\n\t\t\t\t<VStack spacing={ 7 }>\n\t\t\t\t\t<TypographyVariations />\n\n\t\t\t\t\t{ fontLibraryEnabled && <FontFamilies /> }\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenTypeset;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,KAAK,IAAIC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;;AAEtE;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,oCAAoC;AACrE,OAAOC,YAAY,MAAM,UAAU;AACnC,OAAOC,YAAY,MAAM,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAE3C,SAASC,aAAaA,CAAA,EAAG;EACxB,MAAMC,kBAAkB,GAAGf,SAAS,CACjCgB,MAAM,IACPA,MAAM,CAAEd,WAAY,CAAC,CAACe,iBAAiB,CAAC,CAAC,CAACF,kBAAkB,EAC7D,EACD,CAAC;EAED,oBACCJ,KAAA,CAAAE,SAAA;IAAAK,QAAA,gBACCT,IAAA,CAACH,YAAY;MACZa,KAAK,EAAGpB,EAAE,CAAE,UAAW,CAAG;MAC1BqB,WAAW,EAAGrB,EAAE,CACf,wDACD;IAAG,CACH,CAAC,eACFU,IAAA;MAAKY,SAAS,EAAC,gCAAgC;MAAAH,QAAA,eAC9CP,KAAA,CAACP,MAAM;QAACkB,OAAO,EAAG,CAAG;QAAAJ,QAAA,gBACpBT,IAAA,CAACJ,oBAAoB,IAAE,CAAC,EAEtBU,kBAAkB,iBAAIN,IAAA,CAACF,YAAY,IAAE,CAAC;MAAA,CACjC;IAAC,CACL,CAAC;EAAA,CACL,CAAC;AAEL;AAEA,eAAeO,aAAa","ignoreList":[]}
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { isRTL, __ } from '@wordpress/i18n';
|
|
5
|
-
import { __experimentalItemGroup as ItemGroup, __experimentalVStack as VStack, __experimentalHStack as HStack, FlexItem } from '@wordpress/components';
|
|
6
|
-
import { store as coreStore } from '@wordpress/core-data';
|
|
7
|
-
import { useSelect } from '@wordpress/data';
|
|
8
|
-
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
9
|
-
import { privateApis as editorPrivateApis } from '@wordpress/editor';
|
|
10
|
-
import { useMemo, useContext } from '@wordpress/element';
|
|
11
|
-
import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Internal dependencies
|
|
15
|
-
*/
|
|
16
|
-
import FontLibraryProvider from './font-library-modal/context';
|
|
17
|
-
import { getFontFamilies } from './utils';
|
|
18
|
-
import { NavigationButtonAsItem } from './navigation-button';
|
|
19
|
-
import Subtitle from './subtitle';
|
|
20
|
-
import { unlock } from '../../lock-unlock';
|
|
21
|
-
import { filterObjectByProperties, useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
|
|
22
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
-
const {
|
|
25
|
-
GlobalStylesContext
|
|
26
|
-
} = unlock(blockEditorPrivateApis);
|
|
27
|
-
const {
|
|
28
|
-
mergeBaseAndUserConfigs
|
|
29
|
-
} = unlock(editorPrivateApis);
|
|
30
|
-
function TypesetButton() {
|
|
31
|
-
const propertiesToFilter = ['typography'];
|
|
32
|
-
const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig(propertiesToFilter);
|
|
33
|
-
const hasTypographyVariations = typographyVariations?.length > 1;
|
|
34
|
-
const {
|
|
35
|
-
base,
|
|
36
|
-
user: userConfig
|
|
37
|
-
} = useContext(GlobalStylesContext);
|
|
38
|
-
const config = mergeBaseAndUserConfigs(base, userConfig);
|
|
39
|
-
const allFontFamilies = getFontFamilies(config);
|
|
40
|
-
const hasFonts = allFontFamilies.filter(font => font !== null).length > 0;
|
|
41
|
-
const variations = useSelect(select => {
|
|
42
|
-
return select(coreStore).__experimentalGetCurrentThemeGlobalStylesVariations();
|
|
43
|
-
}, []);
|
|
44
|
-
const userTypographyConfig = filterObjectByProperties(userConfig, 'typography');
|
|
45
|
-
const title = useMemo(() => {
|
|
46
|
-
if (Object.keys(userTypographyConfig).length === 0) {
|
|
47
|
-
return __('Default');
|
|
48
|
-
}
|
|
49
|
-
const activeVariation = variations?.find(variation => {
|
|
50
|
-
return JSON.stringify(filterObjectByProperties(variation, 'typography')) === JSON.stringify(userTypographyConfig);
|
|
51
|
-
});
|
|
52
|
-
if (activeVariation) {
|
|
53
|
-
return activeVariation.title;
|
|
54
|
-
}
|
|
55
|
-
return allFontFamilies.map(font => font?.name).join(', ');
|
|
56
|
-
}, [allFontFamilies, userTypographyConfig, variations]);
|
|
57
|
-
return hasTypographyVariations && hasFonts && /*#__PURE__*/_jsxs(VStack, {
|
|
58
|
-
spacing: 2,
|
|
59
|
-
children: [/*#__PURE__*/_jsx(HStack, {
|
|
60
|
-
justify: "space-between",
|
|
61
|
-
children: /*#__PURE__*/_jsx(Subtitle, {
|
|
62
|
-
level: 3,
|
|
63
|
-
children: __('Typeset')
|
|
64
|
-
})
|
|
65
|
-
}), /*#__PURE__*/_jsx(ItemGroup, {
|
|
66
|
-
isBordered: true,
|
|
67
|
-
isSeparated: true,
|
|
68
|
-
children: /*#__PURE__*/_jsx(NavigationButtonAsItem, {
|
|
69
|
-
path: "/typography/typeset",
|
|
70
|
-
"aria-label": __('Typeset'),
|
|
71
|
-
children: /*#__PURE__*/_jsxs(HStack, {
|
|
72
|
-
direction: "row",
|
|
73
|
-
children: [/*#__PURE__*/_jsx(FlexItem, {
|
|
74
|
-
children: title
|
|
75
|
-
}), /*#__PURE__*/_jsx(Icon, {
|
|
76
|
-
icon: isRTL() ? chevronLeft : chevronRight
|
|
77
|
-
})]
|
|
78
|
-
})
|
|
79
|
-
})
|
|
80
|
-
})]
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
export default (({
|
|
84
|
-
...props
|
|
85
|
-
}) => /*#__PURE__*/_jsx(FontLibraryProvider, {
|
|
86
|
-
children: /*#__PURE__*/_jsx(TypesetButton, {
|
|
87
|
-
...props
|
|
88
|
-
})
|
|
89
|
-
}));
|
|
90
|
-
//# sourceMappingURL=typeset-button.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["isRTL","__","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","FlexItem","store","coreStore","useSelect","privateApis","blockEditorPrivateApis","editorPrivateApis","useMemo","useContext","Icon","chevronLeft","chevronRight","FontLibraryProvider","getFontFamilies","NavigationButtonAsItem","Subtitle","unlock","filterObjectByProperties","useCurrentMergeThemeStyleVariationsWithUserConfig","jsx","_jsx","jsxs","_jsxs","GlobalStylesContext","mergeBaseAndUserConfigs","TypesetButton","propertiesToFilter","typographyVariations","hasTypographyVariations","length","base","user","userConfig","config","allFontFamilies","hasFonts","filter","font","variations","select","__experimentalGetCurrentThemeGlobalStylesVariations","userTypographyConfig","title","Object","keys","activeVariation","find","variation","JSON","stringify","map","name","join","spacing","children","justify","level","isBordered","isSeparated","path","direction","icon","props"],"sources":["@wordpress/edit-site/src/components/global-styles/typeset-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { isRTL, __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\nimport { useMemo, useContext } from '@wordpress/element';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport FontLibraryProvider from './font-library-modal/context';\nimport { getFontFamilies } from './utils';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport Subtitle from './subtitle';\nimport { unlock } from '../../lock-unlock';\nimport {\n\tfilterObjectByProperties,\n\tuseCurrentMergeThemeStyleVariationsWithUserConfig,\n} from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\n\nconst { GlobalStylesContext } = unlock( blockEditorPrivateApis );\nconst { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );\n\nfunction TypesetButton() {\n\tconst propertiesToFilter = [ 'typography' ];\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );\n\tconst hasTypographyVariations = typographyVariations?.length > 1;\n\tconst { base, user: userConfig } = useContext( GlobalStylesContext );\n\tconst config = mergeBaseAndUserConfigs( base, userConfig );\n\tconst allFontFamilies = getFontFamilies( config );\n\tconst hasFonts =\n\t\tallFontFamilies.filter( ( font ) => font !== null ).length > 0;\n\tconst variations = useSelect( ( select ) => {\n\t\treturn select(\n\t\t\tcoreStore\n\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\n\t}, [] );\n\tconst userTypographyConfig = filterObjectByProperties(\n\t\tuserConfig,\n\t\t'typography'\n\t);\n\n\tconst title = useMemo( () => {\n\t\tif ( Object.keys( userTypographyConfig ).length === 0 ) {\n\t\t\treturn __( 'Default' );\n\t\t}\n\t\tconst activeVariation = variations?.find( ( variation ) => {\n\t\t\treturn (\n\t\t\t\tJSON.stringify(\n\t\t\t\t\tfilterObjectByProperties( variation, 'typography' )\n\t\t\t\t) === JSON.stringify( userTypographyConfig )\n\t\t\t);\n\t\t} );\n\t\tif ( activeVariation ) {\n\t\t\treturn activeVariation.title;\n\t\t}\n\t\treturn allFontFamilies.map( ( font ) => font?.name ).join( ', ' );\n\t}, [ allFontFamilies, userTypographyConfig, variations ] );\n\n\treturn (\n\t\thasTypographyVariations &&\n\t\thasFonts && (\n\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>\n\t\t\t\t</HStack>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tpath=\"/typography/typeset\"\n\t\t\t\t\t\taria-label={ __( 'Typeset' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t\t<FlexItem>{ title }</FlexItem>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t</ItemGroup>\n\t\t\t</VStack>\n\t\t)\n\t);\n}\n\nexport default ( { ...props } ) => (\n\t<FontLibraryProvider>\n\t\t<TypesetButton { ...props } />\n\t</FontLibraryProvider>\n);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { __ } from '@wordpress/i18n';
|
|
5
|
-
import { useSelect } from '@wordpress/data';
|
|
6
|
-
import { store as editorStore } from '@wordpress/editor';
|
|
7
|
-
import { __experimentalVStack as VStack } from '@wordpress/components';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Internal dependencies
|
|
11
|
-
*/
|
|
12
|
-
import TypographyVariations from './variations/variations-typography';
|
|
13
|
-
import ScreenHeader from './header';
|
|
14
|
-
import FontFamilies from './font-families';
|
|
15
|
-
|
|
16
|
-
function ScreenTypeset() {
|
|
17
|
-
const fontLibraryEnabled = useSelect(
|
|
18
|
-
( select ) =>
|
|
19
|
-
select( editorStore ).getEditorSettings().fontLibraryEnabled,
|
|
20
|
-
[]
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<>
|
|
25
|
-
<ScreenHeader
|
|
26
|
-
title={ __( 'Typesets' ) }
|
|
27
|
-
description={ __(
|
|
28
|
-
'Fonts and typographic styling applied across the site.'
|
|
29
|
-
) }
|
|
30
|
-
/>
|
|
31
|
-
<div className="edit-site-global-styles-screen">
|
|
32
|
-
<VStack spacing={ 7 }>
|
|
33
|
-
<TypographyVariations />
|
|
34
|
-
|
|
35
|
-
{ fontLibraryEnabled && <FontFamilies /> }
|
|
36
|
-
</VStack>
|
|
37
|
-
</div>
|
|
38
|
-
</>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export default ScreenTypeset;
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* WordPress dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { isRTL, __ } from '@wordpress/i18n';
|
|
5
|
-
import {
|
|
6
|
-
__experimentalItemGroup as ItemGroup,
|
|
7
|
-
__experimentalVStack as VStack,
|
|
8
|
-
__experimentalHStack as HStack,
|
|
9
|
-
FlexItem,
|
|
10
|
-
} from '@wordpress/components';
|
|
11
|
-
import { store as coreStore } from '@wordpress/core-data';
|
|
12
|
-
import { useSelect } from '@wordpress/data';
|
|
13
|
-
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
14
|
-
import { privateApis as editorPrivateApis } from '@wordpress/editor';
|
|
15
|
-
import { useMemo, useContext } from '@wordpress/element';
|
|
16
|
-
import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Internal dependencies
|
|
20
|
-
*/
|
|
21
|
-
import FontLibraryProvider from './font-library-modal/context';
|
|
22
|
-
import { getFontFamilies } from './utils';
|
|
23
|
-
import { NavigationButtonAsItem } from './navigation-button';
|
|
24
|
-
import Subtitle from './subtitle';
|
|
25
|
-
import { unlock } from '../../lock-unlock';
|
|
26
|
-
import {
|
|
27
|
-
filterObjectByProperties,
|
|
28
|
-
useCurrentMergeThemeStyleVariationsWithUserConfig,
|
|
29
|
-
} from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
|
|
30
|
-
|
|
31
|
-
const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
|
|
32
|
-
const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
|
|
33
|
-
|
|
34
|
-
function TypesetButton() {
|
|
35
|
-
const propertiesToFilter = [ 'typography' ];
|
|
36
|
-
const typographyVariations =
|
|
37
|
-
useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
|
|
38
|
-
const hasTypographyVariations = typographyVariations?.length > 1;
|
|
39
|
-
const { base, user: userConfig } = useContext( GlobalStylesContext );
|
|
40
|
-
const config = mergeBaseAndUserConfigs( base, userConfig );
|
|
41
|
-
const allFontFamilies = getFontFamilies( config );
|
|
42
|
-
const hasFonts =
|
|
43
|
-
allFontFamilies.filter( ( font ) => font !== null ).length > 0;
|
|
44
|
-
const variations = useSelect( ( select ) => {
|
|
45
|
-
return select(
|
|
46
|
-
coreStore
|
|
47
|
-
).__experimentalGetCurrentThemeGlobalStylesVariations();
|
|
48
|
-
}, [] );
|
|
49
|
-
const userTypographyConfig = filterObjectByProperties(
|
|
50
|
-
userConfig,
|
|
51
|
-
'typography'
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
const title = useMemo( () => {
|
|
55
|
-
if ( Object.keys( userTypographyConfig ).length === 0 ) {
|
|
56
|
-
return __( 'Default' );
|
|
57
|
-
}
|
|
58
|
-
const activeVariation = variations?.find( ( variation ) => {
|
|
59
|
-
return (
|
|
60
|
-
JSON.stringify(
|
|
61
|
-
filterObjectByProperties( variation, 'typography' )
|
|
62
|
-
) === JSON.stringify( userTypographyConfig )
|
|
63
|
-
);
|
|
64
|
-
} );
|
|
65
|
-
if ( activeVariation ) {
|
|
66
|
-
return activeVariation.title;
|
|
67
|
-
}
|
|
68
|
-
return allFontFamilies.map( ( font ) => font?.name ).join( ', ' );
|
|
69
|
-
}, [ allFontFamilies, userTypographyConfig, variations ] );
|
|
70
|
-
|
|
71
|
-
return (
|
|
72
|
-
hasTypographyVariations &&
|
|
73
|
-
hasFonts && (
|
|
74
|
-
<VStack spacing={ 2 }>
|
|
75
|
-
<HStack justify="space-between">
|
|
76
|
-
<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>
|
|
77
|
-
</HStack>
|
|
78
|
-
<ItemGroup isBordered isSeparated>
|
|
79
|
-
<NavigationButtonAsItem
|
|
80
|
-
path="/typography/typeset"
|
|
81
|
-
aria-label={ __( 'Typeset' ) }
|
|
82
|
-
>
|
|
83
|
-
<HStack direction="row">
|
|
84
|
-
<FlexItem>{ title }</FlexItem>
|
|
85
|
-
<Icon
|
|
86
|
-
icon={ isRTL() ? chevronLeft : chevronRight }
|
|
87
|
-
/>
|
|
88
|
-
</HStack>
|
|
89
|
-
</NavigationButtonAsItem>
|
|
90
|
-
</ItemGroup>
|
|
91
|
-
</VStack>
|
|
92
|
-
)
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
export default ( { ...props } ) => (
|
|
97
|
-
<FontLibraryProvider>
|
|
98
|
-
<TypesetButton { ...props } />
|
|
99
|
-
</FontLibraryProvider>
|
|
100
|
-
);
|