@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.22.1
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/CHANGELOG.md +1 -1
- package/README.md +2 -2
- package/build/components/block-editing-mode/index.cjs +13 -7
- package/build/components/block-editing-mode/index.cjs.map +2 -2
- package/build/components/block-inspector/index.cjs +32 -16
- package/build/components/block-inspector/index.cjs.map +2 -2
- package/build/components/block-rename/modal.cjs +0 -1
- package/build/components/block-rename/modal.cjs.map +2 -2
- package/build/components/block-toolbar/block-toolbar-icon.cjs +14 -6
- package/build/components/block-toolbar/block-toolbar-icon.cjs.map +2 -2
- package/build/components/colors-gradients/control.cjs +25 -14
- package/build/components/colors-gradients/control.cjs.map +2 -2
- package/build/components/colors-gradients/dropdown.cjs +4 -1
- package/build/components/colors-gradients/dropdown.cjs.map +3 -3
- package/build/components/contrast-checker/index.cjs +22 -4
- package/build/components/contrast-checker/index.cjs.map +2 -2
- package/build/components/date-format-picker/index.cjs +0 -1
- package/build/components/date-format-picker/index.cjs.map +2 -2
- package/build/components/global-styles/background-panel.cjs +153 -25
- package/build/components/global-styles/background-panel.cjs.map +3 -3
- package/build/components/global-styles/color-gradient-dropdown-item.cjs +227 -0
- package/build/components/global-styles/color-gradient-dropdown-item.cjs.map +7 -0
- package/build/components/global-styles/color-panel.cjs +98 -375
- package/build/components/global-styles/color-panel.cjs.map +3 -3
- package/build/components/global-styles/dimensions-panel.cjs +0 -3
- package/build/components/global-styles/dimensions-panel.cjs.map +2 -2
- package/build/components/global-styles/hooks.cjs +34 -0
- package/build/components/global-styles/hooks.cjs.map +2 -2
- package/build/components/global-styles/typography-panel.cjs +82 -10
- package/build/components/global-styles/typography-panel.cjs.map +3 -3
- package/build/components/inspector-controls/groups.cjs +2 -0
- package/build/components/inspector-controls/groups.cjs.map +2 -2
- package/build/components/inspector-controls-tabs/styles-tab.cjs +75 -31
- package/build/components/inspector-controls-tabs/styles-tab.cjs.map +2 -2
- package/build/components/link-control/index.cjs +1 -2
- package/build/components/link-control/index.cjs.map +2 -2
- package/build/components/list-view/block-select-button.cjs +1 -10
- package/build/components/list-view/block-select-button.cjs.map +3 -3
- package/build/components/provider/use-block-sync.cjs +3 -1
- package/build/components/provider/use-block-sync.cjs.map +2 -2
- package/build/components/url-popover/image-url-input-ui.cjs +0 -2
- package/build/components/url-popover/image-url-input-ui.cjs.map +2 -2
- package/build/components/use-block-display-information/index.cjs +10 -3
- package/build/components/use-block-display-information/index.cjs.map +2 -2
- package/build/hooks/anchor.cjs +0 -1
- package/build/hooks/anchor.cjs.map +2 -2
- package/build/hooks/background.cjs +124 -75
- package/build/hooks/background.cjs.map +3 -3
- package/build/hooks/color.cjs +0 -162
- package/build/hooks/color.cjs.map +3 -3
- package/build/hooks/contrast-checker.cjs +31 -28
- package/build/hooks/contrast-checker.cjs.map +3 -3
- package/build/hooks/custom-class-name.cjs +0 -1
- package/build/hooks/custom-class-name.cjs.map +2 -2
- package/build/hooks/elements.cjs +142 -0
- package/build/hooks/elements.cjs.map +7 -0
- package/build/hooks/grid-visualizer.cjs +21 -11
- package/build/hooks/grid-visualizer.cjs.map +2 -2
- package/build/hooks/layout-child.cjs +38 -8
- package/build/hooks/layout-child.cjs.map +2 -2
- package/build/hooks/layout.cjs +6 -3
- package/build/hooks/layout.cjs.map +2 -2
- package/build/hooks/states.cjs +2 -2
- package/build/hooks/states.cjs.map +2 -2
- package/build/hooks/style.cjs +8 -4
- package/build/hooks/style.cjs.map +2 -2
- package/build/hooks/typography.cjs +62 -10
- package/build/hooks/typography.cjs.map +3 -3
- package/build/layouts/flex.cjs +99 -6
- package/build/layouts/flex.cjs.map +2 -2
- package/build/utils/block-bindings.cjs +9 -9
- package/build/utils/block-bindings.cjs.map +3 -3
- package/build/utils/color-values.cjs +10 -1
- package/build/utils/color-values.cjs.map +3 -3
- package/build/utils/dom.cjs +2 -5
- package/build/utils/dom.cjs.map +3 -3
- package/build/utils/fit-text-frontend.cjs +6 -2
- package/build/utils/fit-text-frontend.cjs.map +3 -3
- package/build/utils/fit-text-utils.cjs +1 -1
- package/build/utils/fit-text-utils.cjs.map +3 -3
- package/build/utils/format-font-style.cjs +1 -1
- package/build/utils/format-font-style.cjs.map +3 -3
- package/build/utils/format-font-weight.cjs +1 -1
- package/build/utils/format-font-weight.cjs.map +3 -3
- package/build/utils/get-editor-region.cjs +4 -2
- package/build/utils/get-editor-region.cjs.map +3 -3
- package/build/utils/get-font-styles-and-weights.cjs +8 -12
- package/build/utils/get-font-styles-and-weights.cjs.map +3 -3
- package/build/utils/get-px-from-css-unit.cjs +1 -1
- package/build/utils/get-px-from-css-unit.cjs.map +1 -1
- package/build/utils/index.cjs +1 -1
- package/build/utils/index.cjs.map +1 -1
- package/build/utils/math.cjs +1 -1
- package/build/utils/math.cjs.map +3 -3
- package/build/utils/object.cjs +8 -8
- package/build/utils/object.cjs.map +3 -3
- package/build/utils/order-inserter-block-items.cjs +1 -1
- package/build/utils/order-inserter-block-items.cjs.map +3 -3
- package/build/utils/pasting.cjs +4 -2
- package/build/utils/pasting.cjs.map +3 -3
- package/build/utils/selection.cjs +2 -1
- package/build/utils/selection.cjs.map +3 -3
- package/build/utils/sorting.cjs +9 -3
- package/build/utils/sorting.cjs.map +3 -3
- package/build/utils/transform-styles/index.cjs +3 -2
- package/build/utils/transform-styles/index.cjs.map +3 -3
- package/build/utils/transform-styles/postcss-urlrebase.d.cjs +2 -0
- package/build/utils/transform-styles/postcss-urlrebase.d.cjs.map +7 -0
- package/build/utils/transform-styles/types.cjs +19 -0
- package/build/utils/transform-styles/types.cjs.map +7 -0
- package/build/utils/types.cjs +19 -0
- package/build/utils/types.cjs.map +7 -0
- package/build-module/components/block-editing-mode/index.mjs +14 -8
- package/build-module/components/block-editing-mode/index.mjs.map +2 -2
- package/build-module/components/block-inspector/index.mjs +32 -16
- package/build-module/components/block-inspector/index.mjs.map +2 -2
- package/build-module/components/block-rename/modal.mjs +0 -1
- package/build-module/components/block-rename/modal.mjs.map +2 -2
- package/build-module/components/block-toolbar/block-toolbar-icon.mjs +14 -6
- package/build-module/components/block-toolbar/block-toolbar-icon.mjs.map +2 -2
- package/build-module/components/colors-gradients/control.mjs +27 -15
- package/build-module/components/colors-gradients/control.mjs.map +2 -2
- package/build-module/components/colors-gradients/dropdown.mjs +4 -1
- package/build-module/components/colors-gradients/dropdown.mjs.map +2 -2
- package/build-module/components/contrast-checker/index.mjs +18 -4
- package/build-module/components/contrast-checker/index.mjs.map +2 -2
- package/build-module/components/date-format-picker/index.mjs +0 -1
- package/build-module/components/date-format-picker/index.mjs.map +2 -2
- package/build-module/components/global-styles/background-panel.mjs +155 -27
- package/build-module/components/global-styles/background-panel.mjs.map +2 -2
- package/build-module/components/global-styles/color-gradient-dropdown-item.mjs +207 -0
- package/build-module/components/global-styles/color-gradient-dropdown-item.mjs.map +7 -0
- package/build-module/components/global-styles/color-panel.mjs +106 -387
- package/build-module/components/global-styles/color-panel.mjs.map +3 -3
- package/build-module/components/global-styles/dimensions-panel.mjs +0 -3
- package/build-module/components/global-styles/dimensions-panel.mjs.map +2 -2
- package/build-module/components/global-styles/hooks.mjs +33 -0
- package/build-module/components/global-styles/hooks.mjs.map +2 -2
- package/build-module/components/global-styles/typography-panel.mjs +84 -10
- package/build-module/components/global-styles/typography-panel.mjs.map +2 -2
- package/build-module/components/inspector-controls/groups.mjs +2 -0
- package/build-module/components/inspector-controls/groups.mjs.map +2 -2
- package/build-module/components/inspector-controls-tabs/styles-tab.mjs +75 -31
- package/build-module/components/inspector-controls-tabs/styles-tab.mjs.map +2 -2
- package/build-module/components/link-control/index.mjs +1 -2
- package/build-module/components/link-control/index.mjs.map +2 -2
- package/build-module/components/list-view/block-select-button.mjs +2 -17
- package/build-module/components/list-view/block-select-button.mjs.map +2 -2
- package/build-module/components/provider/use-block-sync.mjs +3 -1
- package/build-module/components/provider/use-block-sync.mjs.map +2 -2
- package/build-module/components/url-popover/image-url-input-ui.mjs +0 -2
- package/build-module/components/url-popover/image-url-input-ui.mjs.map +2 -2
- package/build-module/components/use-block-display-information/index.mjs +10 -3
- package/build-module/components/use-block-display-information/index.mjs.map +2 -2
- package/build-module/hooks/anchor.mjs +0 -1
- package/build-module/hooks/anchor.mjs.map +2 -2
- package/build-module/hooks/background.mjs +123 -75
- package/build-module/hooks/background.mjs.map +2 -2
- package/build-module/hooks/color.mjs +2 -175
- package/build-module/hooks/color.mjs.map +2 -2
- package/build-module/hooks/contrast-checker.mjs +32 -19
- package/build-module/hooks/contrast-checker.mjs.map +2 -2
- package/build-module/hooks/custom-class-name.mjs +0 -1
- package/build-module/hooks/custom-class-name.mjs.map +2 -2
- package/build-module/hooks/elements.mjs +115 -0
- package/build-module/hooks/elements.mjs.map +7 -0
- package/build-module/hooks/grid-visualizer.mjs +21 -11
- package/build-module/hooks/grid-visualizer.mjs.map +2 -2
- package/build-module/hooks/layout-child.mjs +41 -8
- package/build-module/hooks/layout-child.mjs.map +2 -2
- package/build-module/hooks/layout.mjs +6 -3
- package/build-module/hooks/layout.mjs.map +2 -2
- package/build-module/hooks/states.mjs +2 -2
- package/build-module/hooks/states.mjs.map +2 -2
- package/build-module/hooks/style.mjs +9 -5
- package/build-module/hooks/style.mjs.map +2 -2
- package/build-module/hooks/typography.mjs +62 -10
- package/build-module/hooks/typography.mjs.map +2 -2
- package/build-module/layouts/flex.mjs +105 -7
- package/build-module/layouts/flex.mjs.map +2 -2
- package/build-module/utils/block-bindings.mjs +9 -9
- package/build-module/utils/block-bindings.mjs.map +3 -3
- package/build-module/utils/color-values.mjs +9 -1
- package/build-module/utils/color-values.mjs.map +3 -3
- package/build-module/utils/dom.mjs +2 -5
- package/build-module/utils/dom.mjs.map +3 -3
- package/build-module/utils/fit-text-frontend.mjs +6 -2
- package/build-module/utils/fit-text-frontend.mjs.map +3 -3
- package/build-module/utils/fit-text-utils.mjs +1 -1
- package/build-module/utils/fit-text-utils.mjs.map +3 -3
- package/build-module/utils/format-font-style.mjs +1 -1
- package/build-module/utils/format-font-style.mjs.map +3 -3
- package/build-module/utils/format-font-weight.mjs +1 -1
- package/build-module/utils/format-font-weight.mjs.map +3 -3
- package/build-module/utils/get-editor-region.mjs +4 -2
- package/build-module/utils/get-editor-region.mjs.map +3 -3
- package/build-module/utils/get-font-styles-and-weights.mjs +8 -12
- package/build-module/utils/get-font-styles-and-weights.mjs.map +3 -3
- package/build-module/utils/get-px-from-css-unit.mjs +1 -1
- package/build-module/utils/get-px-from-css-unit.mjs.map +1 -1
- package/build-module/utils/index.mjs +1 -1
- package/build-module/utils/index.mjs.map +1 -1
- package/build-module/utils/math.mjs +1 -1
- package/build-module/utils/math.mjs.map +3 -3
- package/build-module/utils/object.mjs +8 -8
- package/build-module/utils/object.mjs.map +3 -3
- package/build-module/utils/order-inserter-block-items.mjs +1 -1
- package/build-module/utils/order-inserter-block-items.mjs.map +3 -3
- package/build-module/utils/pasting.mjs +4 -2
- package/build-module/utils/pasting.mjs.map +3 -3
- package/build-module/utils/selection.mjs +2 -1
- package/build-module/utils/selection.mjs.map +3 -3
- package/build-module/utils/sorting.mjs +9 -3
- package/build-module/utils/sorting.mjs.map +3 -3
- package/build-module/utils/transform-styles/index.mjs +3 -2
- package/build-module/utils/transform-styles/index.mjs.map +3 -3
- package/build-module/utils/transform-styles/postcss-urlrebase.d.mjs +1 -0
- package/build-module/utils/transform-styles/postcss-urlrebase.d.mjs.map +7 -0
- package/build-module/utils/transform-styles/types.mjs +1 -0
- package/build-module/utils/transform-styles/types.mjs.map +7 -0
- package/build-module/utils/types.mjs +1 -0
- package/build-module/utils/types.mjs.map +7 -0
- package/build-style/content-rtl.css +2 -0
- package/build-style/content.css +2 -0
- package/build-style/style-rtl.css +34 -41
- package/build-style/style.css +34 -41
- package/build-types/utils/block-bindings.d.ts +27 -0
- package/build-types/utils/block-bindings.d.ts.map +1 -0
- package/build-types/utils/color-values.d.ts +40 -0
- package/build-types/utils/color-values.d.ts.map +1 -0
- package/build-types/utils/dom.d.ts +19 -19
- package/build-types/utils/dom.d.ts.map +1 -1
- package/build-types/utils/fit-text-frontend.d.ts +7 -0
- package/build-types/utils/fit-text-frontend.d.ts.map +1 -0
- package/build-types/utils/fit-text-utils.d.ts +15 -0
- package/build-types/utils/fit-text-utils.d.ts.map +1 -0
- package/build-types/utils/format-font-style.d.ts +12 -0
- package/build-types/utils/format-font-style.d.ts.map +1 -0
- package/build-types/utils/format-font-weight.d.ts +12 -0
- package/build-types/utils/format-font-weight.d.ts.map +1 -0
- package/build-types/utils/get-editor-region.d.ts +9 -0
- package/build-types/utils/get-editor-region.d.ts.map +1 -0
- package/build-types/utils/get-font-styles-and-weights.d.ts +16 -0
- package/build-types/utils/get-font-styles-and-weights.d.ts.map +1 -0
- package/build-types/utils/get-px-from-css-unit.d.ts +10 -0
- package/build-types/utils/get-px-from-css-unit.d.ts.map +1 -0
- package/build-types/utils/index.d.ts +3 -0
- package/build-types/utils/index.d.ts.map +1 -0
- package/build-types/utils/math.d.ts +61 -0
- package/build-types/utils/math.d.ts.map +1 -0
- package/build-types/utils/object.d.ts +39 -0
- package/build-types/utils/object.d.ts.map +1 -0
- package/build-types/utils/order-inserter-block-items.d.ts +13 -0
- package/build-types/utils/order-inserter-block-items.d.ts.map +1 -0
- package/build-types/utils/pasting.d.ts +28 -0
- package/build-types/utils/pasting.d.ts.map +1 -0
- package/build-types/utils/selection.d.ts +21 -0
- package/build-types/utils/selection.d.ts.map +1 -0
- package/build-types/utils/sorting.d.ts +17 -0
- package/build-types/utils/sorting.d.ts.map +1 -0
- package/build-types/utils/transform-styles/index.d.ts +15 -0
- package/build-types/utils/transform-styles/index.d.ts.map +1 -0
- package/build-types/utils/transform-styles/types.d.ts +13 -0
- package/build-types/utils/transform-styles/types.d.ts.map +1 -0
- package/build-types/utils/types.d.ts +28 -0
- package/build-types/utils/types.d.ts.map +1 -0
- package/package.json +40 -39
- package/src/components/alignment-control/test/__snapshots__/index.js.snap +6 -0
- package/src/components/block-alignment-control/test/__snapshots__/index.js.snap +5 -0
- package/src/components/block-editing-mode/index.js +17 -9
- package/src/components/block-icon/test/__snapshots__/index.js.snap +1 -0
- package/src/components/block-inspector/index.js +20 -10
- package/src/components/block-rename/modal.js +0 -1
- package/src/components/block-toolbar/block-toolbar-icon.js +22 -6
- package/src/components/block-toolbar/test/block-toolbar-icon.js +99 -0
- package/src/components/block-vertical-alignment-control/test/__snapshots__/index.js.snap +4 -0
- package/src/components/colors-gradients/control.js +29 -12
- package/src/components/colors-gradients/dropdown.js +4 -1
- package/src/components/colors-gradients/style.scss +39 -2
- package/src/components/contrast-checker/README.md +9 -0
- package/src/components/contrast-checker/index.js +42 -3
- package/src/components/date-format-picker/index.js +0 -1
- package/src/components/default-block-appender/content.scss +3 -0
- package/src/components/global-styles/background-panel.js +201 -34
- package/src/components/global-styles/color-gradient-dropdown-item.js +258 -0
- package/src/components/global-styles/color-panel.js +125 -487
- package/src/components/global-styles/dimensions-panel.js +0 -3
- package/src/components/global-styles/hooks.js +45 -0
- package/src/components/global-styles/test/background-panel.js +56 -0
- package/src/components/global-styles/test/color-panel.js +172 -118
- package/src/components/global-styles/test/typography-panel.js +167 -0
- package/src/components/global-styles/typography-panel.js +100 -11
- package/src/components/inspector-controls/README.md +0 -2
- package/src/components/inspector-controls/groups.js +2 -0
- package/src/components/inspector-controls-tabs/styles-tab.js +74 -28
- package/src/components/link-control/index.js +0 -1
- package/src/components/link-control/test/index.js +2 -3
- package/src/components/list-view/block-select-button.js +2 -17
- package/src/components/provider/use-block-sync.js +3 -1
- package/src/components/rich-text/content.scss +2 -0
- package/src/components/url-popover/image-url-input-ui.js +0 -2
- package/src/components/use-block-display-information/index.js +15 -2
- package/src/components/use-block-display-information/test/index.js +140 -0
- package/src/hooks/anchor.js +0 -1
- package/src/hooks/background.js +210 -133
- package/src/hooks/background.scss +0 -35
- package/src/hooks/color.js +2 -205
- package/src/hooks/color.scss +3 -9
- package/src/hooks/contrast-checker.js +60 -17
- package/src/hooks/custom-class-name.js +0 -1
- package/src/hooks/elements.js +140 -0
- package/src/hooks/elements.scss +8 -0
- package/src/hooks/grid-visualizer.js +59 -45
- package/src/hooks/layout-child.js +51 -12
- package/src/hooks/layout.js +6 -3
- package/src/hooks/states.js +2 -2
- package/src/hooks/style.js +11 -7
- package/src/hooks/test/background.js +59 -0
- package/src/hooks/test/block-style-state.js +14 -14
- package/src/hooks/test/layout.js +6 -6
- package/src/hooks/test/style.js +8 -8
- package/src/hooks/typography.js +70 -6
- package/src/layouts/flex.js +118 -15
- package/src/store/test/private-selectors.js +28 -7
- package/src/store/test/reducer.js +61 -10
- package/src/style.scss +1 -0
- package/src/utils/block-bindings.ts +51 -0
- package/src/utils/color-values.ts +63 -0
- package/src/utils/{dom.js → dom.ts} +27 -27
- package/src/utils/{fit-text-frontend.js → fit-text-frontend.ts} +12 -4
- package/src/utils/{fit-text-utils.js → fit-text-utils.ts} +15 -7
- package/src/utils/{format-font-style.js → format-font-style.ts} +10 -3
- package/src/utils/{format-font-weight.js → format-font-weight.ts} +10 -3
- package/src/utils/{get-editor-region.js → get-editor-region.ts} +10 -6
- package/src/utils/{get-font-styles-and-weights.js → get-font-styles-and-weights.ts} +21 -17
- package/src/utils/{math.js → math.ts} +37 -30
- package/src/utils/object.ts +89 -0
- package/src/utils/{order-inserter-block-items.js → order-inserter-block-items.ts} +8 -5
- package/src/utils/{pasting.js → pasting.ts} +18 -11
- package/src/utils/{selection.js → selection.ts} +11 -4
- package/src/utils/sorting.ts +81 -0
- package/src/utils/test/color-values.js +44 -1
- package/src/utils/transform-styles/{index.js → index.ts} +25 -25
- package/src/utils/transform-styles/postcss-urlrebase.d.ts +15 -0
- package/src/utils/transform-styles/types.ts +13 -0
- package/src/utils/types.ts +29 -0
- package/src/utils/block-bindings.js +0 -46
- package/src/utils/color-values.js +0 -28
- package/src/utils/object.js +0 -67
- package/src/utils/sorting.js +0 -54
- /package/src/utils/{get-px-from-css-unit.js → get-px-from-css-unit.ts} +0 -0
- /package/src/utils/{index.js → index.ts} +0 -0
|
@@ -8,6 +8,11 @@ import { _x, sprintf } from '@wordpress/i18n';
|
|
|
8
8
|
*/
|
|
9
9
|
import { formatFontStyle } from './format-font-style';
|
|
10
10
|
import { formatFontWeight } from './format-font-weight';
|
|
11
|
+
import type {
|
|
12
|
+
FontFamilyFace,
|
|
13
|
+
FormattedFont,
|
|
14
|
+
CombinedStyleAndWeightOption,
|
|
15
|
+
} from './types';
|
|
11
16
|
|
|
12
17
|
const FONT_STYLES = [
|
|
13
18
|
{
|
|
@@ -67,13 +72,15 @@ const FONT_WEIGHTS = [
|
|
|
67
72
|
* Builds a list of font style and weight options based on font family faces.
|
|
68
73
|
* Defaults to the standard font styles and weights if no font family faces are provided.
|
|
69
74
|
*
|
|
70
|
-
* @param
|
|
71
|
-
* @return
|
|
75
|
+
* @param fontFamilyFaces font family faces array
|
|
76
|
+
* @return new object with combined and separated font style and weight properties
|
|
72
77
|
*/
|
|
73
|
-
export function getFontStylesAndWeights(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
78
|
+
export function getFontStylesAndWeights(
|
|
79
|
+
fontFamilyFaces: FontFamilyFace[] | undefined
|
|
80
|
+
) {
|
|
81
|
+
let fontStyles: FormattedFont[] = [];
|
|
82
|
+
let fontWeights: FormattedFont[] = [];
|
|
83
|
+
const combinedStyleAndWeightOptions: CombinedStyleAndWeightOption[] = [];
|
|
77
84
|
const isSystemFont = ! fontFamilyFaces || fontFamilyFaces?.length === 0;
|
|
78
85
|
let isVariableFont = false;
|
|
79
86
|
|
|
@@ -86,13 +93,10 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
|
|
|
86
93
|
isVariableFont = true;
|
|
87
94
|
|
|
88
95
|
// Find font weight start and end values.
|
|
89
|
-
|
|
90
|
-
startValue = parseInt(
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
} else {
|
|
94
|
-
endValue = parseInt( endValue.slice( 0, 1 ) );
|
|
95
|
-
}
|
|
96
|
+
const [ startStr, endStr ] = face.fontWeight.split( ' ' );
|
|
97
|
+
const startValue = parseInt( startStr.slice( 0, 1 ) );
|
|
98
|
+
const endValue =
|
|
99
|
+
endStr === '1000' ? 10 : parseInt( endStr.slice( 0, 1 ) );
|
|
96
100
|
|
|
97
101
|
// Create font weight options for available variable weights.
|
|
98
102
|
for ( let i = startValue; i <= endValue; i++ ) {
|
|
@@ -140,7 +144,7 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
|
|
|
140
144
|
} );
|
|
141
145
|
|
|
142
146
|
// If there is no font weight of 600 or above, then include faux bold as an option.
|
|
143
|
-
if ( ! fontWeights.some( ( weight ) => weight.value >= '600' ) ) {
|
|
147
|
+
if ( ! fontWeights.some( ( weight ) => ( weight.value ?? '' ) >= '600' ) ) {
|
|
144
148
|
fontWeights.push( {
|
|
145
149
|
name: _x( 'Bold', 'font weight' ),
|
|
146
150
|
value: '700',
|
|
@@ -174,13 +178,13 @@ export function getFontStylesAndWeights( fontFamilyFaces ) {
|
|
|
174
178
|
: sprintf(
|
|
175
179
|
/* translators: 1: Font weight name. 2: Font style name. */
|
|
176
180
|
_x( '%1$s %2$s', 'font' ),
|
|
177
|
-
weightName,
|
|
178
|
-
styleName
|
|
181
|
+
weightName ?? '',
|
|
182
|
+
styleName ?? ''
|
|
179
183
|
);
|
|
180
184
|
|
|
181
185
|
combinedStyleAndWeightOptions.push( {
|
|
182
186
|
key: `${ styleValue }-${ weightValue }`,
|
|
183
|
-
name: optionName,
|
|
187
|
+
name: optionName ?? '',
|
|
184
188
|
style: {
|
|
185
189
|
fontStyle: styleValue,
|
|
186
190
|
fontWeight: weightValue,
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* A string representing the name of an edge.
|
|
3
|
-
*
|
|
4
|
-
* @typedef {'top'|'right'|'bottom'|'left'} WPEdgeName
|
|
5
3
|
*/
|
|
4
|
+
type EdgeName = 'top' | 'right' | 'bottom' | 'left';
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
interface Point {
|
|
7
|
+
/** The horizontal position. */
|
|
8
|
+
x: number;
|
|
9
|
+
/** The vertical position. */
|
|
10
|
+
y: number;
|
|
11
|
+
}
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
14
|
* Given a point, a DOMRect and the name of an edge, returns the distance to
|
|
@@ -23,11 +23,15 @@
|
|
|
23
23
|
* - Lateral, meaning the axis running vertically when an edge is vertical
|
|
24
24
|
* and horizontally when an edge is horizontal.
|
|
25
25
|
*
|
|
26
|
-
* @param
|
|
27
|
-
* @param
|
|
28
|
-
* @param
|
|
26
|
+
* @param point The point to measure distance from.
|
|
27
|
+
* @param rect A DOM Rect containing edge positions.
|
|
28
|
+
* @param edge The edge to measure to.
|
|
29
29
|
*/
|
|
30
|
-
export function getDistanceFromPointToEdge(
|
|
30
|
+
export function getDistanceFromPointToEdge(
|
|
31
|
+
point: Point,
|
|
32
|
+
rect: DOMRect,
|
|
33
|
+
edge: EdgeName
|
|
34
|
+
) {
|
|
31
35
|
const isHorizontal = edge === 'top' || edge === 'bottom';
|
|
32
36
|
const { x, y } = point;
|
|
33
37
|
const pointLateralPosition = isHorizontal ? x : y;
|
|
@@ -62,21 +66,21 @@ export function getDistanceFromPointToEdge( point, rect, edge ) {
|
|
|
62
66
|
* Given a point, a DOMRect and a list of allowed edges returns the name of and
|
|
63
67
|
* distance to the nearest edge.
|
|
64
68
|
*
|
|
65
|
-
* @param
|
|
66
|
-
* @param
|
|
67
|
-
* @param
|
|
68
|
-
*
|
|
69
|
+
* @param point The point to measure distance from.
|
|
70
|
+
* @param rect A DOM Rect containing edge positions.
|
|
71
|
+
* @param allowedEdges A list of the edges included in the
|
|
72
|
+
* calculation. Defaults to all edges.
|
|
69
73
|
*
|
|
70
|
-
* @return
|
|
71
|
-
*
|
|
74
|
+
* @return An array where the first value is the distance
|
|
75
|
+
* and a second is the edge name.
|
|
72
76
|
*/
|
|
73
77
|
export function getDistanceToNearestEdge(
|
|
74
|
-
point,
|
|
75
|
-
rect,
|
|
76
|
-
allowedEdges = [ 'top', 'bottom', 'left', 'right' ]
|
|
78
|
+
point: Point,
|
|
79
|
+
rect: DOMRect,
|
|
80
|
+
allowedEdges: EdgeName[] = [ 'top', 'bottom', 'left', 'right' ]
|
|
77
81
|
) {
|
|
78
|
-
let candidateDistance;
|
|
79
|
-
let candidateEdge;
|
|
82
|
+
let candidateDistance: number | undefined;
|
|
83
|
+
let candidateEdge: EdgeName | undefined;
|
|
80
84
|
|
|
81
85
|
allowedEdges.forEach( ( edge ) => {
|
|
82
86
|
const distance = getDistanceFromPointToEdge( point, rect, edge );
|
|
@@ -93,12 +97,12 @@ export function getDistanceToNearestEdge(
|
|
|
93
97
|
/**
|
|
94
98
|
* Is the point contained by the rectangle.
|
|
95
99
|
*
|
|
96
|
-
* @param
|
|
97
|
-
* @param
|
|
100
|
+
* @param point The point.
|
|
101
|
+
* @param rect The rectangle.
|
|
98
102
|
*
|
|
99
|
-
* @return
|
|
103
|
+
* @return True if the point is contained by the rectangle, false otherwise.
|
|
100
104
|
*/
|
|
101
|
-
export function isPointContainedByRect( point, rect ) {
|
|
105
|
+
export function isPointContainedByRect( point: Point, rect: DOMRect ) {
|
|
102
106
|
return (
|
|
103
107
|
rect.left <= point.x &&
|
|
104
108
|
rect.right >= point.x &&
|
|
@@ -110,11 +114,14 @@ export function isPointContainedByRect( point, rect ) {
|
|
|
110
114
|
/**
|
|
111
115
|
* Is the point within the top and bottom boundaries of the rectangle.
|
|
112
116
|
*
|
|
113
|
-
* @param
|
|
114
|
-
* @param
|
|
117
|
+
* @param point The point.
|
|
118
|
+
* @param rect The rectangle.
|
|
115
119
|
*
|
|
116
|
-
* @return
|
|
120
|
+
* @return True if the point is within top and bottom of rectangle, false otherwise.
|
|
117
121
|
*/
|
|
118
|
-
export function isPointWithinTopAndBottomBoundariesOfRect(
|
|
122
|
+
export function isPointWithinTopAndBottomBoundariesOfRect(
|
|
123
|
+
point: Point,
|
|
124
|
+
rect: DOMRect
|
|
125
|
+
) {
|
|
119
126
|
return rect.top <= point.y && rect.bottom >= point.y;
|
|
120
127
|
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
type AnyObject = Record< string, unknown >;
|
|
2
|
+
type ObjectOrArray = AnyObject | unknown[];
|
|
3
|
+
type ObjectPathKey = number | string;
|
|
4
|
+
type ObjectPath = ObjectPathKey | ObjectPathKey[];
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Immutably sets a value inside an object. Like `lodash#set`, but returning a
|
|
8
|
+
* new object. Treats nullish initial values as empty objects. Clones any
|
|
9
|
+
* nested objects. Supports arrays, too.
|
|
10
|
+
*
|
|
11
|
+
* @param object Object to set a value in.
|
|
12
|
+
* @param path Path in the object to modify.
|
|
13
|
+
* @param value New value to set.
|
|
14
|
+
* @return Cloned object with the new value set.
|
|
15
|
+
*/
|
|
16
|
+
export function setImmutably(
|
|
17
|
+
object: ObjectOrArray | null | undefined,
|
|
18
|
+
path: ObjectPath,
|
|
19
|
+
value: unknown
|
|
20
|
+
): ObjectOrArray {
|
|
21
|
+
// Normalize path
|
|
22
|
+
const pathArray: ObjectPathKey[] = Array.isArray( path )
|
|
23
|
+
? [ ...path ]
|
|
24
|
+
: [ path ];
|
|
25
|
+
|
|
26
|
+
// Shallowly clone the base of the object
|
|
27
|
+
const result: ObjectOrArray = Array.isArray( object )
|
|
28
|
+
? [ ...object ]
|
|
29
|
+
: { ...object };
|
|
30
|
+
|
|
31
|
+
const leaf = pathArray.pop() as ObjectPathKey;
|
|
32
|
+
|
|
33
|
+
// Traverse object from root to leaf, shallowly cloning at each level
|
|
34
|
+
let prev: ObjectOrArray = result;
|
|
35
|
+
for ( const key of pathArray ) {
|
|
36
|
+
const lvl = ( prev as AnyObject )[ key ];
|
|
37
|
+
( prev as AnyObject )[ key ] = prev = Array.isArray( lvl )
|
|
38
|
+
? [ ...lvl ]
|
|
39
|
+
: { ...( lvl as AnyObject ) };
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
( prev as AnyObject )[ leaf ] = value;
|
|
43
|
+
|
|
44
|
+
return result;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Helper util to return a value from a certain path of the object.
|
|
49
|
+
* Path is specified as either:
|
|
50
|
+
* - a string of properties, separated by dots, for example: "x.y".
|
|
51
|
+
* - an array of properties, for example `[ 'x', 'y' ]`.
|
|
52
|
+
* You can also specify a default value in case the result is nullish.
|
|
53
|
+
*
|
|
54
|
+
* @param object Input object.
|
|
55
|
+
* @param path Path to the object property.
|
|
56
|
+
* @param defaultValue Default value if the value at the specified path is nullish.
|
|
57
|
+
* @return Value of the object property at the specified path.
|
|
58
|
+
*/
|
|
59
|
+
export const getValueFromObjectPath = (
|
|
60
|
+
object: AnyObject | undefined | null,
|
|
61
|
+
path: string | string[],
|
|
62
|
+
defaultValue?: unknown
|
|
63
|
+
) => {
|
|
64
|
+
const arrayPath = Array.isArray( path ) ? path : path.split( '.' );
|
|
65
|
+
let value: unknown = object;
|
|
66
|
+
arrayPath.forEach( ( fieldName ) => {
|
|
67
|
+
value = ( value as AnyObject | undefined | null )?.[ fieldName ];
|
|
68
|
+
} );
|
|
69
|
+
return value ?? defaultValue;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* Helper util to filter out objects with duplicate values for a given property.
|
|
74
|
+
*
|
|
75
|
+
* @param array Array of objects to filter.
|
|
76
|
+
* @param property Property to filter unique values by.
|
|
77
|
+
*
|
|
78
|
+
* @return Array of objects with unique values for the specified property.
|
|
79
|
+
*/
|
|
80
|
+
export function uniqByProperty< T extends AnyObject >(
|
|
81
|
+
array: T[],
|
|
82
|
+
property: string
|
|
83
|
+
) {
|
|
84
|
+
const seen = new Set();
|
|
85
|
+
return array.filter( ( item ) => {
|
|
86
|
+
const value = item[ property ];
|
|
87
|
+
return seen.has( value ) ? false : seen.add( value );
|
|
88
|
+
} );
|
|
89
|
+
}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
type EditorInserterItem = { id: string };
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Helper function to order inserter block items according to a provided array of prioritized blocks.
|
|
5
5
|
*
|
|
6
|
-
* @param
|
|
7
|
-
* @param
|
|
8
|
-
* @return
|
|
6
|
+
* @param items The array of editor inserter block items to be sorted.
|
|
7
|
+
* @param priority The array of block names to be prioritized.
|
|
8
|
+
* @return The sorted array of editor inserter block items.
|
|
9
9
|
*/
|
|
10
|
-
export const orderInserterBlockItems = (
|
|
10
|
+
export const orderInserterBlockItems = (
|
|
11
|
+
items: EditorInserterItem[],
|
|
12
|
+
priority: string[] | undefined
|
|
13
|
+
) => {
|
|
11
14
|
if ( ! priority ) {
|
|
12
15
|
return items;
|
|
13
16
|
}
|
|
@@ -7,10 +7,10 @@ import { getFilesFromDataTransfer } from '@wordpress/dom';
|
|
|
7
7
|
* Normalizes a given string of HTML to remove the Windows-specific "Fragment"
|
|
8
8
|
* comments and any preceding and trailing content.
|
|
9
9
|
*
|
|
10
|
-
* @param
|
|
11
|
-
* @return
|
|
10
|
+
* @param html the html to be normalized
|
|
11
|
+
* @return the normalized html
|
|
12
12
|
*/
|
|
13
|
-
function removeWindowsFragments( html ) {
|
|
13
|
+
function removeWindowsFragments( html: string ) {
|
|
14
14
|
const startStr = '<!--StartFragment-->';
|
|
15
15
|
const startIdx = html.indexOf( startStr );
|
|
16
16
|
if ( startIdx > -1 ) {
|
|
@@ -35,10 +35,10 @@ function removeWindowsFragments( html ) {
|
|
|
35
35
|
* - https://github.com/WordPress/gutenberg/issues/33585
|
|
36
36
|
* - https://bugs.chromium.org/p/chromium/issues/detail?id=1264616#c4
|
|
37
37
|
*
|
|
38
|
-
* @param
|
|
39
|
-
* @return
|
|
38
|
+
* @param html the html to be stripped of the meta tag.
|
|
39
|
+
* @return the cleaned html
|
|
40
40
|
*/
|
|
41
|
-
function removeCharsetMetaTag( html ) {
|
|
41
|
+
function removeCharsetMetaTag( html: string ) {
|
|
42
42
|
const metaTag = `<meta charset='utf-8'>`;
|
|
43
43
|
|
|
44
44
|
if ( html.startsWith( metaTag ) ) {
|
|
@@ -48,7 +48,11 @@ function removeCharsetMetaTag( html ) {
|
|
|
48
48
|
return html;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
export function getPasteEventData( {
|
|
51
|
+
export function getPasteEventData( {
|
|
52
|
+
clipboardData,
|
|
53
|
+
}: {
|
|
54
|
+
clipboardData: DataTransfer;
|
|
55
|
+
} ) {
|
|
52
56
|
let plainText = '';
|
|
53
57
|
let html = '';
|
|
54
58
|
|
|
@@ -88,11 +92,14 @@ export function getPasteEventData( { clipboardData } ) {
|
|
|
88
92
|
* content and not the screenshot, since this allows Gutenberg to insert
|
|
89
93
|
* meaningful blocks, like paragraphs, lists or even tables.
|
|
90
94
|
*
|
|
91
|
-
* @param
|
|
92
|
-
* @param
|
|
93
|
-
* @return
|
|
95
|
+
* @param files File objects obtained from a paste event
|
|
96
|
+
* @param html HTML content obtained from a paste event
|
|
97
|
+
* @return True if the files should be dismissed
|
|
94
98
|
*/
|
|
95
|
-
export function shouldDismissPastedFiles(
|
|
99
|
+
export function shouldDismissPastedFiles(
|
|
100
|
+
files: File[],
|
|
101
|
+
html: string /*, plainText */
|
|
102
|
+
) {
|
|
96
103
|
// The question is only relevant when there is actual HTML content and when
|
|
97
104
|
// there is exactly one image file.
|
|
98
105
|
if (
|
|
@@ -13,10 +13,12 @@ export const START_OF_SELECTED_AREA = '\u0086';
|
|
|
13
13
|
/**
|
|
14
14
|
* Retrieve the block attribute that contains the selection position.
|
|
15
15
|
*
|
|
16
|
-
* @param
|
|
17
|
-
* @return
|
|
16
|
+
* @param blockAttributes Block attributes.
|
|
17
|
+
* @return The name of the block attribute that was previously selected.
|
|
18
18
|
*/
|
|
19
|
-
export function retrieveSelectedAttribute(
|
|
19
|
+
export function retrieveSelectedAttribute(
|
|
20
|
+
blockAttributes: Record< string, unknown > | undefined
|
|
21
|
+
) {
|
|
20
22
|
if ( ! blockAttributes ) {
|
|
21
23
|
return;
|
|
22
24
|
}
|
|
@@ -32,10 +34,15 @@ export function retrieveSelectedAttribute( blockAttributes ) {
|
|
|
32
34
|
} );
|
|
33
35
|
}
|
|
34
36
|
|
|
35
|
-
|
|
37
|
+
type BlockTypeWithAttributes = {
|
|
38
|
+
attributes: Record< string, { source?: string } >;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export function findRichTextAttributeKey( blockType: BlockTypeWithAttributes ) {
|
|
36
42
|
for ( const [ key, value ] of Object.entries( blockType.attributes ) ) {
|
|
37
43
|
if ( value.source === 'rich-text' || value.source === 'html' ) {
|
|
38
44
|
return key;
|
|
39
45
|
}
|
|
40
46
|
}
|
|
47
|
+
return undefined;
|
|
41
48
|
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
type Comparable = string | number | undefined;
|
|
2
|
+
type SortItem = Record< string, Comparable >;
|
|
3
|
+
type SortField< T > = string | ( ( item: T ) => Comparable );
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Mirrors the `>` operator for `Comparable` values: lexicographic when both
|
|
7
|
+
* are strings, numeric otherwise (an `undefined` operand is never greater).
|
|
8
|
+
*
|
|
9
|
+
* @param a Left-hand value.
|
|
10
|
+
* @param b Right-hand value.
|
|
11
|
+
* @return Whether `a` is greater than `b`.
|
|
12
|
+
*/
|
|
13
|
+
function isGreater( a: Comparable, b: Comparable ): boolean {
|
|
14
|
+
if ( typeof a === 'string' && typeof b === 'string' ) {
|
|
15
|
+
return a > b;
|
|
16
|
+
}
|
|
17
|
+
return Number( a ) > Number( b );
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Recursive stable sorting comparator function.
|
|
22
|
+
*
|
|
23
|
+
* @param field Field to sort by.
|
|
24
|
+
* @param items Items to sort.
|
|
25
|
+
* @param order Order, 'asc' or 'desc'.
|
|
26
|
+
* @return Comparison function to be used in a `.sort()`.
|
|
27
|
+
*/
|
|
28
|
+
const comparator = < T extends SortItem >(
|
|
29
|
+
field: SortField< T >,
|
|
30
|
+
items: T[],
|
|
31
|
+
order: string
|
|
32
|
+
) => {
|
|
33
|
+
return ( a: T, b: T ) => {
|
|
34
|
+
let cmpA: Comparable, cmpB: Comparable;
|
|
35
|
+
|
|
36
|
+
if ( typeof field === 'function' ) {
|
|
37
|
+
cmpA = field( a );
|
|
38
|
+
cmpB = field( b );
|
|
39
|
+
} else {
|
|
40
|
+
cmpA = a[ field ];
|
|
41
|
+
cmpB = b[ field ];
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if ( isGreater( cmpA, cmpB ) ) {
|
|
45
|
+
return order === 'asc' ? 1 : -1;
|
|
46
|
+
} else if ( isGreater( cmpB, cmpA ) ) {
|
|
47
|
+
return order === 'asc' ? -1 : 1;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const orderA = items.findIndex( ( item ) => item === a );
|
|
51
|
+
const orderB = items.findIndex( ( item ) => item === b );
|
|
52
|
+
|
|
53
|
+
// Stable sort: maintaining original array order
|
|
54
|
+
if ( orderA > orderB ) {
|
|
55
|
+
return 1;
|
|
56
|
+
} else if ( orderB > orderA ) {
|
|
57
|
+
return -1;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
return 0;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Order items by a certain key.
|
|
66
|
+
* Supports decorator functions that allow complex picking of a comparison field.
|
|
67
|
+
* Sorts in ascending order by default, but supports descending as well.
|
|
68
|
+
* Stable sort - maintains original order of equal items.
|
|
69
|
+
*
|
|
70
|
+
* @param items Items to order.
|
|
71
|
+
* @param field Field to order by.
|
|
72
|
+
* @param order Sorting order, `asc` or `desc`.
|
|
73
|
+
* @return Sorted items.
|
|
74
|
+
*/
|
|
75
|
+
export function orderBy< T extends SortItem >(
|
|
76
|
+
items: T[],
|
|
77
|
+
field: SortField< T >,
|
|
78
|
+
order = 'asc'
|
|
79
|
+
) {
|
|
80
|
+
return items.concat().sort( comparator( field, items, order ) );
|
|
81
|
+
}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Internal dependencies
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
4
|
+
import {
|
|
5
|
+
extractPresetSlug,
|
|
6
|
+
encodeColorValueWithPalette,
|
|
7
|
+
} from '../color-values';
|
|
5
8
|
|
|
6
9
|
describe( 'extractPresetSlug', () => {
|
|
7
10
|
it( 'extracts the slug for a color from the user preset format', () => {
|
|
@@ -76,3 +79,43 @@ describe( 'extractPresetSlug', () => {
|
|
|
76
79
|
).toBeUndefined();
|
|
77
80
|
} );
|
|
78
81
|
} );
|
|
82
|
+
|
|
83
|
+
describe( 'encodeColorValueWithPalette', () => {
|
|
84
|
+
const palette = [
|
|
85
|
+
{ slug: 'brand-a', color: '#e10000' },
|
|
86
|
+
{ slug: 'brand-b', color: '#e10000' },
|
|
87
|
+
{ slug: 'accent', color: '#0000ff' },
|
|
88
|
+
];
|
|
89
|
+
|
|
90
|
+
it( 'encodes the provided slug directly, ignoring the hex value', () => {
|
|
91
|
+
expect(
|
|
92
|
+
encodeColorValueWithPalette( palette, '#e10000', 'brand-b' )
|
|
93
|
+
).toBe( 'var:preset|color|brand-b' );
|
|
94
|
+
} );
|
|
95
|
+
|
|
96
|
+
it( 'preserves the user choice when two presets share the same hex', () => {
|
|
97
|
+
// Selecting `brand-b` must not collapse onto `brand-a` (the first
|
|
98
|
+
// palette entry with the same hex). This is the regression guard.
|
|
99
|
+
expect(
|
|
100
|
+
encodeColorValueWithPalette( palette, '#e10000', 'brand-b' )
|
|
101
|
+
).not.toBe( 'var:preset|color|brand-a' );
|
|
102
|
+
} );
|
|
103
|
+
|
|
104
|
+
it( 'falls back to matching the hex against the palette when no slug is supplied', () => {
|
|
105
|
+
expect( encodeColorValueWithPalette( palette, '#0000ff' ) ).toBe(
|
|
106
|
+
'var:preset|color|accent'
|
|
107
|
+
);
|
|
108
|
+
} );
|
|
109
|
+
|
|
110
|
+
it( 'matches the first entry on hex collision only when no slug is supplied', () => {
|
|
111
|
+
expect( encodeColorValueWithPalette( palette, '#e10000' ) ).toBe(
|
|
112
|
+
'var:preset|color|brand-a'
|
|
113
|
+
);
|
|
114
|
+
} );
|
|
115
|
+
|
|
116
|
+
it( 'stores the raw value when the hex is not in the palette and no slug is supplied', () => {
|
|
117
|
+
expect( encodeColorValueWithPalette( palette, '#abcabc' ) ).toBe(
|
|
118
|
+
'#abcabc'
|
|
119
|
+
);
|
|
120
|
+
} );
|
|
121
|
+
} );
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
/// <reference path="./postcss-urlrebase.d.ts" />
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* External dependencies
|
|
3
5
|
*/
|
|
@@ -7,6 +9,11 @@ import CssSyntaxError from 'postcss/lib/css-syntax-error';
|
|
|
7
9
|
import prefixSelector from 'postcss-prefix-selector';
|
|
8
10
|
import rebaseUrl from 'postcss-urlrebase';
|
|
9
11
|
|
|
12
|
+
/**
|
|
13
|
+
* Internal dependencies
|
|
14
|
+
*/
|
|
15
|
+
import type { EditorStyle, TransformOptions } from './types';
|
|
16
|
+
|
|
10
17
|
const cacheByWrapperSelector = new Map();
|
|
11
18
|
|
|
12
19
|
const ROOT_SELECTOR_TOKENS = [
|
|
@@ -33,12 +40,12 @@ const ROOT_SELECTOR_TOKENS = [
|
|
|
33
40
|
* - If a classname, id, or something else is used as the prefix, all selectors
|
|
34
41
|
* will have the same specificity bump when transformed.
|
|
35
42
|
*
|
|
36
|
-
* @param
|
|
37
|
-
* @param
|
|
43
|
+
* @param prefix The prefix.
|
|
44
|
+
* @param selector The selector.
|
|
38
45
|
*
|
|
39
|
-
* @return
|
|
46
|
+
* @return The prefixed root selector.
|
|
40
47
|
*/
|
|
41
|
-
function prefixRootSelector( prefix, selector ) {
|
|
48
|
+
function prefixRootSelector( prefix: string, selector: string ) {
|
|
42
49
|
// Use a tokenizer, since regular expressions are unreliable.
|
|
43
50
|
const tokenized = parsel.tokenize( selector );
|
|
44
51
|
|
|
@@ -74,7 +81,8 @@ function prefixRootSelector( prefix, selector ) {
|
|
|
74
81
|
{
|
|
75
82
|
type: 'combinator',
|
|
76
83
|
content: ' ',
|
|
77
|
-
|
|
84
|
+
pos: [ 0, 0 ],
|
|
85
|
+
} as parsel.Token,
|
|
78
86
|
...tokenizedPrefix
|
|
79
87
|
);
|
|
80
88
|
|
|
@@ -82,9 +90,9 @@ function prefixRootSelector( prefix, selector ) {
|
|
|
82
90
|
}
|
|
83
91
|
|
|
84
92
|
function transformStyle(
|
|
85
|
-
{ css, ignoredSelectors = [], baseURL },
|
|
93
|
+
{ css, ignoredSelectors = [], baseURL }: EditorStyle,
|
|
86
94
|
wrapperSelector = '',
|
|
87
|
-
transformOptions
|
|
95
|
+
transformOptions?: TransformOptions
|
|
88
96
|
) {
|
|
89
97
|
// When there is no wrapper selector and no base URL, there is no need
|
|
90
98
|
// to transform the CSS. This is most cases because in the default
|
|
@@ -136,7 +144,7 @@ function transformStyle(
|
|
|
136
144
|
},
|
|
137
145
|
} ),
|
|
138
146
|
baseURL && rebaseUrl( { rootUrl: baseURL } ),
|
|
139
|
-
].filter( Boolean )
|
|
147
|
+
].filter( Boolean ) as import('postcss').AcceptedPlugin[]
|
|
140
148
|
).process( css, {} ).css; // use sync PostCSS API
|
|
141
149
|
} catch ( error ) {
|
|
142
150
|
if ( error instanceof CssSyntaxError ) {
|
|
@@ -157,27 +165,19 @@ function transformStyle(
|
|
|
157
165
|
}
|
|
158
166
|
}
|
|
159
167
|
|
|
160
|
-
/**
|
|
161
|
-
* @typedef {Object} EditorStyle
|
|
162
|
-
* @property {string} css the CSS block(s), as a single string.
|
|
163
|
-
* @property {?string} baseURL the base URL to be used as the reference when rewriting urls.
|
|
164
|
-
* @property {?string[]} ignoredSelectors the selectors not to wrap.
|
|
165
|
-
*/
|
|
166
|
-
|
|
167
|
-
/**
|
|
168
|
-
* @typedef {Object} TransformOptions
|
|
169
|
-
* @property {?string[]} ignoredSelectors the selectors not to wrap.
|
|
170
|
-
*/
|
|
171
|
-
|
|
172
168
|
/**
|
|
173
169
|
* Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
|
|
174
170
|
*
|
|
175
|
-
* @param
|
|
176
|
-
* @param
|
|
177
|
-
* @param
|
|
178
|
-
* @return
|
|
171
|
+
* @param styles CSS rules.
|
|
172
|
+
* @param wrapperSelector Wrapper selector.
|
|
173
|
+
* @param transformOptions Additional options for style transformation.
|
|
174
|
+
* @return converted rules.
|
|
179
175
|
*/
|
|
180
|
-
const transformStyles = (
|
|
176
|
+
const transformStyles = (
|
|
177
|
+
styles: EditorStyle[],
|
|
178
|
+
wrapperSelector = '',
|
|
179
|
+
transformOptions?: TransformOptions
|
|
180
|
+
) => {
|
|
181
181
|
let cache = cacheByWrapperSelector.get( wrapperSelector );
|
|
182
182
|
if ( ! cache ) {
|
|
183
183
|
cache = new WeakMap();
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `postcss-urlrebase` ships an `index.d.ts` that incorrectly declares the module as `rebaseUrl` instead of `postcss-urlrebase`.
|
|
3
|
+
* Until that's fixed upstream, redeclare the module here so its types resolve correctly.
|
|
4
|
+
*/
|
|
5
|
+
declare module 'postcss-urlrebase' {
|
|
6
|
+
import type { PluginCreator } from 'postcss';
|
|
7
|
+
|
|
8
|
+
interface RebaseUrlOptions {
|
|
9
|
+
skipHostRelativeUrls?: boolean;
|
|
10
|
+
rootUrl: string | URL;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const rebaseUrl: PluginCreator< RebaseUrlOptions >;
|
|
14
|
+
export default rebaseUrl;
|
|
15
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface EditorStyle {
|
|
2
|
+
/** The CSS block(s), as a single string. */
|
|
3
|
+
css: string;
|
|
4
|
+
/** The base URL to be used as the reference when rewriting urls. */
|
|
5
|
+
baseURL?: string;
|
|
6
|
+
/** The selectors not to wrap. */
|
|
7
|
+
ignoredSelectors?: ( string | RegExp )[];
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export interface TransformOptions {
|
|
11
|
+
/** The selectors not to wrap. */
|
|
12
|
+
ignoredSelectors?: ( string | RegExp )[];
|
|
13
|
+
}
|