@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
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/pagination/index.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__experimentalText as Text,\n\tButton,\n} from '@wordpress/components';\nimport { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';\n\ninterface PaginationProps {\n\tcurrentPage: number;\n\tnumPages: number;\n\tchangePage: ( page: number ) => void;\n\ttotalItems: number;\n\tclassName?: string;\n\tdisabled?: boolean;\n\tbuttonVariant?: 'primary' | 'secondary' | 'tertiary';\n\tlabel?: string;\n}\n\nexport default function Pagination( {\n\tcurrentPage,\n\tnumPages,\n\tchangePage,\n\ttotalItems,\n\tclassName,\n\tdisabled = false,\n\tbuttonVariant = 'tertiary',\n\tlabel = __( 'Pagination' ),\n}: PaginationProps ) {\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tas=\"nav\"\n\t\t\taria-label={ label }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"flex-start\"\n\t\t\tclassName={ clsx( 'global-styles-ui-pagination', className ) }\n\t\t>\n\t\t\t<Text\n\t\t\t\tvariant=\"muted\"\n\t\t\t\tclassName=\"global-styles-ui-pagination__total\"\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %d: Total number of patterns.\n\t\t\t\t\t_n( '%d item', '%d items', totalItems ),\n\t\t\t\t\ttotalItems\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage - 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t<Text variant=\"muted\">\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: 1: Current page number. 2: Total number of pages.\n\t\t\t\t\t_x( '%1$d of %2$d', 'paging' ),\n\t\t\t\t\tcurrentPage,\n\t\t\t\t\tnumPages\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage + 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( numPages ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,OAAO,UAAU;AAKjB;AAAA,EACC,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,IAAI,IAAI,IAAI,SAAS,aAAa;AAC3C,SAAS,UAAU,aAAa,cAAc,YAAY;AAgCvD,cAUA,YAVA;AAnBY,SAAR,WAA6B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,QAAQ,GAAI,YAAa;AAC1B,GAAqB;AACpB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,IAAG;AAAA,MACH,cAAa;AAAA,MACb,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAY,KAAM,+BAA+B,SAAU;AAAA,MAE3D;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,WAAU;AAAA,YAER;AAAA;AAAA,cAED,GAAI,WAAW,YAAY,UAAW;AAAA,cACtC;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,CAAE;AAAA,cAC9B,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,YAAa;AAAA,cACzB,MAAO,MAAM,IAAI,OAAO;AAAA,cACxB,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,eAAgB;AAAA,cAC5B,MAAO,MAAM,IAAI,eAAe;AAAA,cAChC,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA,QACA,oBAAC,QAAK,SAAQ,SACX;AAAA;AAAA,UAED,GAAI,gBAAgB,QAAS;AAAA,UAC7B;AAAA,UACA;AAAA,QACD,GACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,cAAc;AAAA,cAC/B,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,QAAS;AAAA,cACrC,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,WAAW;AAAA,cAC5B,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build-module/palette.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/palette.tsx
|
|
2
2
|
import {
|
|
3
3
|
__experimentalItemGroup as ItemGroup,
|
|
4
4
|
FlexItem,
|
|
@@ -14,7 +14,8 @@ import { Subtitle } from "./subtitle";
|
|
|
14
14
|
import { NavigationButtonAsItem } from "./navigation-button";
|
|
15
15
|
import ColorIndicatorWrapper from "./color-indicator-wrapper";
|
|
16
16
|
import { useSetting } from "./hooks";
|
|
17
|
-
|
|
17
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
18
|
+
var EMPTY_COLORS = [];
|
|
18
19
|
function Palette({ name }) {
|
|
19
20
|
const [customColors] = useSetting("color.palette.custom");
|
|
20
21
|
const [themeColors] = useSetting("color.palette.theme");
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/palette.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS: Color[] = [];\n\ninterface PaletteProps {\n\tname?: string;\n}\n\nfunction Palette( { name }: PaletteProps ) {\n\tconst [ customColors ] = useSetting< Color[] >( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting< Color[] >( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting< Color[] >( 'color.palette.default' );\n\tconst [ defaultPaletteEnabled ] = useSetting< boolean >(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst safeCustomColors = customColors || EMPTY_COLORS;\n\tconst safeThemeColors = themeColors || EMPTY_COLORS;\n\tconst safeDefaultColors = defaultColors || EMPTY_COLORS;\n\tconst safeDefaultPaletteEnabled = defaultPaletteEnabled ?? true;\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...safeCustomColors,\n\t\t\t...safeThemeColors,\n\t\t\t...( safeDefaultColors && safeDefaultPaletteEnabled\n\t\t\t\t? safeDefaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[\n\t\t\tsafeCustomColors,\n\t\t\tsafeThemeColors,\n\t\t\tsafeDefaultColors,\n\t\t\tsafeDefaultPaletteEnabled,\n\t\t]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path={ screenPath }>\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t{ colors.length > 0 ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t{ __( 'Edit palette' ) }\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Add colors' ) }</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC,2BAA2B;AAAA,EAC3B;AAAA,EACA,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,MAAM,aAAa,oBAAoB;AAChD,SAAS,eAAe;AAMxB,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AACvC,OAAO,2BAA2B;AAClC,SAAS,kBAAkB;AA4CxB,SAKI,UALJ,KAKI,YALJ;AA1CH,IAAM,eAAwB,CAAC;AAM/B,SAAS,QAAS,EAAE,KAAK,GAAkB;AAC1C,QAAM,CAAE,YAAa,IAAI,WAAuB,sBAAuB;AACvE,QAAM,CAAE,WAAY,IAAI,WAAuB,qBAAsB;AACrE,QAAM,CAAE,aAAc,IAAI,WAAuB,uBAAwB;AACzE,QAAM,CAAE,qBAAsB,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,mBAAmB,gBAAgB;AACzC,QAAM,kBAAkB,eAAe;AACvC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,4BAA4B,yBAAyB;AAE3D,QAAM,SAAS;AAAA,IACd,MAAM;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAK,qBAAqB,4BACvB,oBACA;AAAA,IACJ;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,QAAM,aAAa,CAAE,OAClB,oBACA,aAAa,mBAAoB,IAAK,IAAI;AAE7C,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,YAAS,OAAQ,GAAM,aAAI,SAAU,GAAG;AAAA,IACzC,oBAAC,aAAU,YAAU,MAAC,aAAW,MAChC,8BAAC,0BAAuB,MAAO,YAC9B,+BAAC,UAAO,WAAU,OACf;AAAA,aAAO,SAAS,IACjB,iCACC;AAAA,4BAAC,UAAO,WAAY,OAAQ,QAAS,IAClC,iBACA,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,EAAE,MAAM,GAAG,UAClB;AAAA,UAAC;AAAA;AAAA,YAGA;AAAA,cAAC;AAAA;AAAA,gBACA,YAAa;AAAA;AAAA,YACd;AAAA;AAAA,UAJM,GAAI,KAAM,IAAK,KAAM;AAAA,QAK5B,CACC,GACJ;AAAA,QACA,oBAAC,YAAS,SAAO,MACd,aAAI,cAAe,GACtB;AAAA,SACD,IAEA,oBAAC,YAAW,aAAI,YAAa,GAAG;AAAA,MAEjC,oBAAC,QAAK,MAAO,MAAM,IAAI,cAAc,cAAe;AAAA,OACrD,GACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,kBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/preset-colors.tsx
|
|
2
2
|
import { useStylesPreviewColors } from "./preview-hooks";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
4
|
function PresetColors() {
|
|
4
5
|
const { paletteColors } = useStylesPreviewColors();
|
|
5
6
|
return paletteColors.slice(0, 4).map(({ slug, color }, index) => /* @__PURE__ */ jsx(
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/preset-colors.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './preview-hooks';\n\nexport default function PresetColors() {\n\tconst { paletteColors } = useStylesPreviewColors();\n\treturn paletteColors.slice( 0, 4 ).map( ( { slug, color }, index ) => (\n\t\t<div\n\t\t\tkey={ `${ slug }-${ index }` }\n\t\t\tstyle={ {\n\t\t\t\tflexGrow: 1,\n\t\t\t\theight: '100%',\n\t\t\t\tbackground: color,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,8BAA8B;AAKrC;AAHa,SAAR,eAAgC;AACtC,QAAM,EAAE,cAAc,IAAI,uBAAuB;AACjD,SAAO,cAAc,MAAO,GAAG,CAAE,EAAE,IAAK,CAAE,EAAE,MAAM,MAAM,GAAG,UAC1D;AAAA,IAAC;AAAA;AAAA,MAEA,OAAQ;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,YAAY;AAAA,MACb;AAAA;AAAA,IALM,GAAI,IAAK,IAAK,KAAM;AAAA,EAM3B,CACC;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/preview-colors.tsx
|
|
2
2
|
import {
|
|
3
3
|
__experimentalHStack as HStack,
|
|
4
4
|
__unstableMotion as motion
|
|
5
5
|
} from "@wordpress/components";
|
|
6
6
|
import PresetColors from "./preset-colors";
|
|
7
7
|
import PreviewWrapper from "./preview-wrapper";
|
|
8
|
-
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var firstFrameVariants = {
|
|
9
10
|
start: {
|
|
10
11
|
scale: 1,
|
|
11
12
|
opacity: 1
|
|
@@ -15,7 +16,7 @@ const firstFrameVariants = {
|
|
|
15
16
|
opacity: 0
|
|
16
17
|
}
|
|
17
18
|
};
|
|
18
|
-
|
|
19
|
+
var StylesPreviewColors = ({
|
|
19
20
|
label,
|
|
20
21
|
isFocused,
|
|
21
22
|
withHoverView
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/preview-colors.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport PresetColors from './preset-colors';\nimport PreviewWrapper from './preview-wrapper';\n\nconst firstFrameVariants = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\ninterface StylesPreviewColorsProps {\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nconst StylesPreviewColors = ( {\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: StylesPreviewColorsProps ) => {\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<PresetColors />\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default StylesPreviewColors;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,OACd;AAKP,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AA+CrB;AA7CN,IAAM,qBAAqB;AAAA,EAC1B,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AACD;AAQA,IAAM,sBAAsB,CAAE;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACD,MAAiC;AAChC,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEE,WAAE,EAAE,IAAI,MACT;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEA,UAAW;AAAA,UACX,OAAQ;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACX;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAQ;AAAA,cACR,OAAQ;AAAA,gBACP,QAAQ;AAAA,gBACR,UAAU;AAAA,cACX;AAAA,cAEA,8BAAC,gBAAa;AAAA;AAAA,UACf;AAAA;AAAA,QAhBM;AAAA,MAiBP;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/preview-hooks.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\n\nexport function useStylesPreviewColors(): {\n\tpaletteColors: Color[];\n\thighlightedColors: Color[];\n} {\n\tconst [ textColor = 'black' ] = useStyle< string >( 'color.text' );\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ headingColor = textColor ] = useStyle< string >(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ linkColor = headingColor ] = useStyle< string >(\n\t\t'elements.link.color.text'\n\t);\n\tconst [ buttonBackgroundColor = linkColor ] = useStyle< string >(\n\t\t'elements.button.color.background'\n\t);\n\n\tconst [ coreColors ] = useSetting< Color[] >( 'color.palette.core' ) || [];\n\tconst [ themeColors ] =\n\t\tuseSetting< Color[] >( 'color.palette.theme' ) || [];\n\tconst [ customColors ] =\n\t\tuseSetting< Color[] >( 'color.palette.custom' ) || [];\n\n\tconst paletteColors: Color[] = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\n\tconst textColorObject = paletteColors.filter(\n\t\t( { color } ) => color === textColor\n\t);\n\tconst buttonBackgroundColorObject = paletteColors.filter(\n\t\t( { color } ) => color === buttonBackgroundColor\n\t);\n\n\tconst highlightedColors = textColorObject\n\t\t.concat( buttonBackgroundColorObject )\n\t\t.concat( paletteColors )\n\t\t.filter(\n\t\t\t// we exclude these background color because it is already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n"],
|
|
5
|
-
"mappings": "AAQA,SAAS,YAAY,gBAAgB;AAE9B,SAAS,yBAGd;AACD,QAAM,CAAE,YAAY,OAAQ,IAAI,SAAoB,YAAa;AACjE,QAAM,CAAE,kBAAkB,OAAQ,IACjC,SAAoB,kBAAmB;AACxC,QAAM,CAAE,eAAe,SAAU,IAAI;AAAA,IACpC;AAAA,EACD;AACA,QAAM,CAAE,YAAY,YAAa,IAAI;AAAA,IACpC;AAAA,EACD;AACA,QAAM,CAAE,wBAAwB,SAAU,IAAI;AAAA,IAC7C;AAAA,EACD;AAEA,QAAM,CAAE,UAAW,IAAI,WAAuB,oBAAqB,KAAK,CAAC;AACzE,QAAM,CAAE,WAAY,IACnB,WAAuB,qBAAsB,KAAK,CAAC;AACpD,QAAM,CAAE,YAAa,IACpB,WAAuB,sBAAuB,KAAK,CAAC;AAErD,QAAM,iBAA2B,eAAe,CAAC,GAC/C,OAAQ,gBAAgB,CAAC,CAAE,EAC3B,OAAQ,cAAc,CAAC,CAAE;AAE3B,QAAM,kBAAkB,cAAc;AAAA,IACrC,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B;AACA,QAAM,8BAA8B,cAAc;AAAA,IACjD,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B;AAEA,QAAM,oBAAoB,gBACxB,OAAQ,2BAA4B,EACpC,OAAQ,aAAc,EACtB;AAAA;AAAA,IAEA,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B,EACC,MAAO,GAAG,CAAE;AAEd,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;",
|
|
5
|
+
"mappings": ";AAQA,SAAS,YAAY,gBAAgB;AAE9B,SAAS,yBAGd;AACD,QAAM,CAAE,YAAY,OAAQ,IAAI,SAAoB,YAAa;AACjE,QAAM,CAAE,kBAAkB,OAAQ,IACjC,SAAoB,kBAAmB;AACxC,QAAM,CAAE,eAAe,SAAU,IAAI;AAAA,IACpC;AAAA,EACD;AACA,QAAM,CAAE,YAAY,YAAa,IAAI;AAAA,IACpC;AAAA,EACD;AACA,QAAM,CAAE,wBAAwB,SAAU,IAAI;AAAA,IAC7C;AAAA,EACD;AAEA,QAAM,CAAE,UAAW,IAAI,WAAuB,oBAAqB,KAAK,CAAC;AACzE,QAAM,CAAE,WAAY,IACnB,WAAuB,qBAAsB,KAAK,CAAC;AACpD,QAAM,CAAE,YAAa,IACpB,WAAuB,sBAAuB,KAAK,CAAC;AAErD,QAAM,iBAA2B,eAAe,CAAC,GAC/C,OAAQ,gBAAgB,CAAC,CAAE,EAC3B,OAAQ,cAAc,CAAC,CAAE;AAE3B,QAAM,kBAAkB,cAAc;AAAA,IACrC,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B;AACA,QAAM,8BAA8B,cAAc;AAAA,IACjD,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B;AAEA,QAAM,oBAAoB,gBACxB,OAAQ,2BAA4B,EACpC,OAAQ,aAAc,EACtB;AAAA;AAAA,IAEA,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B,EACC,MAAO,GAAG,CAAE;AAEd,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/preview-styles.tsx
|
|
2
2
|
import {
|
|
3
3
|
__experimentalHStack as HStack,
|
|
4
4
|
__experimentalVStack as VStack,
|
|
@@ -9,7 +9,8 @@ import { useStylesPreviewColors } from "./preview-hooks";
|
|
|
9
9
|
import TypographyExample from "./typography-example";
|
|
10
10
|
import HighlightedColors from "./highlighted-colors";
|
|
11
11
|
import PreviewWrapper from "./preview-wrapper";
|
|
12
|
-
|
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
+
var firstFrameVariants = {
|
|
13
14
|
start: {
|
|
14
15
|
scale: 1,
|
|
15
16
|
opacity: 1
|
|
@@ -19,7 +20,7 @@ const firstFrameVariants = {
|
|
|
19
20
|
opacity: 0
|
|
20
21
|
}
|
|
21
22
|
};
|
|
22
|
-
|
|
23
|
+
var midFrameVariants = {
|
|
23
24
|
hover: {
|
|
24
25
|
opacity: 1
|
|
25
26
|
},
|
|
@@ -27,7 +28,7 @@ const midFrameVariants = {
|
|
|
27
28
|
opacity: 0.5
|
|
28
29
|
}
|
|
29
30
|
};
|
|
30
|
-
|
|
31
|
+
var secondFrameVariants = {
|
|
31
32
|
hover: {
|
|
32
33
|
scale: 1,
|
|
33
34
|
opacity: 1
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/preview-styles.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\nimport { useStylesPreviewColors } from './preview-hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewWrapper from './preview-wrapper';\n\nconst firstFrameVariants = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\ninterface PreviewStylesProps {\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n\tvariation?: any;\n}\n\nfunction PreviewStyles( {\n\tlabel,\n\tisFocused,\n\twithHoverView,\n\tvariation,\n}: PreviewStylesProps ) {\n\tconst [ fontWeight ] = useStyle< string >( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle< string >(\n\t\t'typography.fontFamily'\n\t);\n\tconst [ headingFontFamily = fontFamily ] = useStyle< string >(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle< string >(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle< string >( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle< string >(\n\t\t'elements.h1.color.text'\n\t);\n\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView ? midFrameVariants : undefined }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\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</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n}\n\nexport default PreviewStyles;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,OACd;AAKP,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AACvC,OAAO,uBAAuB;AAC9B,OAAO,uBAAuB;AAC9B,OAAO,oBAAoB;AA8EtB,SAQC,KARD;AA5EL,IAAM,qBAAqB;AAAA,EAC1B,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AACD;AAEA,IAAM,mBAAmB;AAAA,EACxB,OAAO;AAAA,IACN,SAAS;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACN,SAAS;AAAA,EACV;AACD;AAEA,IAAM,sBAAsB;AAAA,EAC3B,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AACD;AASA,SAAS,cAAe;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,CAAE,UAAW,IAAI,SAAoB,uBAAwB;AACnE,QAAM,CAAE,aAAa,OAAQ,IAAI;AAAA,IAChC;AAAA,EACD;AACA,QAAM,CAAE,oBAAoB,UAAW,IAAI;AAAA,IAC1C;AAAA,EACD;AACA,QAAM,CAAE,oBAAoB,UAAW,IAAI;AAAA,IAC1C;AAAA,EACD;AACA,QAAM,CAAE,YAAY,OAAQ,IAAI,SAAoB,YAAa;AACjE,QAAM,CAAE,eAAe,SAAU,IAAI;AAAA,IACpC;AAAA,EACD;AAEA,QAAM,EAAE,cAAc,IAAI,uBAAuB;AAEjD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEE;AAAA,SAAE,EAAE,OAAO,IAAI,MAChB;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAEA,UAAW;AAAA,YACX,OAAQ;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,YACX;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACA,SAAU,KAAK;AAAA,gBACf,SAAQ;AAAA,gBACR,OAAQ;AAAA,kBACP,QAAQ;AAAA,kBACR,UAAU;AAAA,gBACX;AAAA,gBAEA;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACA,UAAW,KAAK;AAAA,sBAChB;AAAA;AAAA,kBACD;AAAA,kBACA,oBAAC,UAAO,SAAU,IAAI,OACrB;AAAA,oBAAC;AAAA;AAAA,sBACA,2BAA4B;AAAA,sBAC5B;AAAA;AAAA,kBACD,GACD;AAAA;AAAA;AAAA,YACD;AAAA;AAAA,UAzBM;AAAA,QA0BP;AAAA,QAEC,CAAE,EAAE,IAAI,MACT;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAEA,UAAW,gBAAgB,mBAAmB;AAAA,YAC9C,OAAQ;AAAA,cACP,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,KAAK;AAAA,cACL,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,SAAS;AAAA,YACV;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACA,SAAU;AAAA,gBACV,SAAQ;AAAA,gBACR,OAAQ;AAAA,kBACP,QAAQ;AAAA,kBACR,UAAU;AAAA,gBACX;AAAA,gBAEE,wBACA,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,EAAE,MAAM,GAAG,UAClB;AAAA,kBAAC;AAAA;AAAA,oBAEA,OAAQ;AAAA,sBACP,QAAQ;AAAA,sBACR,YAAY;AAAA,sBACZ,UAAU;AAAA,oBACX;AAAA;AAAA,kBALM;AAAA,gBAMP,CACC;AAAA;AAAA,YACJ;AAAA;AAAA,UAhCM;AAAA,QAiCP;AAAA,QAEC,CAAE,EAAE,OAAO,IAAI,MAChB;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAEA,UAAW;AAAA,YACX,OAAQ;AAAA,cACP,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,UAAU;AAAA,cACV,KAAK;AAAA,YACN;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACA,SAAU,IAAI;AAAA,gBACd,SAAQ;AAAA,gBACR,OAAQ;AAAA,kBACP,QAAQ;AAAA,kBACR,UAAU;AAAA,kBACV,SAAS,KAAK;AAAA,kBACd,WAAW;AAAA,gBACZ;AAAA,gBAEE,mBACD;AAAA,kBAAC;AAAA;AAAA,oBACA,OAAQ;AAAA,sBACP,UAAU,KAAK;AAAA,sBACf,YAAY;AAAA,sBACZ,OAAO;AAAA,sBACP,YAAY;AAAA,sBACZ,YAAY;AAAA,sBACZ,WAAW;AAAA,oBACZ;AAAA,oBAEE;AAAA;AAAA,gBACH;AAAA;AAAA,YAEF;AAAA;AAAA,UAlCM;AAAA,QAmCP;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,yBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/preview-typography.tsx
|
|
2
2
|
import { __experimentalHStack as HStack } from "@wordpress/components";
|
|
3
3
|
import TypographyExample from "./typography-example";
|
|
4
4
|
import PreviewWrapper from "./preview-wrapper";
|
|
5
|
-
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
var StylesPreviewTypography = ({
|
|
6
7
|
variation,
|
|
7
8
|
isFocused,
|
|
8
9
|
withHoverView
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/preview-typography.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TypographyExample from './typography-example';\nimport PreviewWrapper from './preview-wrapper';\n\ninterface StylesPreviewTypographyProps {\n\tvariation: any;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nconst StylesPreviewTypography = ( {\n\tvariation,\n\tisFocused,\n\twithHoverView,\n}: StylesPreviewTypographyProps ) => {\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ variation.title }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<HStack\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default StylesPreviewTypography;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,wBAAwB,cAAc;AAK/C,OAAO,uBAAuB;AAC9B,OAAO,oBAAoB;AA6BtB;AArBL,IAAM,0BAA0B,CAAE;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACD,MAAqC;AACpC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,UAAU;AAAA,MAClB;AAAA,MACA;AAAA,MAEE,WAAE,EAAE,OAAO,IAAI,MAChB;AAAA,QAAC;AAAA;AAAA,UAEA,SAAU,KAAK;AAAA,UACf,SAAQ;AAAA,UACR,OAAQ;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACX;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,UAAW,KAAK;AAAA;AAAA,UACjB;AAAA;AAAA,QAXM;AAAA,MAYP;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,6BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/preview-wrapper.tsx
|
|
2
2
|
import { __unstableMotion as motion } from "@wordpress/components";
|
|
3
3
|
import {
|
|
4
4
|
useThrottle,
|
|
@@ -7,9 +7,10 @@ import {
|
|
|
7
7
|
} from "@wordpress/compose";
|
|
8
8
|
import { useLayoutEffect, useState } from "@wordpress/element";
|
|
9
9
|
import { useStyle } from "./hooks";
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
var normalizedWidth = 248;
|
|
12
|
+
var normalizedHeight = 152;
|
|
13
|
+
var THROTTLE_OPTIONS = {
|
|
13
14
|
leading: true,
|
|
14
15
|
trailing: true
|
|
15
16
|
};
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/preview-wrapper.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\n\tconst disableMotion = useReducedMotion();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState< number | undefined >();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the container at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"global-styles-ui-preview__wrapper\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: withHoverView ? 'pointer' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ []\n\t\t\t\t\t\t\t.concat( children as any ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child: any, key: number ) =>\n\t\t\t\t\t\t\t\tchild( { ratio, key } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PreviewWrapper;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,oBAAoB,cAAc;AAC3C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,gBAAgB;AAK1C,SAAS,gBAAgB;AAgFvB,mBACC,KADD;AA9EF,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AAIzB,IAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAWA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,CAAE,kBAAkB,OAAQ,IACjC,SAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,IAAI,SAAoB,gBAAiB;AAC/D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,IAAI,kBAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,IAAI,SAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,IAAI,SAA+B;AAErE,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,kBAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,kBAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,iCACC;AAAA,wBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAQ;AAAA,UACP,QAAQ,mBAAmB;AAAA,QAC5B;AAAA,QACA,cAAe,MAAM,aAAc,IAAK;AAAA,QACxC,cAAe,MAAM,aAAc,KAAM;AAAA,QACzC,UAAW;AAAA,QAEX;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,cAC7B,QAAQ,gBAAgB,YAAY;AAAA,YACrC;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAgB,EACxB;AAAA,cAAK,CAAE,OAAY,QACnB,MAAO,EAAE,OAAO,IAAI,CAAE;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build-module/provider.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/provider.tsx
|
|
2
2
|
import { useMemo } from "@wordpress/element";
|
|
3
3
|
import { mergeGlobalStyles } from "@wordpress/global-styles-engine";
|
|
4
4
|
import { GlobalStylesContext } from "./context";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
function GlobalStylesProvider({
|
|
6
7
|
children,
|
|
7
8
|
value,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/provider.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\nimport { mergeGlobalStyles } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\n\ninterface GlobalStylesProviderProps {\n\tchildren: ReactNode;\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\tfontLibraryEnabled?: boolean;\n}\n\nexport function GlobalStylesProvider( {\n\tchildren,\n\tvalue,\n\tbaseValue,\n\tonChange,\n\tfontLibraryEnabled,\n}: GlobalStylesProviderProps ) {\n\t// Compute merged with memoization since merging can be expensive\n\tconst merged = useMemo( () => {\n\t\treturn mergeGlobalStyles( baseValue, value );\n\t}, [ baseValue, value ] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tuser: value,\n\t\t\tbase: baseValue,\n\t\t\tmerged,\n\t\t\tonChange,\n\t\t\tfontLibraryEnabled,\n\t\t} ),\n\t\t[ value, baseValue, merged, onChange, fontLibraryEnabled ]\n\t);\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAQA,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAKlC,SAAS,2BAA2B;AAkClC;AAxBK,SAAS,qBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+B;AAE9B,QAAM,SAAS,QAAS,MAAM;AAC7B,WAAO,kBAAmB,WAAW,KAAM;AAAA,EAC5C,GAAG,CAAE,WAAW,KAAM,CAAE;AAExB,QAAM,eAAe;AAAA,IACpB,OAAQ;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA,CAAE,OAAO,WAAW,QAAQ,UAAU,kBAAmB;AAAA,EAC1D;AAEA,SACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAQ,cACnC,UACH;AAEF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/root-menu.tsx
|
|
2
2
|
import { __experimentalItemGroup as ItemGroup } from "@wordpress/components";
|
|
3
3
|
import {
|
|
4
4
|
background,
|
|
@@ -12,7 +12,8 @@ import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
|
|
|
12
12
|
import { NavigationButtonAsItem } from "./navigation-button";
|
|
13
13
|
import { useSetting } from "./hooks";
|
|
14
14
|
import { unlock } from "./lock-unlock";
|
|
15
|
-
|
|
15
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
+
var {
|
|
16
17
|
useHasDimensionsPanel,
|
|
17
18
|
useHasTypographyPanel,
|
|
18
19
|
useHasColorPanel,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/root-menu.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport {\n\tbackground,\n\ttypography,\n\tcolor,\n\tlayout,\n\tshadow as shadowIcon,\n} from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport type { GlobalStylesSettings } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseSettingsForBlockElement,\n\tuseHasBackgroundPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\t// Get the raw settings from our custom hook\n\tconst [ rawSettings ] = useSetting< GlobalStylesSettings >( '' );\n\n\t// Process settings the same way as Gutenberg\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\t// Use the same panel detection logic as Gutenberg\n\tconst hasBackgroundPanel = useHasBackgroundPanel( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasShadowPanel = true; // Same as Gutenberg\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem icon={ color } path=\"/colors\">\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ background }\n\t\t\t\t\t\tpath=\"/background\"\n\t\t\t\t\t\taria-label={ __( 'Background styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasShadowPanel && (\n\t\t\t\t\t<NavigationButtonAsItem icon={ shadowIcon } path=\"/shadows\">\n\t\t\t\t\t\t{ __( 'Shadows' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem icon={ layout } path=\"/layout\">\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,2BAA2B,iBAAiB;AACrD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,OACJ;AACP,SAAS,UAAU;AAEnB,SAAS,eAAe,8BAA8B;AAMtD,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AA0BrB,mBAGG,KAFF,YADD;AAxBF,IAAM;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,IAAI,OAAQ,sBAAuB;AAEnC,SAAS,WAAW;AAEnB,QAAM,CAAE,WAAY,IAAI,WAAoC,EAAG;AAG/D,QAAM,WAAW,2BAA4B,WAAY;AAGzD,QAAM,qBAAqB,sBAAuB,WAAY;AAC9D,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,gBAAgB,iBAAkB,QAAS;AACjD,QAAM,iBAAiB;AACvB,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,iBAAiB;AAEvB,SACC,gCACC,+BAAC,aACE;AAAA,0BACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAK;AAAA,QAEH,aAAI,YAAa;AAAA;AAAA,IACpB;AAAA,IAEC,iBACD,oBAAC,0BAAuB,MAAO,OAAQ,MAAK,WACzC,aAAI,QAAS,GAChB;AAAA,IAEC,sBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAK;AAAA,QACL,cAAa,GAAI,mBAAoB;AAAA,QAEnC,aAAI,YAAa;AAAA;AAAA,IACpB;AAAA,IAEC,kBACD,oBAAC,0BAAuB,MAAO,YAAa,MAAK,YAC9C,aAAI,SAAU,GACjB;AAAA,IAEC,kBACD,oBAAC,0BAAuB,MAAO,QAAS,MAAK,WAC1C,aAAI,QAAS,GAChB;AAAA,KAEF,GACD;AAEF;AAEA,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/screen-background.tsx
|
|
2
2
|
import { __ } from "@wordpress/i18n";
|
|
3
3
|
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
|
|
4
4
|
import { __experimentalText as Text } from "@wordpress/components";
|
|
@@ -6,7 +6,8 @@ import BackgroundPanel from "./background-panel";
|
|
|
6
6
|
import { ScreenHeader } from "./screen-header";
|
|
7
7
|
import { useSetting } from "./hooks";
|
|
8
8
|
import { unlock } from "./lock-unlock";
|
|
9
|
-
|
|
9
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
var { useHasBackgroundPanel } = unlock(blockEditorPrivateApis);
|
|
10
11
|
function ScreenBackground() {
|
|
11
12
|
const [settings] = useSetting("");
|
|
12
13
|
const hasBackgroundPanel = useHasBackgroundPanel(settings);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/screen-background.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __experimentalText as Text } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BackgroundPanel from './background-panel';\nimport { ScreenHeader } from './screen-header';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useHasBackgroundPanel } = unlock( blockEditorPrivateApis );\n\nfunction ScreenBackground() {\n\tconst [ settings ] = useSetting( '' );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __( \"Set styles for the site's background.\" ) }\n\t\t\t\t\t</Text>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBackground;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU;AAEnB,SAAS,eAAe,8BAA8B;AACtD,SAAS,sBAAsB,YAAY;AAK3C,OAAO,qBAAqB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAQrB,mBAIG,KAJH;AANF,IAAM,EAAE,sBAAsB,IAAI,OAAQ,sBAAuB;AAEjE,SAAS,mBAAmB;AAC3B,QAAM,CAAE,QAAS,IAAI,WAAY,EAAG;AACpC,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,YAAa;AAAA,QACzB,aACC,oBAAC,QACE,aAAI,uCAAwC,GAC/C;AAAA;AAAA,IAEF;AAAA,IACE,sBAAsB,oBAAC,mBAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,4BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/screen-block-list.tsx
|
|
2
2
|
import { store as blocksStore } from "@wordpress/blocks";
|
|
3
3
|
import { __, sprintf, _n } from "@wordpress/i18n";
|
|
4
4
|
import {
|
|
@@ -26,7 +26,8 @@ import { ScreenHeader } from "./screen-header";
|
|
|
26
26
|
import { NavigationButtonAsItem } from "./navigation-button";
|
|
27
27
|
import { useSetting } from "./hooks";
|
|
28
28
|
import { unlock } from "./lock-unlock";
|
|
29
|
-
|
|
29
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
30
|
+
var {
|
|
30
31
|
useHasDimensionsPanel,
|
|
31
32
|
useHasTypographyPanel,
|
|
32
33
|
useHasBorderPanel,
|
|
@@ -114,7 +115,7 @@ function BlockList({ filterValue }) {
|
|
|
114
115
|
}
|
|
115
116
|
);
|
|
116
117
|
}
|
|
117
|
-
|
|
118
|
+
var MemoizedBlockList = memo(BlockList);
|
|
118
119
|
function ScreenBlockList() {
|
|
119
120
|
const [filterValue, setFilterValue] = useState("");
|
|
120
121
|
const deferredFilterValue = useDeferredValue(filterValue);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/screen-block-list.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseDeferredValue,\n\tmemo,\n} from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n\t// @ts-expect-error: Not typed yet.\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations/variations-panel';\nimport { ScreenHeader } from './screen-header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks: any, block: any ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName: string ) {\n\tconst [ rawSettings ] = useSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\ninterface BlockMenuItemProps {\n\tblock: any;\n}\n\nfunction BlockMenuItem( { block }: BlockMenuItemProps ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\ninterface BlockListProps {\n\tfilterValue: string;\n}\n\nfunction BlockList( { filterValue }: BlockListProps ) {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseDeferredValue,\n\tmemo,\n} from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n\t// @ts-expect-error: Not typed yet.\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations/variations-panel';\nimport { ScreenHeader } from './screen-header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks: any, block: any ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName: string ) {\n\tconst [ rawSettings ] = useSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\ninterface BlockMenuItemProps {\n\tblock: any;\n}\n\nfunction BlockMenuItem( { block }: BlockMenuItemProps ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\ninterface BlockListProps {\n\tfilterValue: string;\n}\n\nfunction BlockList( { filterValue }: BlockListProps ) {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst { isMatchingSearchTerm } = useSelect( blocksStore );\n\n\tconst filteredBlockTypes = ! filterValue\n\t\t? sortedBlockTypes\n\t\t: sortedBlockTypes.filter( ( blockType ) =>\n\t\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t );\n\n\tconst blockTypesListRef = useRef< HTMLDivElement >( null );\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current?.childElementCount || 0;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, 'polite' );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ blockTypesListRef }\n\t\t\tclassName=\"global-styles-ui-block-types-item-list\"\n\t\t\t// By default, BlockMenuItem has a role=listitem so this div must have a list role.\n\t\t\trole=\"list\"\n\t\t>\n\t\t\t{ filteredBlockTypes.length === 0 ? (\n\t\t\t\t<Text align=\"center\" as=\"p\">\n\t\t\t\t\t{ __( 'No blocks found.' ) }\n\t\t\t\t</Text>\n\t\t\t) : (\n\t\t\t\tfilteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nconst MemoizedBlockList = memo( BlockList );\n\nfunction ScreenBlockList() {\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst deferredFilterValue = useDeferredValue( filterValue );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"global-styles-ui-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<MemoizedBlockList filterValue={ deferredFilterValue } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/screen-block.tsx
|
|
2
2
|
import { getBlockType } from "@wordpress/blocks";
|
|
3
3
|
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
|
|
4
4
|
import { useMemo } from "@wordpress/element";
|
|
@@ -19,7 +19,8 @@ import {
|
|
|
19
19
|
} from "./variations/variations-panel";
|
|
20
20
|
import { useStyle, useSetting } from "./hooks";
|
|
21
21
|
import { unlock } from "./lock-unlock";
|
|
22
|
-
|
|
22
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
23
|
+
var BACKGROUND_BLOCK_DEFAULT_VALUES = {
|
|
23
24
|
backgroundSize: "cover",
|
|
24
25
|
backgroundPosition: "50% 50%"
|
|
25
26
|
// used only when backgroundSize is 'contain'.
|
|
@@ -51,7 +52,7 @@ function applyAllFallbackStyles(border) {
|
|
|
51
52
|
}
|
|
52
53
|
return applyFallbackStyle(border);
|
|
53
54
|
}
|
|
54
|
-
|
|
55
|
+
var {
|
|
55
56
|
useHasDimensionsPanel,
|
|
56
57
|
useHasTypographyPanel,
|
|
57
58
|
useHasBorderPanel,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/screen-block.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { getBlockType } from '@wordpress/blocks';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { Subtitle } from './subtitle';\nimport {\n\tuseBlockVariations,\n\tVariationsPanel,\n} from './variations/variations-panel';\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\n// Initial control values.\nconst BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n\tbackgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.\n};\n\nfunction applyFallbackStyle( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tconst hasColorOrWidth = border.color || border.width;\n\n\tif ( ! border.style && hasColorOrWidth ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\tif ( border.style && ! hasColorOrWidth ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n\tuseHasFiltersPanel,\n\tuseHasImageSettingsPanel,\n\tuseHasBackgroundPanel,\n\tBackgroundPanel: StylesBackgroundPanel,\n\tBorderPanel: StylesBorderPanel,\n\tColorPanel: StylesColorPanel,\n\tTypographyPanel: StylesTypographyPanel,\n\tDimensionsPanel: StylesDimensionsPanel,\n\tFiltersPanel: StylesFiltersPanel,\n\tImageSettingsPanel,\n\tAdvancedPanel: StylesAdvancedPanel,\n} = unlock( blockEditorPrivateApis );\n\ninterface ScreenBlockProps {\n\tname: string;\n\tvariation?: string;\n}\n\nfunction ScreenBlock( { name, variation }: ScreenBlockProps ) {\n\tlet prefixParts: string[] = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useStyle( prefix, name, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ userSettings ] = useSetting( '', name, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '', name );\n\tconst settingsForBlockElement = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tname\n\t);\n\tconst blockType = getBlockType( name );\n\n\t// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.\n\tlet disableBlockGap = false;\n\tif (\n\t\tsettingsForBlockElement?.spacing?.blockGap &&\n\t\tblockType?.supports?.spacing?.blockGap &&\n\t\t( blockType?.supports?.spacing?.__experimentalSkipSerialization ===\n\t\t\ttrue ||\n\t\t\tblockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(\n\t\t\t\t( spacingType: string ) => spacingType === 'blockGap'\n\t\t\t) )\n\t) {\n\t\tdisableBlockGap = true;\n\t}\n\n\t// Only allow `aspectRatio` support if the block is not the grouping block.\n\t// The grouping block allows the user to use Group, Row and Stack variations,\n\t// and it is highly likely that the user will not want to set an aspect ratio\n\t// for all three at once. Until there is the ability to set a different aspect\n\t// ratio for each variation, we disable the aspect ratio controls for the\n\t// grouping block in global styles.\n\tlet disableAspectRatio = false;\n\tif (\n\t\tsettingsForBlockElement?.dimensions?.aspectRatio &&\n\t\tname === 'core/group'\n\t) {\n\t\tdisableAspectRatio = true;\n\t}\n\n\tconst settings = useMemo( () => {\n\t\tconst updatedSettings = structuredClone( settingsForBlockElement );\n\t\tif ( disableBlockGap ) {\n\t\t\tupdatedSettings.spacing.blockGap = false;\n\t\t}\n\t\tif ( disableAspectRatio ) {\n\t\t\tupdatedSettings.dimensions.aspectRatio = false;\n\t\t}\n\t\treturn updatedSettings;\n\t}, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] );\n\n\tconst blockVariations = useBlockVariations( name );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasFiltersPanel = useHasFiltersPanel( settings );\n\tconst hasImageSettingsPanel = useHasImageSettingsPanel(\n\t\tname,\n\t\tuserSettings,\n\t\tsettings\n\t);\n\tconst hasVariationsPanel = !! blockVariations?.length && ! variation;\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[\n\t\t\t\t'wp:action-edit-css'\n\t\t\t],\n\t\t};\n\t}, [] );\n\tconst currentBlockStyle = variation\n\t\t? blockVariations.find( ( s: any ) => s.name === variation )\n\t\t: null;\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\tconst onChangeDimensions = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeLightbox = ( newSetting: any ) => {\n\t\t// If the newSetting is undefined, this means that the user has deselected\n\t\t// (reset) the lightbox setting.\n\t\tif ( newSetting === undefined ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: undefined,\n\t\t\t} );\n\n\t\t\t// Otherwise, we simply set the lightbox setting to the new value but\n\t\t\t// taking care of not overriding the other lightbox settings.\n\t\t} else {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: {\n\t\t\t\t\t...rawSettings.lightbox,\n\t\t\t\t\t...newSetting,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeBorders = ( newStyle: any ) => {\n\t\tif ( ! newStyle?.border ) {\n\t\t\tsetStyle( newStyle );\n\t\t\treturn;\n\t\t}\n\n\t\t// As Global Styles can't conditionally generate styles based on if\n\t\t// other style properties have been set, we need to force split\n\t\t// border definitions for user set global border styles. Border\n\t\t// radius is derived from the same property i.e. `border.radius` if\n\t\t// it is a string that is used. The longhand border radii styles are\n\t\t// only generated if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst { radius, ...newBorder } = newStyle.border;\n\t\tconst border = applyAllFallbackStyles( newBorder );\n\t\tconst updatedBorder = ! hasSplitBorders( border )\n\t\t\t? {\n\t\t\t\t\ttop: border,\n\t\t\t\t\tright: border,\n\t\t\t\t\tbottom: border,\n\t\t\t\t\tleft: border,\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...border,\n\t\t\t };\n\n\t\tsetStyle( { ...newStyle, border: { ...updatedBorder, radius } } );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\tvariation ? currentBlockStyle?.label : blockType?.title\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<BlockPreviewPanel name={ name } variation={ variation } />\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<div className=\"global-styles-ui-screen-variations\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<StylesColorPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t<StylesBackgroundPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<StylesTypographyPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<StylesDimensionsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<StylesBorderPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeBorders }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasFiltersPanel && (\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasImageSettingsPanel && (\n\t\t\t\t<ImageSettingsPanel\n\t\t\t\t\tonChange={ onChangeLightbox }\n\t\t\t\t\tvalue={ userSettings }\n\t\t\t\t\tinheritedValue={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ canEditCSS && (\n\t\t\t\t<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tblockType?.title\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/screen-color-palette.tsx
|
|
2
2
|
import { __ } from "@wordpress/i18n";
|
|
3
3
|
import { privateApis as componentsPrivateApis } from "@wordpress/components";
|
|
4
4
|
import { ScreenHeader } from "./screen-header";
|
|
5
5
|
import ColorPalettePanel from "./color-palette-panel";
|
|
6
6
|
import GradientPalettePanel from "./gradients-palette-panel";
|
|
7
7
|
import { unlock } from "./lock-unlock";
|
|
8
|
-
|
|
8
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
var { Tabs } = unlock(componentsPrivateApis);
|
|
9
10
|
function ScreenColorPalette({ name }) {
|
|
10
11
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11
12
|
/* @__PURE__ */ jsx(
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/screen-color-palette.tsx"],
|
|
4
4
|
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-ignore - WordPress private APIs\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\n\n/**\n * External dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nfunction ScreenColorPalette( { name }: { name?: string } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Edit palette' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'The combination of colors used across the site and in color pickers.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<Tabs>\n\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t<Tabs.Tab tabId=\"color\">{ __( 'Color' ) }</Tabs.Tab>\n\t\t\t\t\t<Tabs.Tab tabId=\"gradient\">{ __( 'Gradient' ) }</Tabs.Tab>\n\t\t\t\t</Tabs.TabList>\n\t\t\t\t<Tabs.TabPanel tabId=\"color\" focusable={ false }>\n\t\t\t\t\t<ColorPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId=\"gradient\" focusable={ false }>\n\t\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t</Tabs>\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU;AAEnB,SAAS,eAAe,6BAA6B;AAKrD,SAAS,oBAAoB;AAC7B,OAAO,uBAAuB;AAC9B,OAAO,0BAA0B;AAKjC,SAAS,cAAc;AAMrB,mBACC,KAOC,YARF;AAJF,IAAM,EAAE,KAAK,IAAI,OAAQ,qBAAsB;AAE/C,SAAS,mBAAoB,EAAE,KAAK,GAAuB;AAC1D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,cAAe;AAAA,QAC3B,aAAc;AAAA,UACb;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,qBAAC,QACA;AAAA,2BAAC,KAAK,SAAL,EACA;AAAA,4BAAC,KAAK,KAAL,EAAS,OAAM,SAAU,aAAI,OAAQ,GAAG;AAAA,QACzC,oBAAC,KAAK,KAAL,EAAS,OAAM,YAAa,aAAI,UAAW,GAAG;AAAA,SAChD;AAAA,MACA,oBAAC,KAAK,UAAL,EAAc,OAAM,SAAQ,WAAY,OACxC,8BAAC,qBAAkB,MAAc,GAClC;AAAA,MACA,oBAAC,KAAK,UAAL,EAAc,OAAM,YAAW,WAAY,OAC3C,8BAAC,wBAAqB,MAAc,GACrC;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,+BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// packages/global-styles-ui/src/screen-colors.tsx
|
|
2
2
|
import { __ } from "@wordpress/i18n";
|
|
3
3
|
import { __experimentalVStack as VStack } from "@wordpress/components";
|
|
4
4
|
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
|
|
@@ -6,7 +6,8 @@ import { ScreenHeader } from "./screen-header";
|
|
|
6
6
|
import Palette from "./palette";
|
|
7
7
|
import { useStyle, useSetting } from "./hooks";
|
|
8
8
|
import { unlock } from "./lock-unlock";
|
|
9
|
-
|
|
9
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
var { useSettingsForBlockElement, ColorPanel: StylesColorPanel } = unlock(
|
|
10
11
|
blockEditorPrivateApis
|
|
11
12
|
);
|
|
12
13
|
function ScreenColors() {
|