@wordpress/global-styles-ui 1.1.0 → 1.2.0
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/background-panel.js +5 -3
- package/build/background-panel.js.map +1 -1
- package/build/block-preview-panel.js +4 -2
- package/build/block-preview-panel.js.map +1 -1
- package/build/color-indicator-wrapper.js +3 -1
- package/build/color-indicator-wrapper.js.map +1 -1
- package/build/color-palette-panel.js +4 -2
- package/build/color-palette-panel.js.map +1 -1
- package/build/color-preview.js +3 -1
- package/build/color-preview.js.map +1 -1
- package/build/color-variations.js +3 -1
- package/build/color-variations.js.map +1 -1
- package/build/confirm-reset-shadow-dialog.js +3 -1
- package/build/confirm-reset-shadow-dialog.js.map +1 -1
- package/build/context.js +3 -1
- package/build/context.js.map +1 -1
- package/build/dimensions-panel.js +5 -3
- package/build/dimensions-panel.js.map +1 -1
- package/build/font-families.js +3 -1
- package/build/font-families.js.map +1 -1
- package/build/font-family-item.js +3 -1
- package/build/font-family-item.js.map +1 -1
- package/build/font-library-modal/collection-font-variant.js +3 -1
- package/build/font-library-modal/collection-font-variant.js.map +1 -1
- package/build/font-library-modal/context.js +4 -2
- package/build/font-library-modal/context.js.map +1 -1
- package/build/font-library-modal/font-card.js +3 -1
- package/build/font-library-modal/font-card.js.map +1 -1
- package/build/font-library-modal/font-collection.js +6 -4
- package/build/font-library-modal/font-collection.js.map +2 -2
- package/build/font-library-modal/font-demo.js +3 -1
- package/build/font-library-modal/font-demo.js.map +1 -1
- package/build/font-library-modal/google-fonts-confirm-dialog.js +3 -1
- package/build/font-library-modal/google-fonts-confirm-dialog.js.map +2 -2
- package/build/font-library-modal/index.js +7 -5
- package/build/font-library-modal/index.js.map +1 -1
- package/build/font-library-modal/installed-fonts.js +3 -1
- package/build/font-library-modal/installed-fonts.js.map +1 -1
- package/build/font-library-modal/lib/inflate.js +2 -0
- package/build/font-library-modal/lib/inflate.js.map +1 -1
- package/build/font-library-modal/lib/lib-font.browser.d.js +4 -2
- package/build/font-library-modal/lib/lib-font.browser.d.js.map +1 -1
- package/build/font-library-modal/lib/lib-font.browser.js +345 -343
- package/build/font-library-modal/lib/lib-font.browser.js.map +1 -1
- package/build/font-library-modal/lib/unbrotli.js +2 -0
- package/build/font-library-modal/lib/unbrotli.js.map +1 -1
- package/build/font-library-modal/library-font-details.js +3 -1
- package/build/font-library-modal/library-font-details.js.map +1 -1
- package/build/font-library-modal/library-font-variant.js +3 -1
- package/build/font-library-modal/library-font-variant.js.map +1 -1
- package/build/font-library-modal/resolvers.js +4 -2
- package/build/font-library-modal/resolvers.js.map +2 -2
- package/build/font-library-modal/types.js +2 -0
- package/build/font-library-modal/types.js.map +1 -1
- package/build/font-library-modal/upload-fonts.js +3 -1
- package/build/font-library-modal/upload-fonts.js.map +2 -2
- package/build/font-library-modal/utils/constants.js +5 -3
- package/build/font-library-modal/utils/constants.js.map +1 -1
- package/build/font-library-modal/utils/filter-fonts.js +2 -0
- package/build/font-library-modal/utils/filter-fonts.js.map +1 -1
- package/build/font-library-modal/utils/fonts-outline.js +2 -0
- package/build/font-library-modal/utils/fonts-outline.js.map +1 -1
- package/build/font-library-modal/utils/index.js +4 -2
- package/build/font-library-modal/utils/index.js.map +2 -2
- package/build/font-library-modal/utils/make-families-from-faces.js +3 -1
- package/build/font-library-modal/utils/make-families-from-faces.js.map +1 -1
- package/build/font-library-modal/utils/preview-styles.js +2 -0
- package/build/font-library-modal/utils/preview-styles.js.map +1 -1
- package/build/font-library-modal/utils/set-immutably.js +2 -0
- package/build/font-library-modal/utils/set-immutably.js.map +1 -1
- package/build/font-library-modal/utils/sort-font-faces.js +2 -0
- package/build/font-library-modal/utils/sort-font-faces.js.map +1 -1
- package/build/font-library-modal/utils/toggleFont.js +2 -0
- package/build/font-library-modal/utils/toggleFont.js.map +1 -1
- package/build/font-sizes/confirm-delete-font-size-dialog.js +3 -1
- package/build/font-sizes/confirm-delete-font-size-dialog.js.map +1 -1
- package/build/font-sizes/confirm-reset-font-sizes-dialog.js +3 -1
- package/build/font-sizes/confirm-reset-font-sizes-dialog.js.map +1 -1
- package/build/font-sizes/font-size-preview.js +3 -1
- package/build/font-sizes/font-size-preview.js.map +1 -1
- package/build/font-sizes/font-size.js +4 -2
- package/build/font-sizes/font-size.js.map +1 -1
- package/build/font-sizes/font-sizes-count.js +3 -1
- package/build/font-sizes/font-sizes-count.js.map +1 -1
- package/build/font-sizes/font-sizes.js +4 -2
- package/build/font-sizes/font-sizes.js.map +1 -1
- package/build/font-sizes/rename-font-size-dialog.js +3 -1
- package/build/font-sizes/rename-font-size-dialog.js.map +1 -1
- package/build/global-styles-ui.js +43 -22
- package/build/global-styles-ui.js.map +2 -2
- package/build/gradients-palette-panel.js +5 -3
- package/build/gradients-palette-panel.js.map +1 -1
- package/build/highlighted-colors.js +3 -1
- package/build/highlighted-colors.js.map +1 -1
- package/build/hooks.js +4 -2
- package/build/hooks.js.map +1 -1
- package/build/icon-with-current-color.js +3 -1
- package/build/icon-with-current-color.js.map +1 -1
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/lock-unlock.js +3 -1
- package/build/lock-unlock.js.map +1 -1
- package/build/navigation-button.js +3 -1
- package/build/navigation-button.js.map +1 -1
- package/build/pagination/index.js +3 -1
- package/build/pagination/index.js.map +1 -1
- package/build/palette.js +4 -2
- package/build/palette.js.map +1 -1
- package/build/preset-colors.js +3 -1
- package/build/preset-colors.js.map +1 -1
- package/build/preview-colors.js +5 -3
- package/build/preview-colors.js.map +1 -1
- package/build/preview-hooks.js +2 -0
- package/build/preview-hooks.js.map +1 -1
- package/build/preview-styles.js +6 -4
- package/build/preview-styles.js.map +1 -1
- package/build/preview-typography.js +4 -2
- package/build/preview-typography.js.map +1 -1
- package/build/preview-wrapper.js +6 -4
- package/build/preview-wrapper.js.map +1 -1
- package/build/provider.js +3 -1
- package/build/provider.js.map +1 -1
- package/build/root-menu.js +4 -2
- package/build/root-menu.js.map +1 -1
- package/build/screen-background.js +4 -2
- package/build/screen-background.js.map +1 -1
- package/build/screen-block-list.js +5 -3
- package/build/screen-block-list.js.map +2 -2
- package/build/screen-block.js +5 -3
- package/build/screen-block.js.map +1 -1
- package/build/screen-color-palette.js +4 -2
- package/build/screen-color-palette.js.map +1 -1
- package/build/screen-colors.js +4 -2
- package/build/screen-colors.js.map +1 -1
- package/build/screen-css.js +33 -25
- package/build/screen-css.js.map +2 -2
- package/build/screen-header.js +3 -1
- package/build/screen-header.js.map +1 -1
- package/build/screen-layout.js +4 -2
- package/build/screen-layout.js.map +1 -1
- package/build/screen-revisions/index.js +4 -2
- package/build/screen-revisions/index.js.map +1 -1
- package/build/screen-revisions/revisions-buttons.js +4 -2
- package/build/screen-revisions/revisions-buttons.js.map +1 -1
- package/build/screen-revisions/types.js +2 -0
- package/build/screen-revisions/types.js.map +1 -1
- package/build/screen-revisions/use-global-styles-revisions.js +5 -3
- package/build/screen-revisions/use-global-styles-revisions.js.map +1 -1
- package/build/screen-root.js +6 -39
- package/build/screen-root.js.map +2 -2
- package/build/screen-shadows.js +3 -1
- package/build/screen-shadows.js.map +1 -1
- package/build/screen-style-variations.js +3 -1
- package/build/screen-style-variations.js.map +1 -1
- package/build/screen-typography-element.js +4 -2
- package/build/screen-typography-element.js.map +1 -1
- package/build/screen-typography.js +3 -1
- package/build/screen-typography.js.map +1 -1
- package/build/shadow-utils.js +3 -1
- package/build/shadow-utils.js.map +1 -1
- package/build/shadows-edit-panel.js +6 -4
- package/build/shadows-edit-panel.js.map +1 -1
- package/build/shadows-panel.js +5 -3
- package/build/shadows-panel.js.map +1 -1
- package/build/size-control/index.js +4 -2
- package/build/size-control/index.js.map +1 -1
- package/build/style-variations-container.js +3 -1
- package/build/style-variations-container.js.map +1 -1
- package/build/style-variations-content.js +3 -1
- package/build/style-variations-content.js.map +1 -1
- package/build/style-variations.js +3 -1
- package/build/style-variations.js.map +1 -1
- package/build/subtitle.js +3 -1
- package/build/subtitle.js.map +1 -1
- package/build/typography-elements.js +3 -1
- package/build/typography-elements.js.map +1 -1
- package/build/typography-example.js +3 -1
- package/build/typography-example.js.map +1 -1
- package/build/typography-panel.js +4 -2
- package/build/typography-panel.js.map +1 -1
- package/build/typography-preview.js +3 -1
- package/build/typography-preview.js.map +1 -1
- package/build/typography-variations.js +3 -1
- package/build/typography-variations.js.map +1 -1
- package/build/utils.js +3 -1
- package/build/utils.js.map +1 -1
- package/build/variations/variation.js +3 -1
- package/build/variations/variation.js.map +1 -1
- package/build/variations/variations-color.js +4 -2
- package/build/variations/variations-color.js.map +1 -1
- package/build/variations/variations-panel.js +3 -1
- package/build/variations/variations-panel.js.map +1 -1
- package/build/variations/variations-typography.js +4 -2
- package/build/variations/variations-typography.js.map +1 -1
- package/build/with-global-styles-provider.js +3 -1
- package/build/with-global-styles-provider.js.map +1 -1
- package/build-module/background-panel.js +4 -3
- package/build-module/background-panel.js.map +1 -1
- package/build-module/block-preview-panel.js +3 -2
- package/build-module/block-preview-panel.js.map +1 -1
- package/build-module/color-indicator-wrapper.js +2 -1
- package/build-module/color-indicator-wrapper.js.map +1 -1
- package/build-module/color-palette-panel.js +3 -2
- package/build-module/color-palette-panel.js.map +1 -1
- package/build-module/color-preview.js +2 -1
- package/build-module/color-preview.js.map +1 -1
- package/build-module/color-variations.js +2 -1
- package/build-module/color-variations.js.map +1 -1
- package/build-module/confirm-reset-shadow-dialog.js +2 -1
- package/build-module/confirm-reset-shadow-dialog.js.map +1 -1
- package/build-module/context.js +2 -1
- package/build-module/context.js.map +1 -1
- package/build-module/dimensions-panel.js +4 -3
- package/build-module/dimensions-panel.js.map +1 -1
- package/build-module/font-families.js +2 -1
- package/build-module/font-families.js.map +1 -1
- package/build-module/font-family-item.js +2 -1
- package/build-module/font-family-item.js.map +1 -1
- package/build-module/font-library-modal/collection-font-variant.js +2 -1
- package/build-module/font-library-modal/collection-font-variant.js.map +1 -1
- package/build-module/font-library-modal/context.js +3 -2
- package/build-module/font-library-modal/context.js.map +1 -1
- package/build-module/font-library-modal/font-card.js +2 -1
- package/build-module/font-library-modal/font-card.js.map +1 -1
- package/build-module/font-library-modal/font-collection.js +5 -4
- package/build-module/font-library-modal/font-collection.js.map +2 -2
- package/build-module/font-library-modal/font-demo.js +2 -1
- package/build-module/font-library-modal/font-demo.js.map +1 -1
- package/build-module/font-library-modal/google-fonts-confirm-dialog.js +2 -1
- package/build-module/font-library-modal/google-fonts-confirm-dialog.js.map +2 -2
- package/build-module/font-library-modal/index.js +6 -5
- package/build-module/font-library-modal/index.js.map +1 -1
- package/build-module/font-library-modal/installed-fonts.js +2 -1
- package/build-module/font-library-modal/installed-fonts.js.map +1 -1
- package/build-module/font-library-modal/lib/inflate.js +11 -3
- package/build-module/font-library-modal/lib/inflate.js.map +1 -1
- package/build-module/font-library-modal/lib/lib-font.browser.d.js +3 -2
- package/build-module/font-library-modal/lib/lib-font.browser.d.js.map +1 -1
- package/build-module/font-library-modal/lib/lib-font.browser.js +344 -343
- package/build-module/font-library-modal/lib/lib-font.browser.js.map +1 -1
- package/build-module/font-library-modal/lib/unbrotli.js +11 -3
- package/build-module/font-library-modal/lib/unbrotli.js.map +1 -1
- package/build-module/font-library-modal/library-font-details.js +2 -1
- package/build-module/font-library-modal/library-font-details.js.map +1 -1
- package/build-module/font-library-modal/library-font-variant.js +2 -1
- package/build-module/font-library-modal/library-font-variant.js.map +1 -1
- package/build-module/font-library-modal/resolvers.js +3 -2
- package/build-module/font-library-modal/resolvers.js.map +2 -2
- package/build-module/font-library-modal/upload-fonts.js +2 -1
- package/build-module/font-library-modal/upload-fonts.js.map +2 -2
- package/build-module/font-library-modal/utils/constants.js +4 -3
- package/build-module/font-library-modal/utils/constants.js.map +1 -1
- package/build-module/font-library-modal/utils/filter-fonts.js +1 -0
- package/build-module/font-library-modal/utils/filter-fonts.js.map +1 -1
- package/build-module/font-library-modal/utils/fonts-outline.js +1 -0
- package/build-module/font-library-modal/utils/fonts-outline.js.map +1 -1
- package/build-module/font-library-modal/utils/index.js +3 -2
- package/build-module/font-library-modal/utils/index.js.map +2 -2
- package/build-module/font-library-modal/utils/make-families-from-faces.js +2 -1
- package/build-module/font-library-modal/utils/make-families-from-faces.js.map +1 -1
- package/build-module/font-library-modal/utils/preview-styles.js +1 -0
- package/build-module/font-library-modal/utils/preview-styles.js.map +1 -1
- package/build-module/font-library-modal/utils/set-immutably.js +1 -0
- package/build-module/font-library-modal/utils/set-immutably.js.map +1 -1
- package/build-module/font-library-modal/utils/sort-font-faces.js +1 -0
- package/build-module/font-library-modal/utils/sort-font-faces.js.map +1 -1
- package/build-module/font-library-modal/utils/toggleFont.js +1 -0
- package/build-module/font-library-modal/utils/toggleFont.js.map +1 -1
- package/build-module/font-sizes/confirm-delete-font-size-dialog.js +2 -1
- package/build-module/font-sizes/confirm-delete-font-size-dialog.js.map +1 -1
- package/build-module/font-sizes/confirm-reset-font-sizes-dialog.js +2 -1
- package/build-module/font-sizes/confirm-reset-font-sizes-dialog.js.map +1 -1
- package/build-module/font-sizes/font-size-preview.js +2 -1
- package/build-module/font-sizes/font-size-preview.js.map +1 -1
- package/build-module/font-sizes/font-size.js +3 -2
- package/build-module/font-sizes/font-size.js.map +1 -1
- package/build-module/font-sizes/font-sizes-count.js +2 -1
- package/build-module/font-sizes/font-sizes-count.js.map +1 -1
- package/build-module/font-sizes/font-sizes.js +3 -2
- package/build-module/font-sizes/font-sizes.js.map +1 -1
- package/build-module/font-sizes/rename-font-size-dialog.js +2 -1
- package/build-module/font-sizes/rename-font-size-dialog.js.map +1 -1
- package/build-module/global-styles-ui.js +42 -22
- package/build-module/global-styles-ui.js.map +2 -2
- package/build-module/gradients-palette-panel.js +4 -3
- package/build-module/gradients-palette-panel.js.map +1 -1
- package/build-module/highlighted-colors.js +2 -1
- package/build-module/highlighted-colors.js.map +1 -1
- package/build-module/hooks.js +3 -2
- package/build-module/hooks.js.map +1 -1
- package/build-module/icon-with-current-color.js +2 -1
- package/build-module/icon-with-current-color.js.map +1 -1
- package/build-module/index.js +1 -0
- package/build-module/index.js.map +1 -1
- package/build-module/lock-unlock.js +2 -1
- package/build-module/lock-unlock.js.map +1 -1
- package/build-module/navigation-button.js +2 -1
- package/build-module/navigation-button.js.map +1 -1
- package/build-module/pagination/index.js +2 -1
- package/build-module/pagination/index.js.map +1 -1
- package/build-module/palette.js +3 -2
- package/build-module/palette.js.map +1 -1
- package/build-module/preset-colors.js +2 -1
- package/build-module/preset-colors.js.map +1 -1
- package/build-module/preview-colors.js +4 -3
- package/build-module/preview-colors.js.map +1 -1
- package/build-module/preview-hooks.js +1 -0
- package/build-module/preview-hooks.js.map +1 -1
- package/build-module/preview-styles.js +5 -4
- package/build-module/preview-styles.js.map +1 -1
- package/build-module/preview-typography.js +3 -2
- package/build-module/preview-typography.js.map +1 -1
- package/build-module/preview-wrapper.js +5 -4
- package/build-module/preview-wrapper.js.map +1 -1
- package/build-module/provider.js +2 -1
- package/build-module/provider.js.map +1 -1
- package/build-module/root-menu.js +3 -2
- package/build-module/root-menu.js.map +1 -1
- package/build-module/screen-background.js +3 -2
- package/build-module/screen-background.js.map +1 -1
- package/build-module/screen-block-list.js +4 -3
- package/build-module/screen-block-list.js.map +2 -2
- package/build-module/screen-block.js +4 -3
- package/build-module/screen-block.js.map +1 -1
- package/build-module/screen-color-palette.js +3 -2
- package/build-module/screen-color-palette.js.map +1 -1
- package/build-module/screen-colors.js +3 -2
- package/build-module/screen-colors.js.map +1 -1
- package/build-module/screen-css.js +32 -25
- package/build-module/screen-css.js.map +2 -2
- package/build-module/screen-header.js +2 -1
- package/build-module/screen-header.js.map +1 -1
- package/build-module/screen-layout.js +3 -2
- package/build-module/screen-layout.js.map +1 -1
- package/build-module/screen-revisions/index.js +3 -2
- package/build-module/screen-revisions/index.js.map +1 -1
- package/build-module/screen-revisions/revisions-buttons.js +3 -2
- package/build-module/screen-revisions/revisions-buttons.js.map +1 -1
- package/build-module/screen-revisions/use-global-styles-revisions.js +4 -3
- package/build-module/screen-revisions/use-global-styles-revisions.js.map +1 -1
- package/build-module/screen-root.js +5 -39
- package/build-module/screen-root.js.map +2 -2
- package/build-module/screen-shadows.js +2 -1
- package/build-module/screen-shadows.js.map +1 -1
- package/build-module/screen-style-variations.js +2 -1
- package/build-module/screen-style-variations.js.map +1 -1
- package/build-module/screen-typography-element.js +3 -2
- package/build-module/screen-typography-element.js.map +1 -1
- package/build-module/screen-typography.js +2 -1
- package/build-module/screen-typography.js.map +1 -1
- package/build-module/shadow-utils.js +2 -1
- package/build-module/shadow-utils.js.map +1 -1
- package/build-module/shadows-edit-panel.js +5 -4
- package/build-module/shadows-edit-panel.js.map +1 -1
- package/build-module/shadows-panel.js +4 -3
- package/build-module/shadows-panel.js.map +1 -1
- package/build-module/size-control/index.js +3 -2
- package/build-module/size-control/index.js.map +1 -1
- package/build-module/style-variations-container.js +2 -1
- package/build-module/style-variations-container.js.map +1 -1
- package/build-module/style-variations-content.js +2 -1
- package/build-module/style-variations-content.js.map +1 -1
- package/build-module/style-variations.js +2 -1
- package/build-module/style-variations.js.map +1 -1
- package/build-module/subtitle.js +2 -1
- package/build-module/subtitle.js.map +1 -1
- package/build-module/typography-elements.js +2 -1
- package/build-module/typography-elements.js.map +1 -1
- package/build-module/typography-example.js +2 -1
- package/build-module/typography-example.js.map +1 -1
- package/build-module/typography-panel.js +3 -2
- package/build-module/typography-panel.js.map +1 -1
- package/build-module/typography-preview.js +2 -1
- package/build-module/typography-preview.js.map +1 -1
- package/build-module/typography-variations.js +2 -1
- package/build-module/typography-variations.js.map +1 -1
- package/build-module/utils.js +2 -1
- package/build-module/utils.js.map +1 -1
- package/build-module/variations/variation.js +2 -1
- package/build-module/variations/variation.js.map +1 -1
- package/build-module/variations/variations-color.js +3 -2
- package/build-module/variations/variations-color.js.map +1 -1
- package/build-module/variations/variations-panel.js +2 -1
- package/build-module/variations/variations-panel.js.map +1 -1
- package/build-module/variations/variations-typography.js +3 -2
- package/build-module/variations/variations-typography.js.map +1 -1
- package/build-module/with-global-styles-provider.js +2 -1
- package/build-module/with-global-styles-provider.js.map +1 -1
- package/build-types/block-preview-panel.d.ts.map +1 -1
- package/build-types/font-library-modal/font-collection.d.ts.map +1 -1
- package/build-types/font-library-modal/google-fonts-confirm-dialog.d.ts.map +1 -1
- package/build-types/font-library-modal/resolvers.d.ts.map +1 -1
- package/build-types/font-library-modal/upload-fonts.d.ts.map +1 -1
- package/build-types/font-library-modal/utils/index.d.ts.map +1 -1
- package/build-types/global-styles-ui.d.ts.map +1 -1
- package/build-types/preview-colors.d.ts.map +1 -1
- package/build-types/preview-typography.d.ts.map +1 -1
- package/build-types/screen-block-list.d.ts.map +1 -1
- package/build-types/screen-css.d.ts.map +1 -1
- package/build-types/screen-root.d.ts.map +1 -1
- package/build-types/utils.d.ts.map +1 -1
- package/build-types/with-global-styles-provider.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/font-library-modal/font-collection.tsx +0 -1
- package/src/font-library-modal/google-fonts-confirm-dialog.tsx +0 -1
- package/src/font-library-modal/resolvers.tsx +0 -3
- package/src/font-library-modal/upload-fonts.tsx +0 -1
- package/src/font-library-modal/utils/index.ts +0 -2
- package/src/global-styles-ui.tsx +63 -42
- package/src/screen-block-list.tsx +0 -1
- package/src/screen-css.tsx +19 -13
- package/src/screen-root.tsx +4 -53
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/shadows-edit-panel.tsx
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import {
|
|
4
4
|
__experimentalHStack as HStack,
|
|
@@ -39,8 +39,9 @@ import {
|
|
|
39
39
|
} from "./shadow-utils";
|
|
40
40
|
import { useSetting } from "./hooks";
|
|
41
41
|
import { unlock } from "./lock-unlock";
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
43
|
+
var { Menu } = unlock(componentsPrivateApis);
|
|
44
|
+
var customShadowMenuItems = [
|
|
44
45
|
{
|
|
45
46
|
label: __("Rename"),
|
|
46
47
|
action: "rename"
|
|
@@ -50,7 +51,7 @@ const customShadowMenuItems = [
|
|
|
50
51
|
action: "delete"
|
|
51
52
|
}
|
|
52
53
|
];
|
|
53
|
-
|
|
54
|
+
var presetShadowMenuItems = [
|
|
54
55
|
{
|
|
55
56
|
label: __("Reset"),
|
|
56
57
|
action: "reset"
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/shadows-edit-panel.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalInputControl as InputControl,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalGrid as Grid,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tuseNavigator,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tDropdown,\n\tButton,\n\tFlex,\n\tFlexItem,\n\tColorPalette,\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tplus,\n\tshadow as shadowIcon,\n\treset,\n\tmoreVertical,\n} from '@wordpress/icons';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { ScreenHeader } from './screen-header';\nimport { defaultShadow } from './shadows-panel';\nimport {\n\tgetShadowParts,\n\tshadowStringToObject,\n\tshadowObjectToString,\n} from './shadow-utils';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nconst customShadowMenuItems = [\n\t{\n\t\tlabel: __( 'Rename' ),\n\t\taction: 'rename',\n\t},\n\t{\n\t\tlabel: __( 'Delete' ),\n\t\taction: 'delete',\n\t},\n];\n\nconst presetShadowMenuItems = [\n\t{\n\t\tlabel: __( 'Reset' ),\n\t\taction: 'reset',\n\t},\n];\n\nexport default function ShadowsEditPanel() {\n\tconst { goBack, params } = useNavigator();\n\tconst { category, slug } = params;\n\n\tconst [ shadows, setShadows ] = useSetting(\n\t\t`shadow.presets.${ category }`\n\t);\n\n\tuseEffect( () => {\n\t\tconst hasCurrentShadow = shadows?.some(\n\t\t\t( shadow: any ) => shadow.slug === slug\n\t\t);\n\t\t// If the shadow being edited doesn't exist anymore in the global styles setting, navigate back\n\t\t// to prevent the user from editing a non-existent shadow entry.\n\t\t// This can happen, for example:\n\t\t// - when the user deletes the shadow\n\t\t// - when the user resets the styles while editing a custom shadow\n\t\t//\n\t\t// The check on the slug is necessary to prevent a double back navigation when the user triggers\n\t\t// a backward navigation by interacting with the screen's UI.\n\t\tif ( !! slug && ! hasCurrentShadow ) {\n\t\t\tgoBack();\n\t\t}\n\t}, [ shadows, slug, goBack ] );\n\n\tconst [ baseShadows ] = useSetting(\n\t\t`shadow.presets.${ category }`,\n\t\tundefined,\n\t\t'base'\n\t);\n\tconst [ selectedShadow, setSelectedShadow ] = useState( () =>\n\t\t( shadows || [] ).find( ( shadow: any ) => shadow.slug === slug )\n\t);\n\tconst baseSelectedShadow = useMemo(\n\t\t() => ( baseShadows || [] ).find( ( b: any ) => b.slug === slug ),\n\t\t[ baseShadows, slug ]\n\t);\n\tconst [ isConfirmDialogVisible, setIsConfirmDialogVisible ] =\n\t\tuseState( false );\n\tconst [ isRenameModalVisible, setIsRenameModalVisible ] = useState( false );\n\tconst [ shadowName, setShadowName ] = useState< string | undefined >(\n\t\tselectedShadow?.name\n\t);\n\n\tif ( ! category || ! slug ) {\n\t\treturn null;\n\t}\n\n\tconst onShadowChange = ( shadow: string ) => {\n\t\tsetSelectedShadow( { ...selectedShadow, shadow } );\n\t\tconst updatedShadows = shadows.map( ( s: any ) =>\n\t\t\ts.slug === slug ? { ...selectedShadow, shadow } : s\n\t\t);\n\t\tsetShadows( updatedShadows );\n\t};\n\n\tconst onMenuClick = ( action: string ) => {\n\t\tif ( action === 'reset' ) {\n\t\t\tconst updatedShadows = shadows.map( ( s: any ) =>\n\t\t\t\ts.slug === slug ? baseSelectedShadow : s\n\t\t\t);\n\t\t\tsetSelectedShadow( baseSelectedShadow );\n\t\t\tsetShadows( updatedShadows );\n\t\t} else if ( action === 'delete' ) {\n\t\t\tsetIsConfirmDialogVisible( true );\n\t\t} else if ( action === 'rename' ) {\n\t\t\tsetIsRenameModalVisible( true );\n\t\t}\n\t};\n\n\tconst handleShadowDelete = () => {\n\t\tsetShadows( shadows.filter( ( s: any ) => s.slug !== slug ) );\n\t};\n\n\tconst handleShadowRename = ( newName: string | undefined ) => {\n\t\tif ( ! newName ) {\n\t\t\treturn;\n\t\t}\n\t\tconst updatedShadows = shadows.map( ( s: any ) =>\n\t\t\ts.slug === slug ? { ...selectedShadow, name: newName } : s\n\t\t);\n\t\tsetSelectedShadow( { ...selectedShadow, name: newName } );\n\t\tsetShadows( updatedShadows );\n\t};\n\n\treturn ! selectedShadow ? (\n\t\t<ScreenHeader title=\"\" />\n\t) : (\n\t\t<>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<ScreenHeader title={ selectedShadow.name } />\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>\n\t\t\t\t\t\t<Menu>\n\t\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Menu' ) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Menu.Popover>\n\t\t\t\t\t\t\t\t{ ( category === 'custom'\n\t\t\t\t\t\t\t\t\t? customShadowMenuItems\n\t\t\t\t\t\t\t\t\t: presetShadowMenuItems\n\t\t\t\t\t\t\t\t).map( ( item ) => (\n\t\t\t\t\t\t\t\t\t<Menu.Item\n\t\t\t\t\t\t\t\t\t\tkey={ item.action }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tonMenuClick( item.action )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\titem.action === 'reset' &&\n\t\t\t\t\t\t\t\t\t\t\tselectedShadow.shadow ===\n\t\t\t\t\t\t\t\t\t\t\t\tbaseSelectedShadow?.shadow\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t\t</Menu>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t\t<div className=\"global-styles-ui-screen\">\n\t\t\t\t<ShadowsPreview shadow={ selectedShadow.shadow } />\n\t\t\t\t<ShadowEditor\n\t\t\t\t\tshadow={ selectedShadow.shadow }\n\t\t\t\t\tonChange={ onShadowChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{ isConfirmDialogVisible && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen\n\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\thandleShadowDelete();\n\t\t\t\t\t\tsetIsConfirmDialogVisible( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonCancel={ () => {\n\t\t\t\t\t\tsetIsConfirmDialogVisible( false );\n\t\t\t\t\t} }\n\t\t\t\t\tconfirmButtonText={ __( 'Delete' ) }\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t/* translators: %s: Name of the shadow preset. */\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Are you sure you want to delete \"%s\" shadow preset?'\n\t\t\t\t\t\t),\n\t\t\t\t\t\tselectedShadow.name\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t\t{ isRenameModalVisible && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Rename' ) }\n\t\t\t\t\tonRequestClose={ () => setIsRenameModalVisible( false ) }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t<form\n\t\t\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\thandleShadowRename( shadowName );\n\t\t\t\t\t\t\tsetIsRenameModalVisible( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\t\tplaceholder={ __( 'Shadow name' ) }\n\t\t\t\t\t\t\tvalue={ shadowName ?? '' }\n\t\t\t\t\t\t\tonChange={ setShadowName }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer marginBottom={ 6 } />\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tclassName=\"block-editor-shadow-edit-modal__actions\"\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetIsRenameModalVisible( false )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</form>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\ninterface ShadowsPreviewProps {\n\tshadow: string;\n}\n\nfunction ShadowsPreview( { shadow }: ShadowsPreviewProps ) {\n\tconst shadowStyle = {\n\t\tboxShadow: shadow,\n\t};\n\n\treturn (\n\t\t<Spacer marginBottom={ 4 } marginTop={ -2 }>\n\t\t\t<HStack\n\t\t\t\talignment=\"center\"\n\t\t\t\tjustify=\"center\"\n\t\t\t\tclassName=\"global-styles-ui__shadow-preview-panel\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"global-styles-ui__shadow-preview-block\"\n\t\t\t\t\tstyle={ shadowStyle }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</Spacer>\n\t);\n}\n\ninterface ShadowEditorProps {\n\tshadow: string;\n\tonChange: ( shadow: string ) => void;\n}\n\nfunction ShadowEditor( { shadow, onChange }: ShadowEditorProps ) {\n\tconst addShadowButtonRef = useRef< HTMLButtonElement >( null );\n\tconst shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );\n\n\tconst onChangeShadowPart = ( index: number, part: string ) => {\n\t\tconst newShadowParts = [ ...shadowParts ];\n\t\tnewShadowParts[ index ] = part;\n\t\tonChange( newShadowParts.join( ', ' ) );\n\t};\n\n\tconst onAddShadowPart = () => {\n\t\tonChange( [ ...shadowParts, defaultShadow ].join( ', ' ) );\n\t};\n\n\tconst onRemoveShadowPart = ( index: number ) => {\n\t\tonChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) );\n\t\taddShadowButtonRef.current?.focus();\n\t};\n\n\treturn (\n\t\t<>\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 }>{ __( 'Shadows' ) }</Subtitle>\n\t\t\t\t\t<FlexItem className=\"global-styles-ui__shadows-panel__options-container\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={ __( 'Add shadow' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonAddShadowPart();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tref={ addShadowButtonRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t\t<Spacer />\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t{ shadowParts.map( ( part, index ) => (\n\t\t\t\t\t<ShadowItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tshadow={ part }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tonChangeShadowPart( index, value )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcanRemove={ shadowParts.length > 1 }\n\t\t\t\t\t\tonRemove={ () => onRemoveShadowPart( index ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\ninterface ShadowItemProps {\n\tshadow: string;\n\tonChange: ( shadow: string ) => void;\n\tcanRemove: boolean;\n\tonRemove: () => void;\n}\n\nfunction ShadowItem( {\n\tshadow,\n\tonChange,\n\tcanRemove,\n\tonRemove,\n}: ShadowItemProps ) {\n\tconst popoverProps = {\n\t\tplacement: 'left-start' as const,\n\t\toffset: 36,\n\t\tshift: true,\n\t};\n\tconst shadowObj = useMemo(\n\t\t() => shadowStringToObject( shadow ),\n\t\t[ shadow ]\n\t);\n\tconst onShadowChange = ( newShadow: any ) => {\n\t\tonChange( shadowObjectToString( newShadow ) );\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName=\"global-styles-ui__shadow-editor__dropdown\"\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst toggleProps = {\n\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'global-styles-ui__shadow-editor__dropdown-toggle',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t),\n\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t};\n\t\t\t\tconst removeButtonProps = {\n\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonRemove();\n\t\t\t\t\t},\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'global-styles-ui__shadow-editor__remove-button',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t),\n\t\t\t\t\tlabel: __( 'Remove shadow' ),\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\ticon={ shadowIcon }\n\t\t\t\t\t\t\t{ ...toggleProps }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ shadowObj.inset\n\t\t\t\t\t\t\t\t? __( 'Inner shadow' )\n\t\t\t\t\t\t\t\t: __( 'Drop shadow' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t{ canRemove && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\t\t{ ...removeButtonProps }\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\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t\tclassName=\"global-styles-ui__shadow-editor__dropdown-content\"\n\t\t\t\t>\n\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\tshadowObj={ shadowObj }\n\t\t\t\t\t\tonChange={ onShadowChange }\n\t\t\t\t\t/>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\ninterface ShadowPopoverProps {\n\tshadowObj: any;\n\tonChange: ( shadow: any ) => void;\n}\n\nfunction ShadowPopover( { shadowObj, onChange }: ShadowPopoverProps ) {\n\tconst __experimentalIsRenderedInSidebar = true;\n\tconst enableAlpha = true;\n\n\tconst onShadowChange = ( key: string, value: any ) => {\n\t\tconst newShadow = {\n\t\t\t...shadowObj,\n\t\t\t[ key ]: value,\n\t\t};\n\t\tonChange( newShadow );\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 4 } className=\"global-styles-ui__shadow-editor-panel\">\n\t\t\t<ColorPalette\n\t\t\t\tclearable={ false }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tvalue={ shadowObj.color }\n\t\t\t\tonChange={ ( value ) => onShadowChange( 'color', value ) }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Shadow Type' ) }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ shadowObj.inset ? 'inset' : 'outset' }\n\t\t\t\tisBlock\n\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\tonShadowChange( 'inset', value === 'inset' )\n\t\t\t\t}\n\t\t\t\thideLabelFromVision\n\t\t\t\t__next40pxDefaultSize\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"outset\"\n\t\t\t\t\tlabel={ __( 'Outset' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"inset\"\n\t\t\t\t\tlabel={ __( 'Inset' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t<Grid columns={ 2 } gap={ 4 }>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'X Position' ) }\n\t\t\t\t\tvalue={ shadowObj.x }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'x', value ) }\n\t\t\t\t/>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'Y Position' ) }\n\t\t\t\t\tvalue={ shadowObj.y }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'y', value ) }\n\t\t\t\t/>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'Blur' ) }\n\t\t\t\t\tvalue={ shadowObj.blur }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'blur', value ) }\n\t\t\t\t/>\n\t\t\t\t<ShadowInputControl\n\t\t\t\t\tlabel={ __( 'Spread' ) }\n\t\t\t\t\tvalue={ shadowObj.spread }\n\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'spread', value ) }\n\t\t\t\t/>\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n\ninterface ShadowInputControlProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: ( value: string ) => void;\n}\n\nfunction ShadowInputControl( {\n\tlabel,\n\tvalue,\n\tonChange,\n}: ShadowInputControlProps ) {\n\tconst onValueChange = ( next: string | undefined ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : '0px';\n\t\tonChange( nextValue );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\tlabel={ label }\n\t\t\t__next40pxDefaultSize\n\t\t\tvalue={ value }\n\t\t\tonChange={ onValueChange }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/shadows-panel.tsx
|
|
2
2
|
import {
|
|
3
3
|
__experimentalHStack as HStack,
|
|
4
4
|
__experimentalVStack as VStack,
|
|
@@ -23,8 +23,9 @@ import { getNewIndexFromPresets } from "./utils";
|
|
|
23
23
|
import ConfirmResetShadowDialog from "./confirm-reset-shadow-dialog";
|
|
24
24
|
import { useSetting } from "./hooks";
|
|
25
25
|
import { unlock } from "./lock-unlock";
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
27
|
+
var { Menu } = unlock(componentsPrivateApis);
|
|
28
|
+
var defaultShadow = "6px 6px 9px rgba(0, 0, 0, 0.2)";
|
|
28
29
|
function ShadowsPanel() {
|
|
29
30
|
const [defaultShadows] = useSetting("shadow.presets.default");
|
|
30
31
|
const [defaultShadowsEnabled] = useSetting("shadow.defaultPresets");
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/shadows-panel.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalItemGroup as ItemGroup,\n\tButton,\n\tFlexItem,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport {\n\tplus,\n\tIcon,\n\tchevronLeft,\n\tchevronRight,\n\tmoreVertical,\n} from '@wordpress/icons';\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { ScreenHeader } from './screen-header';\nimport { getNewIndexFromPresets } from './utils';\nimport ConfirmResetShadowDialog from './confirm-reset-shadow-dialog';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nexport const defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';\n\nexport default function ShadowsPanel() {\n\tconst [ defaultShadows ] = useSetting( 'shadow.presets.default' );\n\tconst [ defaultShadowsEnabled ] = useSetting( 'shadow.defaultPresets' );\n\tconst [ themeShadows ] = useSetting( 'shadow.presets.theme' );\n\tconst [ customShadows, setCustomShadows ] = useSetting(\n\t\t'shadow.presets.custom'\n\t);\n\n\tconst onCreateShadow = ( shadow: any ) => {\n\t\tsetCustomShadows( [ ...( customShadows || [] ), shadow ] );\n\t};\n\n\tconst handleResetShadows = () => {\n\t\tsetCustomShadows( [] );\n\t};\n\n\tconst [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );\n\n\tconst toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );\n\n\treturn (\n\t\t<>\n\t\t\t{ isResetDialogOpen && (\n\t\t\t\t<ConfirmResetShadowDialog\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Are you sure you want to remove all custom shadows?'\n\t\t\t\t\t) }\n\t\t\t\t\tconfirmButtonText={ __( 'Remove' ) }\n\t\t\t\t\tisOpen={ isResetDialogOpen }\n\t\t\t\t\ttoggleOpen={ toggleResetDialog }\n\t\t\t\t\tonConfirm={ handleResetShadows }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Shadows' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Manage and create shadow styles for use across the site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"global-styles-ui-screen\">\n\t\t\t\t<VStack\n\t\t\t\t\tclassName=\"global-styles-ui__shadows-panel\"\n\t\t\t\t\tspacing={ 7 }\n\t\t\t\t>\n\t\t\t\t\t{ defaultShadowsEnabled && (\n\t\t\t\t\t\t<ShadowList\n\t\t\t\t\t\t\tlabel={ __( 'Default' ) }\n\t\t\t\t\t\t\tshadows={ defaultShadows || [] }\n\t\t\t\t\t\t\tcategory=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ themeShadows && themeShadows.length > 0 && (\n\t\t\t\t\t\t<ShadowList\n\t\t\t\t\t\t\tlabel={ __( 'Theme' ) }\n\t\t\t\t\t\t\tshadows={ themeShadows || [] }\n\t\t\t\t\t\t\tcategory=\"theme\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<ShadowList\n\t\t\t\t\t\tlabel={ __( 'Custom' ) }\n\t\t\t\t\t\tshadows={ customShadows || [] }\n\t\t\t\t\t\tcategory=\"custom\"\n\t\t\t\t\t\tcanCreate\n\t\t\t\t\t\tonCreate={ onCreateShadow }\n\t\t\t\t\t\tonReset={ toggleResetDialog }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\ninterface ShadowListProps {\n\tlabel: string;\n\tshadows: any[];\n\tcategory: string;\n\tcanCreate?: boolean;\n\tonCreate?: ( shadow: any ) => void;\n\tonReset?: () => void;\n}\n\nfunction ShadowList( {\n\tlabel,\n\tshadows,\n\tcategory,\n\tcanCreate,\n\tonCreate,\n\tonReset,\n}: ShadowListProps ) {\n\tconst handleAddShadow = () => {\n\t\tconst newIndex = getNewIndexFromPresets( shadows, 'shadow-' );\n\t\tonCreate?.( {\n\t\t\tname: sprintf(\n\t\t\t\t/* translators: %d: is an index for a preset */\n\t\t\t\t__( 'Shadow %d' ),\n\t\t\t\tnewIndex\n\t\t\t),\n\t\t\tshadow: defaultShadow,\n\t\t\tslug: `shadow-${ newIndex }`,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<VStack spacing={ 2 }>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<Subtitle level={ 3 }>{ label }</Subtitle>\n\t\t\t\t<FlexItem className=\"global-styles-ui__shadows-panel__options-container\">\n\t\t\t\t\t{ canCreate && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={ __( 'Add shadow' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\thandleAddShadow();\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\t\t{ !! shadows?.length && category === 'custom' && (\n\t\t\t\t\t\t<Menu>\n\t\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Shadow options' ) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Menu.Popover>\n\t\t\t\t\t\t\t\t<Menu.Item onClick={ onReset }>\n\t\t\t\t\t\t\t\t\t<Menu.ItemLabel>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Remove all custom shadows' ) }\n\t\t\t\t\t\t\t\t\t</Menu.ItemLabel>\n\t\t\t\t\t\t\t\t</Menu.Item>\n\t\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t\t</Menu>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t\t{ shadows.length > 0 && (\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ shadows.map( ( shadow ) => (\n\t\t\t\t\t\t<ShadowItem\n\t\t\t\t\t\t\tkey={ shadow.slug }\n\t\t\t\t\t\t\tshadow={ shadow }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</ItemGroup>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\ninterface ShadowItemProps {\n\tshadow: any;\n\tcategory: string;\n}\n\nfunction ShadowItem( { shadow, category }: ShadowItemProps ) {\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ `/shadows/edit/${ category }/${ shadow.slug }` }\n\t\t>\n\t\t\t<HStack>\n\t\t\t\t<FlexItem>{ shadow.name }</FlexItem>\n\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/size-control/index.tsx
|
|
2
2
|
import {
|
|
3
3
|
BaseControl,
|
|
4
4
|
RangeControl,
|
|
@@ -10,7 +10,8 @@ import {
|
|
|
10
10
|
__experimentalUnitControl as UnitControl,
|
|
11
11
|
__experimentalSpacer as Spacer
|
|
12
12
|
} from "@wordpress/components";
|
|
13
|
-
|
|
13
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
+
var DEFAULT_UNITS = ["px", "em", "rem", "vw", "vh"];
|
|
14
15
|
function SizeControl({
|
|
15
16
|
// Do not allow manipulation of margin bottom
|
|
16
17
|
__nextHasNoMarginBottom,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/size-control/index.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tRangeControl,\n\tFlex,\n\tFlexItem,\n\tuseBaseControlProps,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nconst DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\ninterface SizeControlProps {\n\tvalue?: string;\n\tonChange?: ( value: string | undefined ) => void;\n\tfallbackValue?: number;\n\tdisabled?: boolean;\n\tlabel?: string;\n\t__nextHasNoMarginBottom?: boolean;\n}\n\nfunction SizeControl( {\n\t// Do not allow manipulation of margin bottom\n\t__nextHasNoMarginBottom,\n\t...props\n}: SizeControlProps ) {\n\tconst { baseControlProps } = useBaseControlProps( props );\n\tconst { value, onChange, fallbackValue, disabled, label } = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: DEFAULT_UNITS,\n\t} );\n\n\tconst [ valueQuantity, valueUnit = 'px' ] =\n\t\tparseQuantityAndUnitFromRawValue( value, units );\n\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );\n\n\t// Receives the new value from the UnitControl component as a string containing the value and unit.\n\tconst handleUnitControlChange = ( newValue: string | undefined ) => {\n\t\tonChange?.( newValue );\n\t};\n\n\t// Receives the new value from the RangeControl component as a number.\n\tconst handleRangeControlChange = ( newValue: number | undefined ) => {\n\t\tif ( newValue !== undefined ) {\n\t\t\tonChange?.( newValue + valueUnit );\n\t\t} else {\n\t\t\tonChange?.( undefined );\n\t\t}\n\t};\n\n\treturn (\n\t\t<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>\n\t\t\t<Flex>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ handleUnitControlChange }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\tinitialPosition={ fallbackValue }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleRangeControlChange }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport { SizeControl };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gCAAgC;AAAA,EAChC,kDAAkD;AAAA,EAClD,6BAA6B;AAAA,EAC7B,wBAAwB;AAAA,OAClB;AA+CJ,SAEE,KAFF;AA7CH,IAAM,gBAAgB,CAAE,MAAM,MAAM,OAAO,MAAM,IAAK;AAWtD,SAAS,YAAa;AAAA;AAAA,EAErB;AAAA,EACA,GAAG;AACJ,GAAsB;AACrB,QAAM,EAAE,iBAAiB,IAAI,oBAAqB,KAAM;AACxD,QAAM,EAAE,OAAO,UAAU,eAAe,UAAU,MAAM,IAAI;AAE5D,QAAM,QAAQ,eAAgB;AAAA,IAC7B,gBAAgB;AAAA,EACjB,CAAE;AAEF,QAAM,CAAE,eAAe,YAAY,IAAK,IACvC,iCAAkC,OAAO,KAAM;AAEhD,QAAM,sBACL,CAAC,CAAE,aAAa,CAAE,MAAM,OAAO,MAAM,IAAK,EAAE,SAAU,SAAU;AAGjE,QAAM,0BAA0B,CAAE,aAAkC;AACnE,eAAY,QAAS;AAAA,EACtB;AAGA,QAAM,2BAA2B,CAAE,aAAkC;AACpE,QAAK,aAAa,QAAY;AAC7B,iBAAY,WAAW,SAAU;AAAA,IAClC,OAAO;AACN,iBAAY,MAAU;AAAA,IACvB;AAAA,EACD;AAEA,SACC,oBAAC,eAAc,GAAG,kBAAmB,yBAAuB,MAC3D,+BAAC,QACA;AAAA,wBAAC,YAAS,SAAO,MAChB;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB;AAAA,QACA,qBAAmB;AAAA,QACnB;AAAA,QACA,UAAW;AAAA,QACX;AAAA,QACA,KAAM;AAAA,QACN;AAAA;AAAA,IACD,GACD;AAAA,IACA,oBAAC,YAAS,SAAO,MAChB,8BAAC,UAAO,SAAU,GAAI,cAAe,GACpC;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,yBAAuB;AAAA,QACvB;AAAA,QACA,qBAAmB;AAAA,QACnB,OAAQ;AAAA,QACR,iBAAkB;AAAA,QAClB,gBAAiB;AAAA,QACjB,UAAW;AAAA,QACX,KAAM;AAAA,QACN,KAAM,sBAAsB,KAAK;AAAA,QACjC,MAAO,sBAAsB,MAAM;AAAA,QACnC;AAAA;AAAA,IACD,GACD,GACD;AAAA,KACD,GACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/style-variations-container.tsx
|
|
2
2
|
import { store as coreStore } from "@wordpress/core-data";
|
|
3
3
|
import { useSelect } from "@wordpress/data";
|
|
4
4
|
import { useContext, useMemo } from "@wordpress/element";
|
|
@@ -8,6 +8,7 @@ import PreviewStyles from "./preview-styles";
|
|
|
8
8
|
import Variation from "./variations/variation";
|
|
9
9
|
import { GlobalStylesContext } from "./context";
|
|
10
10
|
import { isVariationWithProperties } from "./utils";
|
|
11
|
+
import { jsx } from "react/jsx-runtime";
|
|
11
12
|
function StyleVariationsContainer({
|
|
12
13
|
gap = 2
|
|
13
14
|
}) {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/style-variations-container.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useMemo } from '@wordpress/element';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport type {\n\tGlobalStylesConfig,\n\tStyleVariation,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport PreviewStyles from './preview-styles';\nimport Variation from './variations/variation';\nimport { GlobalStylesContext } from './context';\nimport { isVariationWithProperties } from './utils';\n\ninterface StyleVariationsContainerProps {\n\tgap?: number;\n}\n\nfunction StyleVariationsContainer( {\n\tgap = 2,\n}: StyleVariationsContainerProps ) {\n\tconst { user } = useContext( GlobalStylesContext );\n\tconst userStyles = user?.styles;\n\n\tconst variations = useSelect( ( select ) => {\n\t\tconst result =\n\t\t\tselect(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\n\t\t// The API might return null or an array\n\t\treturn Array.isArray( result )\n\t\t\t? ( result as GlobalStylesConfig[] )\n\t\t\t: undefined;\n\t}, [] );\n\n\t// Filter out variations that are color or typography variations.\n\tconst fullStyleVariations = variations?.filter(\n\t\t( variation: GlobalStylesConfig ) => {\n\t\t\treturn (\n\t\t\t\t! isVariationWithProperties( variation, [ 'color' ] ) &&\n\t\t\t\t! isVariationWithProperties( variation, [\n\t\t\t\t\t'typography',\n\t\t\t\t\t'spacing',\n\t\t\t\t] )\n\t\t\t);\n\t\t}\n\t);\n\n\tconst themeVariations = useMemo( () => {\n\t\tconst withEmptyVariation: StyleVariation[] = [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...( fullStyleVariations ?? [] ),\n\t\t];\n\t\treturn [\n\t\t\t...withEmptyVariation.map( ( variation: StyleVariation ) => {\n\t\t\t\tconst blockStyles = variation?.styles?.blocks\n\t\t\t\t\t? { ...variation.styles.blocks }\n\t\t\t\t\t: {};\n\n\t\t\t\t// We need to copy any user custom CSS to the variation to prevent it being lost\n\t\t\t\t// when switching variations.\n\t\t\t\tif ( userStyles?.blocks ) {\n\t\t\t\t\tObject.keys( userStyles.blocks ).forEach( ( blockName ) => {\n\t\t\t\t\t\t// First get any block specific custom CSS from the current user styles and merge with any custom CSS for\n\t\t\t\t\t\t// that block in the variation.\n\t\t\t\t\t\tif ( userStyles.blocks?.[ blockName ]?.css ) {\n\t\t\t\t\t\t\tconst variationBlockStyles =\n\t\t\t\t\t\t\t\tblockStyles[ blockName ] || {};\n\t\t\t\t\t\t\tconst customCSS = {\n\t\t\t\t\t\t\t\tcss: `${\n\t\t\t\t\t\t\t\t\tblockStyles[ blockName ]?.css || ''\n\t\t\t\t\t\t\t\t} ${\n\t\t\t\t\t\t\t\t\tuserStyles.blocks?.[\n\t\t\t\t\t\t\t\t\t\tblockName\n\t\t\t\t\t\t\t\t\t]?.css?.trim() || ''\n\t\t\t\t\t\t\t\t}`,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tblockStyles[ blockName ] = {\n\t\t\t\t\t\t\t\t...variationBlockStyles,\n\t\t\t\t\t\t\t\t...customCSS,\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\t}\n\t\t\t\t// Now merge any global custom CSS from current user styles with global custom CSS in the variation.\n\t\t\t\tconst css =\n\t\t\t\t\tuserStyles?.css || variation.styles?.css\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tcss: `${ variation.styles?.css || '' } ${\n\t\t\t\t\t\t\t\t\tuserStyles?.css || ''\n\t\t\t\t\t\t\t\t}`,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: {};\n\n\t\t\t\tconst blocks =\n\t\t\t\t\tObject.keys( blockStyles ).length > 0\n\t\t\t\t\t\t? { blocks: blockStyles }\n\t\t\t\t\t\t: {};\n\n\t\t\t\tconst styles = {\n\t\t\t\t\t...variation.styles,\n\t\t\t\t\t...css,\n\t\t\t\t\t...blocks,\n\t\t\t\t};\n\t\t\t\treturn {\n\t\t\t\t\t...variation,\n\t\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\t\tstyles,\n\t\t\t\t};\n\t\t\t} ),\n\t\t];\n\t}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );\n\n\tif ( ! fullStyleVariations || fullStyleVariations.length < 1 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Grid\n\t\t\tcolumns={ 2 }\n\t\t\tclassName=\"global-styles-ui-style-variations-container\"\n\t\t\tgap={ gap }\n\t\t>\n\t\t\t{ themeVariations.map(\n\t\t\t\t( variation: StyleVariation, index: number ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ ( isFocused: boolean ) => (\n\t\t\t\t\t\t\t<PreviewStyles\n\t\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\t\twithHoverView\n\t\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Variation>\n\t\t\t\t)\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport default StyleVariationsContainer;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/style-variations-content.tsx
|
|
2
2
|
import { __ } from "@wordpress/i18n";
|
|
3
3
|
import { __experimentalVStack as VStack } from "@wordpress/components";
|
|
4
4
|
import StyleVariationsContainer from "./style-variations-container";
|
|
5
5
|
import TypographyVariations from "./variations/variations-typography";
|
|
6
6
|
import ColorVariations from "./variations/variations-color";
|
|
7
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
8
|
function StyleVariationsContent() {
|
|
8
9
|
const gap = 3;
|
|
9
10
|
return /* @__PURE__ */ jsxs(VStack, { spacing: 10, className: "global-styles-ui-variation-container", children: [
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/style-variations-content.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport StyleVariationsContainer from './style-variations-container';\nimport TypographyVariations from './variations/variations-typography';\nimport ColorVariations from './variations/variations-color';\n\nexport function StyleVariationsContent() {\n\tconst gap = 3;\n\n\treturn (\n\t\t<VStack spacing={ 10 } className=\"global-styles-ui-variation-container\">\n\t\t\t<StyleVariationsContainer gap={ gap } />\n\t\t\t<ColorVariations title={ __( 'Color Variations' ) } gap={ gap } />\n\t\t\t<TypographyVariations title={ __( 'Typography' ) } gap={ gap } />\n\t\t</VStack>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,wBAAwB,cAAc;AAK/C,OAAO,8BAA8B;AACrC,OAAO,0BAA0B;AACjC,OAAO,qBAAqB;AAM1B,SACC,KADD;AAJK,SAAS,yBAAyB;AACxC,QAAM,MAAM;AAEZ,SACC,qBAAC,UAAO,SAAU,IAAK,WAAU,wCAChC;AAAA,wBAAC,4BAAyB,KAAY;AAAA,IACtC,oBAAC,mBAAgB,OAAQ,GAAI,kBAAmB,GAAI,KAAY;AAAA,IAChE,oBAAC,wBAAqB,OAAQ,GAAI,YAAa,GAAI,KAAY;AAAA,KAChE;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
// packages/global-styles-ui/src/style-variations.tsx
|
|
1
2
|
import StyleVariationsContainer from "./style-variations-container";
|
|
2
3
|
import { withGlobalStylesProvider } from "./with-global-styles-provider";
|
|
3
|
-
|
|
4
|
+
var StyleVariations = withGlobalStylesProvider(StyleVariationsContainer);
|
|
4
5
|
export {
|
|
5
6
|
StyleVariations
|
|
6
7
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/style-variations.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport StyleVariationsContainer from './style-variations-container';\nimport { withGlobalStylesProvider } from './with-global-styles-provider';\n\nexport interface StyleVariationsProps {\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( config: GlobalStylesConfig ) => void;\n\tgap?: number;\n}\n\n/**\n * Render Style Variations.\n *\n * @example\n * ```tsx\n * <StyleVariations\n * value={userConfig}\n * baseValue={baseConfig}\n * onChange={setUserConfig}\n * gap={3}\n * />\n * ```\n */\nexport const StyleVariations: React.ComponentType< StyleVariationsProps > =\n\twithGlobalStylesProvider( StyleVariationsContainer );\n"],
|
|
5
|
-
"mappings": "AAQA,OAAO,8BAA8B;AACrC,SAAS,gCAAgC;AAsBlC,
|
|
5
|
+
"mappings": ";AAQA,OAAO,8BAA8B;AACrC,SAAS,gCAAgC;AAsBlC,IAAM,kBACZ,yBAA0B,wBAAyB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build-module/subtitle.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/subtitle.tsx
|
|
2
2
|
import { __experimentalHeading as Heading } from "@wordpress/components";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
4
|
function Subtitle({ children, level = 2 }) {
|
|
4
5
|
return /* @__PURE__ */ jsx(Heading, { className: "global-styles-ui-subtitle", level, children });
|
|
5
6
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/subtitle.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHeading as Heading } from '@wordpress/components';\n\ninterface SubtitleProps {\n\tchildren: React.ReactNode;\n\tlevel?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport function Subtitle( { children, level = 2 }: SubtitleProps ) {\n\treturn (\n\t\t<Heading className=\"global-styles-ui-subtitle\" level={ level }>\n\t\t\t{ children }\n\t\t</Heading>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,yBAAyB,eAAe;AAS/C;AAFK,SAAS,SAAU,EAAE,UAAU,QAAQ,EAAE,GAAmB;AAClE,SACC,oBAAC,WAAQ,WAAU,6BAA4B,OAC5C,UACH;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/typography-elements.tsx
|
|
2
2
|
import { __ } from "@wordpress/i18n";
|
|
3
3
|
import {
|
|
4
4
|
__experimentalItemGroup as ItemGroup,
|
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
import { NavigationButtonAsItem } from "./navigation-button";
|
|
10
10
|
import { Subtitle } from "./subtitle";
|
|
11
11
|
import { useStyle } from "./hooks";
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
13
|
function ElementItem({ parentMenu, element, label }) {
|
|
13
14
|
const prefix = element === "text" || !element ? "" : `elements.${element}.`;
|
|
14
15
|
const extraStyles = element === "link" ? {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/typography-elements.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } 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';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { Subtitle } from './subtitle';\nimport { useStyle } from './hooks';\n\ninterface ElementItemProps {\n\tparentMenu: string;\n\telement: string;\n\tlabel: string;\n}\n\nfunction ElementItem( { parentMenu, element, label }: ElementItemProps ) {\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t }\n\t\t\t: {};\n\n\tconst [ fontFamily ] = useStyle< string >(\n\t\tprefix + 'typography.fontFamily'\n\t);\n\tconst [ fontStyle ] = useStyle< string >( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useStyle< string >(\n\t\tprefix + 'typography.fontWeight'\n\t);\n\tconst [ backgroundColor ] = useStyle< string >(\n\t\tprefix + 'color.background'\n\t);\n\tconst [ fallbackBackgroundColor ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( prefix + 'color.gradient' );\n\tconst [ color ] = useStyle< string >( prefix + 'color.text' );\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"global-styles-ui-screen-typography__indicator\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\tbackgroundColor ??\n\t\t\t\t\t\t\tfallbackBackgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TypographyElements() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"link\"\n\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"heading\"\n\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"caption\"\n\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"button\"\n\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t/>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default TypographyElements;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU;AACnB;AAAA,EACC,2BAA2B;AAAA,EAC3B,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,OACM;AAKP,SAAS,8BAA8B;AACvC,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAmCtB,SACC,KADD;AA3BH,SAAS,YAAa,EAAE,YAAY,SAAS,MAAM,GAAsB;AACxE,QAAM,SACL,YAAY,UAAU,CAAE,UAAU,KAAK,YAAa,OAAQ;AAC7D,QAAM,cACL,YAAY,SACT;AAAA,IACA,gBAAgB;AAAA,EAChB,IACA,CAAC;AAEL,QAAM,CAAE,UAAW,IAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,SAAU,IAAI,SAAoB,SAAS,sBAAuB;AAC1E,QAAM,CAAE,UAAW,IAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,eAAgB,IAAI;AAAA,IAC3B,SAAS;AAAA,EACV;AACA,QAAM,CAAE,uBAAwB,IAC/B,SAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,IAAI,SAAoB,SAAS,gBAAiB;AACxE,QAAM,CAAE,KAAM,IAAI,SAAoB,SAAS,YAAa;AAE5D,SACC,oBAAC,0BAAuB,MAAO,aAAa,iBAAiB,SAC5D,+BAAC,UAAO,SAAQ,cACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAQ;AAAA,UACP,YAAY,cAAc;AAAA,UAC1B,YACC,iBACA,mBACA;AAAA,UACD;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACJ;AAAA,QAEE,aAAI,IAAK;AAAA;AAAA,IACZ;AAAA,IACA,oBAAC,YAAW,iBAAO;AAAA,KACpB,GACD;AAEF;AAEA,SAAS,qBAAqB;AAC7B,QAAM,aAAa;AAEnB,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,YAAS,OAAQ,GAAM,aAAI,UAAW,GAAG;AAAA,IAC1C,qBAAC,aAAU,YAAU,MAAC,aAAW,MAChC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,MAAO;AAAA;AAAA,MACpB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,OAAQ;AAAA;AAAA,MACrB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,OAAQ,GAAI,SAAU;AAAA;AAAA,MACvB;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/typography-example.tsx
|
|
2
2
|
import { useContext } from "@wordpress/element";
|
|
3
3
|
import { __unstableMotion as motion } from "@wordpress/components";
|
|
4
4
|
import { _x } from "@wordpress/i18n";
|
|
@@ -6,6 +6,7 @@ import { GlobalStylesContext } from "./context";
|
|
|
6
6
|
import { getFamilyPreviewStyle } from "./font-library-modal/utils/preview-styles";
|
|
7
7
|
import { getFontFamilies } from "./utils";
|
|
8
8
|
import { useStyle } from "./hooks";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
10
|
function PreviewTypography({
|
|
10
11
|
fontSize,
|
|
11
12
|
variation
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/typography-example.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\nimport { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';\nimport { getFontFamilies } from './utils';\nimport { useStyle } from './hooks';\n\ninterface TypographyExampleProps {\n\tfontSize?: number;\n\tvariation?: any;\n}\n\nexport default function PreviewTypography( {\n\tfontSize,\n\tvariation,\n}: TypographyExampleProps ) {\n\tconst { base } = useContext( GlobalStylesContext );\n\tlet config = base;\n\tif ( variation ) {\n\t\tconfig = { ...base, ...variation };\n\t}\n\n\tconst [ textColor ] = useStyle( 'color.text' );\n\n\tconst [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );\n\tconst bodyPreviewStyle: React.CSSProperties = bodyFontFamilies\n\t\t? getFamilyPreviewStyle( bodyFontFamilies )\n\t\t: {};\n\tconst headingPreviewStyle: React.CSSProperties = headingFontFamilies\n\t\t? getFamilyPreviewStyle( headingFontFamilies )\n\t\t: {};\n\n\tif ( textColor ) {\n\t\tbodyPreviewStyle.color = textColor;\n\t\theadingPreviewStyle.color = textColor;\n\t}\n\n\tif ( fontSize ) {\n\t\tbodyPreviewStyle.fontSize = fontSize;\n\t\theadingPreviewStyle.fontSize = fontSize;\n\t}\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={ {\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tscale: 0.1,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\ttransition={ {\n\t\t\t\tdelay: 0.3,\n\t\t\t\ttype: 'tween',\n\t\t\t} }\n\t\t\tstyle={ {\n\t\t\t\ttextAlign: 'center',\n\t\t\t\tlineHeight: 1,\n\t\t\t} }\n\t\t>\n\t\t\t<span style={ headingPreviewStyle }>\n\t\t\t\t{ _x( 'A', 'Uppercase letter A' ) }\n\t\t\t</span>\n\t\t\t<span style={ bodyPreviewStyle }>\n\t\t\t\t{ _x( 'a', 'Lowercase letter A' ) }\n\t\t\t</span>\n\t\t</motion.div>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,cAAc;AAC3C,SAAS,UAAU;AAKnB,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAsCvB,SAkBC,KAlBD;AA/Ba,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,EAAE,KAAK,IAAI,WAAY,mBAAoB;AACjD,MAAI,SAAS;AACb,MAAK,WAAY;AAChB,aAAS,EAAE,GAAG,MAAM,GAAG,UAAU;AAAA,EAClC;AAEA,QAAM,CAAE,SAAU,IAAI,SAAU,YAAa;AAE7C,QAAM,CAAE,kBAAkB,mBAAoB,IAAI,gBAAiB,MAAO;AAC1E,QAAM,mBAAwC,mBAC3C,sBAAuB,gBAAiB,IACxC,CAAC;AACJ,QAAM,sBAA2C,sBAC9C,sBAAuB,mBAAoB,IAC3C,CAAC;AAEJ,MAAK,WAAY;AAChB,qBAAiB,QAAQ;AACzB,wBAAoB,QAAQ;AAAA,EAC7B;AAEA,MAAK,UAAW;AACf,qBAAiB,WAAW;AAC5B,wBAAoB,WAAW;AAAA,EAChC;AAEA,SACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,YAAa;AAAA,QACZ,OAAO;AAAA,QACP,MAAM;AAAA,MACP;AAAA,MACA,OAAQ;AAAA,QACP,WAAW;AAAA,QACX,YAAY;AAAA,MACb;AAAA,MAEA;AAAA,4BAAC,UAAK,OAAQ,qBACX,aAAI,KAAK,oBAAqB,GACjC;AAAA,QACA,oBAAC,UAAK,OAAQ,kBACX,aAAI,KAAK,oBAAqB,GACjC;AAAA;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/typography-panel.tsx
|
|
2
2
|
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
|
|
3
3
|
import { useStyle, useSetting } from "./hooks";
|
|
4
4
|
import { unlock } from "./lock-unlock";
|
|
5
|
-
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
var { useSettingsForBlockElement, TypographyPanel: StylesTypographyPanel } = unlock(blockEditorPrivateApis);
|
|
6
7
|
function TypographyPanel({
|
|
7
8
|
element,
|
|
8
9
|
headingLevel
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/typography-panel.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, TypographyPanel: StylesTypographyPanel } =\n\tunlock( blockEditorPrivateApis );\n\ninterface TypographyPanelProps {\n\telement: string;\n\theadingLevel: string;\n}\n\nexport default function TypographyPanel( {\n\telement,\n\theadingLevel,\n}: TypographyPanelProps ) {\n\tlet prefixParts: string[] = [];\n\tif ( element === 'heading' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', headingLevel ] );\n\t} else if ( element && element !== 'text' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', element ] );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useStyle( prefix, '', 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\tprefix,\n\t\t'',\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ rawSettings ] = useSetting( '' );\n\tconst usedElement = element === 'heading' ? headingLevel : element;\n\tconst settings = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tundefined,\n\t\tusedElement\n\t);\n\n\treturn (\n\t\t<StylesTypographyPanel\n\t\t\tinheritedValue={ inheritedStyle }\n\t\t\tvalue={ style }\n\t\t\tonChange={ setStyle }\n\t\t\tsettings={ settings }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAIA,SAAS,eAAe,8BAA8B;AAKtD,SAAS,UAAU,kBAAkB;AACrC,SAAS,cAAc;AAsCrB;AApCF,IAAM,EAAE,4BAA4B,iBAAiB,sBAAsB,IAC1E,OAAQ,sBAAuB;AAOjB,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AACD,GAA0B;AACzB,MAAI,cAAwB,CAAC;AAC7B,MAAK,YAAY,WAAY;AAC5B,kBAAc,YAAY,OAAQ,CAAE,YAAY,YAAa,CAAE;AAAA,EAChE,WAAY,WAAW,YAAY,QAAS;AAC3C,kBAAc,YAAY,OAAQ,CAAE,YAAY,OAAQ,CAAE;AAAA,EAC3D;AACA,QAAM,SAAS,YAAY,KAAM,GAAI;AAErC,QAAM,CAAE,KAAM,IAAI,SAAU,QAAQ,IAAI,QAAQ,KAAM;AACtD,QAAM,CAAE,gBAAgB,QAAS,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,WAAY,IAAI,WAAY,EAAG;AACvC,QAAM,cAAc,YAAY,YAAY,eAAe;AAC3D,QAAM,WAAW;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,OAAQ;AAAA,MACR,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/typography-preview.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\ninterface TypographyPreviewProps {\n\tname?: string;\n\telement: string;\n\theadingLevel: string;\n}\n\nexport default function TypographyPreview( {\n\tname,\n\telement,\n\theadingLevel,\n}: TypographyPreviewProps ) {\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ fallbackBackgroundColor ] = useStyle( 'color.background' );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\tconst [ fontSize ] = useStyle( prefix + 'typography.fontSize', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t }\n\t\t\t: {};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"global-styles-ui-typography-preview\"\n\t\t\tstyle={ {\n\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\tbackground:\n\t\t\t\t\tgradientValue ?? backgroundColor ?? fallbackBackgroundColor,\n\t\t\t\tcolor,\n\t\t\t\tfontSize,\n\t\t\t\tfontStyle,\n\t\t\t\tfontWeight,\n\t\t\t\tletterSpacing,\n\t\t\t\t...extraStyles,\n\t\t\t} }\n\t\t>\n\t\t\tAa\n\t\t</div>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,gBAAgB;AAwCvB;AAhCa,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,MAAI,SAAS;AACb,MAAK,YAAY,WAAY;AAC5B,aAAS,YAAa,YAAa;AAAA,EACpC,WAAY,WAAW,YAAY,QAAS;AAC3C,aAAS,YAAa,OAAQ;AAAA,EAC/B;AAEA,QAAM,CAAE,UAAW,IAAI,SAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,IAAI,SAAU,SAAS,kBAAkB,IAAK;AACpE,QAAM,CAAE,eAAgB,IAAI,SAAU,SAAS,oBAAoB,IAAK;AACxE,QAAM,CAAE,uBAAwB,IAAI,SAAU,kBAAmB;AACjE,QAAM,CAAE,KAAM,IAAI,SAAU,SAAS,cAAc,IAAK;AACxD,QAAM,CAAE,QAAS,IAAI,SAAU,SAAS,uBAAuB,IAAK;AACpE,QAAM,CAAE,SAAU,IAAI,SAAU,SAAS,wBAAwB,IAAK;AACtE,QAAM,CAAE,UAAW,IAAI,SAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,IAAI;AAAA,IACzB,SAAS;AAAA,IACT;AAAA,EACD;AACA,QAAM,cACL,YAAY,SACT;AAAA,IACA,gBAAgB;AAAA,EAChB,IACA,CAAC;AAEL,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ;AAAA,QACP,YAAY,cAAc;AAAA,QAC1B,YACC,iBAAiB,mBAAmB;AAAA,QACrC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACJ;AAAA,MACA;AAAA;AAAA,EAED;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
// packages/global-styles-ui/src/typography-variations.tsx
|
|
1
2
|
import TypographyVariationsInternal from "./variations/variations-typography";
|
|
2
3
|
import { withGlobalStylesProvider } from "./with-global-styles-provider";
|
|
3
|
-
|
|
4
|
+
var TypographyVariations = withGlobalStylesProvider(TypographyVariationsInternal);
|
|
4
5
|
export {
|
|
5
6
|
TypographyVariations
|
|
6
7
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/typography-variations.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport TypographyVariationsInternal from './variations/variations-typography';\nimport { withGlobalStylesProvider } from './with-global-styles-provider';\n\nexport interface TypographyVariationsProps {\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( config: GlobalStylesConfig ) => void;\n\ttitle?: string;\n\tgap?: number;\n}\n\n/**\n * Render Typography Variations.\n *\n * @example\n * ```tsx\n * <TypographyVariations\n * value={userConfig}\n * baseValue={baseConfig}\n * onChange={setUserConfig}\n * title=\"Typography\"\n * gap={3}\n * />\n * ```\n */\nexport const TypographyVariations: React.ComponentType< TypographyVariationsProps > =\n\twithGlobalStylesProvider( TypographyVariationsInternal );\n"],
|
|
5
|
-
"mappings": "AAQA,OAAO,kCAAkC;AACzC,SAAS,gCAAgC;AAwBlC,
|
|
5
|
+
"mappings": ";AAQA,OAAO,kCAAkC;AACzC,SAAS,gCAAgC;AAwBlC,IAAM,uBACZ,yBAA0B,4BAA6B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build-module/utils.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
// packages/global-styles-ui/src/utils.ts
|
|
1
2
|
import { areGlobalStylesEqual } from "@wordpress/global-styles-engine";
|
|
2
3
|
function removePropertiesFromObject(object, properties) {
|
|
3
4
|
if (!properties?.length) {
|
|
@@ -15,7 +16,7 @@ function removePropertiesFromObject(object, properties) {
|
|
|
15
16
|
}
|
|
16
17
|
return object;
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
+
var filterObjectByProperties = (object, properties) => {
|
|
19
20
|
if (!object || !properties?.length) {
|
|
20
21
|
return {};
|
|
21
22
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/utils.ts"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { areGlobalStylesEqual } from '@wordpress/global-styles-engine';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Removes all instances of properties from an object.\n *\n * @param object The object to remove the properties from.\n * @param properties The properties to remove.\n * @return The modified object.\n */\nexport function removePropertiesFromObject(\n\tobject: any,\n\tproperties: string[]\n): any {\n\tif ( ! properties?.length ) {\n\t\treturn object;\n\t}\n\n\tif (\n\t\ttypeof object !== 'object' ||\n\t\t! object ||\n\t\t! Object.keys( object ).length\n\t) {\n\t\treturn object;\n\t}\n\n\tfor ( const key in object ) {\n\t\tif ( properties.includes( key ) ) {\n\t\t\tdelete object[ key ];\n\t\t} else if ( typeof object[ key ] === 'object' ) {\n\t\t\tremovePropertiesFromObject( object[ key ], properties );\n\t\t}\n\t}\n\treturn object;\n}\n\n/**\n * Returns a new object, with properties specified in `properties` array.,\n * maintain the original object tree structure.\n * The function is recursive, so it will perform a deep search for the given properties.\n * E.g., the function will return `{ a: { b: { c: { test: 1 } } } }` if the properties are `[ 'test' ]`.\n *\n * @param object The object to filter\n * @param properties The properties to filter by\n * @return The merged object.\n */\nexport const filterObjectByProperties = (\n\tobject: any,\n\tproperties: string[]\n): any => {\n\tif ( ! object || ! properties?.length ) {\n\t\treturn {};\n\t}\n\n\tconst newObject: any = {};\n\tObject.keys( object ).forEach( ( key ) => {\n\t\tif ( properties.includes( key ) ) {\n\t\t\tnewObject[ key ] = object[ key ];\n\t\t} else if ( typeof object[ key ] === 'object' ) {\n\t\t\tconst newFilter = filterObjectByProperties(\n\t\t\t\tobject[ key ],\n\t\t\t\tproperties\n\t\t\t);\n\t\t\tif ( Object.keys( newFilter ).length ) {\n\t\t\t\tnewObject[ key ] = newFilter;\n\t\t\t}\n\t\t}\n\t} );\n\treturn newObject;\n};\n\n/**\n * Compares a style variation to the same variation filtered by the specified properties.\n * Returns true if the variation contains only the properties specified.\n *\n * @param variation The variation to compare.\n * @param properties The properties to compare.\n * @return Whether the variation contains only the specified properties.\n */\nexport function isVariationWithProperties(\n\tvariation: GlobalStylesConfig,\n\tproperties: string[]\n): boolean {\n\tconst variationWithProperties = filterObjectByProperties(\n\t\tstructuredClone( variation ),\n\t\tproperties\n\t);\n\n\treturn areGlobalStylesEqual( variationWithProperties, variation );\n}\n\nfunction getFontFamilyFromSetting( fontFamilies: any[], setting: string ): any {\n\tif ( ! Array.isArray( fontFamilies ) || ! setting ) {\n\t\treturn null;\n\t}\n\n\tconst fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );\n\tconst fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];\n\n\treturn fontFamilies.find(\n\t\t( fontFamily ) => fontFamily.slug === fontFamilySlug\n\t);\n}\n\n/**\n * Extracts font families from a theme JSON configuration.\n *\n * @param themeJson The theme JSON configuration\n * @return Array containing [bodyFontFamily, headingFontFamily]\n */\nexport function getFontFamilies( themeJson: any ): [ any, any ] {\n\tconst themeFontFamilies =\n\t\tthemeJson?.settings?.typography?.fontFamilies?.theme;\n\tconst customFontFamilies =\n\t\tthemeJson?.settings?.typography?.fontFamilies?.custom;\n\n\tlet fontFamilies: any[] = [];\n\tif ( themeFontFamilies && customFontFamilies ) {\n\t\tfontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];\n\t} else if ( themeFontFamilies ) {\n\t\tfontFamilies = themeFontFamilies;\n\t} else if ( customFontFamilies ) {\n\t\tfontFamilies = customFontFamilies;\n\t}\n\tconst bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;\n\tconst bodyFontFamily = getFontFamilyFromSetting(\n\t\tfontFamilies,\n\t\tbodyFontFamilySetting\n\t);\n\n\tconst headingFontFamilySetting =\n\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily;\n\n\tlet headingFontFamily;\n\tif ( ! headingFontFamilySetting ) {\n\t\theadingFontFamily = bodyFontFamily;\n\t} else {\n\t\theadingFontFamily = getFontFamilyFromSetting(\n\t\t\tfontFamilies,\n\t\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily\n\t\t);\n\t}\n\n\treturn [ bodyFontFamily, headingFontFamily ];\n}\n\nfunction findNearest( input: number, numbers: number[] ): number | null {\n\t// If the numbers array is empty, return null\n\tif ( numbers.length === 0 ) {\n\t\treturn null;\n\t}\n\t// Sort the array based on the absolute difference with the input\n\tnumbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );\n\t// Return the first element (which will be the nearest) from the sorted array\n\treturn numbers[ 0 ];\n}\n\nfunction extractFontWeights( fontFaces: any[] ): number[] {\n\tconst result: number[] = [];\n\n\tfontFaces.forEach( ( face ) => {\n\t\tconst weights = String( face.fontWeight ).split( ' ' );\n\n\t\tif ( weights.length === 2 ) {\n\t\t\tconst start = parseInt( weights[ 0 ] );\n\t\t\tconst end = parseInt( weights[ 1 ] );\n\n\t\t\tfor ( let i = start; i <= end; i += 100 ) {\n\t\t\t\tresult.push( i );\n\t\t\t}\n\t\t} else if ( weights.length === 1 ) {\n\t\t\tresult.push( parseInt( weights[ 0 ] ) );\n\t\t}\n\t} );\n\n\treturn result;\n}\n\n/*\n * Format the font family to use in the CSS font-family property of a CSS rule.\n *\n * The input can be a string with the font family name or a string with multiple font family names separated by commas.\n * It follows the recommendations from the CSS Fonts Module Level 4.\n * https://www.w3.org/TR/css-fonts-4/#font-family-prop\n *\n * @param input - The font family.\n * @return The formatted font family.\n */\nexport function formatFontFamily( input: string ): string {\n\t// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).\n\tconst regex = /^(?!generic\\([ a-zA-Z\\-]+\\)$)(?!^[a-zA-Z\\-]+$).+/;\n\tconst output = input.trim();\n\n\tconst formatItem = ( item: string ) => {\n\t\titem = item.trim();\n\t\tif ( item.match( regex ) ) {\n\t\t\t// removes leading and trailing quotes.\n\t\t\titem = item.replace( /^[\"']|[\"']$/g, '' );\n\t\t\treturn `\"${ item }\"`;\n\t\t}\n\t\treturn item;\n\t};\n\n\tif ( output.includes( ',' ) ) {\n\t\treturn output\n\t\t\t.split( ',' )\n\t\t\t.map( formatItem )\n\t\t\t.filter( ( item ) => item !== '' )\n\t\t\t.join( ', ' );\n\t}\n\n\treturn formatItem( output );\n}\n\n/**\n * Gets the preview style for a font family.\n *\n * @param family The font family object\n * @return CSS style object for the font family\n */\nexport function getFamilyPreviewStyle( family: any ): React.CSSProperties {\n\tconst style: React.CSSProperties = {\n\t\tfontFamily: formatFontFamily( family.fontFamily ),\n\t};\n\n\tif ( ! Array.isArray( family.fontFace ) ) {\n\t\tstyle.fontWeight = '400';\n\t\tstyle.fontStyle = 'normal';\n\t\treturn style;\n\t}\n\n\tif ( family.fontFace ) {\n\t\t//get all the font faces with normal style\n\t\tconst normalFaces = family.fontFace.filter(\n\t\t\t( face: any ) =>\n\t\t\t\tface?.fontStyle && face.fontStyle.toLowerCase() === 'normal'\n\t\t);\n\t\tif ( normalFaces.length > 0 ) {\n\t\t\tstyle.fontStyle = 'normal';\n\t\t\tconst normalWeights = extractFontWeights( normalFaces );\n\t\t\tconst nearestWeight = findNearest( 400, normalWeights );\n\t\t\tstyle.fontWeight = String( nearestWeight ) || '400';\n\t\t} else {\n\t\t\tstyle.fontStyle =\n\t\t\t\t( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||\n\t\t\t\t'normal';\n\t\t\tstyle.fontWeight =\n\t\t\t\t( family.fontFace.length &&\n\t\t\t\t\tString( family.fontFace[ 0 ].fontWeight ) ) ||\n\t\t\t\t'400';\n\t\t}\n\t}\n\n\treturn style;\n}\n\n/**\n * Iterates through the presets array and searches for slugs that start with the specified\n * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found\n * and returns one greater than the highest found suffix, ensuring that the new index is unique.\n *\n * @param presets The array of preset objects, each potentially containing a slug property.\n * @param slugPrefix The prefix to look for in the preset slugs.\n *\n * @return The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.\n */\n/**\n * Gets the variation class name for a block style variation.\n *\n * @param variation The variation name.\n * @return The variation class name.\n */\nexport function getVariationClassName( variation: string ): string {\n\tif ( ! variation ) {\n\t\treturn '';\n\t}\n\treturn `is-style-${ variation }`;\n}\n\nexport function getNewIndexFromPresets(\n\tpresets: any[],\n\tslugPrefix: string\n): number {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }([\\\\d]+)$` );\n\tconst highestPresetValue = presets.reduce( ( currentHighest, preset ) => {\n\t\tif ( typeof preset?.slug === 'string' ) {\n\t\t\tconst matches = preset?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id > currentHighest ) {\n\t\t\t\t\treturn id;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn currentHighest;\n\t}, 0 );\n\treturn highestPresetValue + 1;\n}\n"],
|
|
5
|
-
"mappings": "AAGA,SAAS,4BAA4B;AAU9B,SAAS,2BACf,QACA,YACM;AACN,MAAK,CAAE,YAAY,QAAS;AAC3B,WAAO;AAAA,EACR;AAEA,MACC,OAAO,WAAW,YAClB,CAAE,UACF,CAAE,OAAO,KAAM,MAAO,EAAE,QACvB;AACD,WAAO;AAAA,EACR;AAEA,aAAY,OAAO,QAAS;AAC3B,QAAK,WAAW,SAAU,GAAI,GAAI;AACjC,aAAO,OAAQ,GAAI;AAAA,IACpB,WAAY,OAAO,OAAQ,GAAI,MAAM,UAAW;AAC/C,iCAA4B,OAAQ,GAAI,GAAG,UAAW;AAAA,IACvD;AAAA,EACD;AACA,SAAO;AACR;AAYO,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/variations/variation.tsx
|
|
2
2
|
import clsx from "clsx";
|
|
3
3
|
import { Tooltip } from "@wordpress/components";
|
|
4
4
|
import { useMemo, useContext, useState } from "@wordpress/element";
|
|
@@ -7,6 +7,7 @@ import { _x, sprintf } from "@wordpress/i18n";
|
|
|
7
7
|
import { areGlobalStylesEqual } from "@wordpress/global-styles-engine";
|
|
8
8
|
import { GlobalStylesContext } from "../context";
|
|
9
9
|
import { filterObjectByProperties } from "../utils";
|
|
10
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
11
|
function Variation({
|
|
11
12
|
variation,
|
|
12
13
|
children,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/variations/variation.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Tooltip } from '@wordpress/components';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { _x, sprintf } from '@wordpress/i18n';\nimport { areGlobalStylesEqual } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from '../context';\nimport { filterObjectByProperties } from '../utils';\n\ninterface VariationProps {\n\tvariation: any;\n\tchildren: ( isFocused: boolean ) => React.ReactNode;\n\tisPill?: boolean;\n\tproperties?: string[];\n\tshowTooltip?: boolean;\n}\n\nexport default function Variation( {\n\tvariation,\n\tchildren,\n\tisPill = false,\n\tproperties,\n\tshowTooltip = false,\n}: VariationProps ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst {\n\t\tbase,\n\t\tuser,\n\t\tonChange: setUserConfig,\n\t} = useContext( GlobalStylesContext );\n\n\tconst context = useMemo( () => {\n\t\tlet merged = { ...base, ...variation };\n\t\tif ( properties ) {\n\t\t\tmerged = filterObjectByProperties( merged, properties );\n\t\t}\n\t\treturn {\n\t\t\tuser: variation,\n\t\t\tbase,\n\t\t\tmerged,\n\t\t\tonChange: () => {},\n\t\t};\n\t}, [ variation, base, properties ] );\n\n\tconst selectVariation = () => setUserConfig( variation );\n\n\tconst selectOnEnter = ( event: React.KeyboardEvent ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo(\n\t\t() => areGlobalStylesEqual( user, variation ),\n\t\t[ user, variation ]\n\t);\n\n\tlet label = variation?.title;\n\tif ( variation?.description ) {\n\t\tlabel = sprintf(\n\t\t\t/* translators: 1: variation title. 2: variation description. */\n\t\t\t_x( '%1$s (%2$s)', 'variation label' ),\n\t\t\tvariation?.title,\n\t\t\tvariation?.description\n\t\t);\n\t}\n\n\tconst content = (\n\t\t<div\n\t\t\tclassName={ clsx( 'global-styles-ui-variations_item', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\trole=\"button\"\n\t\t\tonClick={ selectVariation }\n\t\t\tonKeyDown={ selectOnEnter }\n\t\t\ttabIndex={ 0 }\n\t\t\taria-label={ label }\n\t\t\taria-current={ isActive }\n\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'global-styles-ui-variations_item-preview', {\n\t\t\t\t\t'is-pill': isPill,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ children( isFocused ) }\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ showTooltip ? (\n\t\t\t\t<Tooltip text={ variation?.title }>{ content }</Tooltip>\n\t\t\t) : (\n\t\t\t\tcontent\n\t\t\t) }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,SAAS,YAAY,gBAAgB;AAC9C,SAAS,aAAa;AACtB,SAAS,IAAI,eAAe;AAC5B,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AA2EtC;AAjEY,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,cAAc;AACf,GAAoB;AACnB,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACX,IAAI,WAAY,mBAAoB;AAEpC,QAAM,UAAU,QAAS,MAAM;AAC9B,QAAI,SAAS,EAAE,GAAG,MAAM,GAAG,UAAU;AACrC,QAAK,YAAa;AACjB,eAAS,yBAA0B,QAAQ,UAAW;AAAA,IACvD;AACA,WAAO;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAAC;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,WAAW,MAAM,UAAW,CAAE;AAEnC,QAAM,kBAAkB,MAAM,cAAe,SAAU;AAEvD,QAAM,gBAAgB,CAAE,UAAgC;AACvD,QAAK,MAAM,YAAY,OAAQ;AAC9B,YAAM,eAAe;AACrB,sBAAgB;AAAA,IACjB;AAAA,EACD;AAEA,QAAM,WAAW;AAAA,IAChB,MAAM,qBAAsB,MAAM,SAAU;AAAA,IAC5C,CAAE,MAAM,SAAU;AAAA,EACnB;AAEA,MAAI,QAAQ,WAAW;AACvB,MAAK,WAAW,aAAc;AAC7B,YAAQ;AAAA;AAAA,MAEP,GAAI,eAAe,iBAAkB;AAAA,MACrC,WAAW;AAAA,MACX,WAAW;AAAA,IACZ;AAAA,EACD;AAEA,QAAM,UACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,oCAAoC;AAAA,QACrD,aAAa;AAAA,MACd,CAAE;AAAA,MACF,MAAK;AAAA,MACL,SAAU;AAAA,MACV,WAAY;AAAA,MACZ,UAAW;AAAA,MACX,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,SAAU,MAAM,aAAc,IAAK;AAAA,MACnC,QAAS,MAAM,aAAc,KAAM;AAAA,MAEnC;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,KAAM,4CAA4C;AAAA,YAC7D,WAAW;AAAA,UACZ,CAAE;AAAA,UAEA,mBAAU,SAAU;AAAA;AAAA,MACvB;AAAA;AAAA,EACD;AAGD,SACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAQ,SACnC,wBACD,oBAAC,WAAQ,MAAO,WAAW,OAAU,mBAAS,IAE9C,SAEF;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/variations/variations-color.tsx
|
|
2
2
|
import {
|
|
3
3
|
__experimentalGrid as Grid,
|
|
4
4
|
__experimentalVStack as VStack
|
|
@@ -7,7 +7,8 @@ import StylesPreviewColors from "../preview-colors";
|
|
|
7
7
|
import { useCurrentMergeThemeStyleVariationsWithUserConfig } from "../hooks";
|
|
8
8
|
import { Subtitle } from "../subtitle";
|
|
9
9
|
import Variation from "./variation";
|
|
10
|
-
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
var propertiesToFilter = ["color"];
|
|
11
12
|
function ColorVariations({
|
|
12
13
|
title,
|
|
13
14
|
gap = 2
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/variations/variations-color.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport StylesPreviewColors from '../preview-colors';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../hooks';\nimport { Subtitle } from '../subtitle';\nimport Variation from './variation';\n\ninterface ColorVariationsProps {\n\ttitle?: string;\n\tgap?: number;\n}\n\nconst propertiesToFilter = [ 'color' ];\n\nexport default function ColorVariations( {\n\ttitle,\n\tgap = 2,\n}: ColorVariationsProps ) {\n\tconst colorVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );\n\n\t// Return null if there is only one variation (the default).\n\tif ( colorVariations?.length <= 1 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }\n\t\t\t<Grid gap={ gap }>\n\t\t\t\t{ colorVariations.map( ( variation: any, index: number ) => (\n\t\t\t\t\t<Variation\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\tisPill\n\t\t\t\t\t\tproperties={ propertiesToFilter }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t>\n\t\t\t\t\t\t{ () => <StylesPreviewColors /> }\n\t\t\t\t\t</Variation>\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,OAClB;AAKP,OAAO,yBAAyB;AAChC,SAAS,yDAAyD;AAClE,SAAS,gBAAgB;AACzB,OAAO,eAAe;AAsBpB,SACY,KADZ;AAfF,IAAM,qBAAqB,CAAE,OAAQ;AAEtB,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA,MAAM;AACP,GAA0B;AACzB,QAAM,kBACL,kDAAmD,kBAAmB;AAGvE,MAAK,iBAAiB,UAAU,GAAI;AACnC,WAAO;AAAA,EACR;AAEA,SACC,qBAAC,UAAO,SAAU,GACf;AAAA,aAAS,oBAAC,YAAS,OAAQ,GAAM,iBAAO;AAAA,IAC1C,oBAAC,QAAK,KACH,0BAAgB,IAAK,CAAE,WAAgB,UACxC;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,QAAM;AAAA,QACN,YAAa;AAAA,QACb,aAAW;AAAA,QAET,gBAAM,oBAAC,uBAAoB;AAAA;AAAA,MANvB;AAAA,IAOP,CACC,GACH;AAAA,KACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|