From 621e6be829fd4f64b395f411e87f6060c0a7bcfc Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Wed, 23 Jun 2021 13:53:59 +0300 Subject: [PATCH 01/16] Global Styles: Move prototype from G2 --- package-lock.json | 127 +++++++- packages/components/src/item-group/index.ts | 4 +- packages/edit-site/package.json | 6 +- .../components/color-picker-modal.js | 61 ++++ .../global-styles-v2/components/index.js | 8 + .../global-styles-v2/components/inspector.js | 90 ++++++ .../global-styles-v2/components/nav-link.js | 18 ++ .../components/screen-header.js | 41 +++ .../global-styles-v2/components/screen.js | 17 ++ .../components/setting-link.js | 14 + .../components/style-preview.js | 35 +++ .../global-styles-v2/components/url-sync.js | 41 +++ .../sidebar/global-styles-v2/constants.js | 4 + .../sidebar/global-styles-v2/index.js | 192 ++++++++++++ .../screens/colors-element.js | 39 +++ .../screens/colors-palette.js | 87 ++++++ .../global-styles-v2/screens/colors.js | 115 +++++++ .../global-styles-v2/screens/global-styles.js | 31 ++ .../sidebar/global-styles-v2/screens/index.js | 6 + .../screens/typography-element.js | 286 ++++++++++++++++++ .../global-styles-v2/screens/typography.js | 79 +++++ .../sidebar/global-styles-v2/state.js | 183 +++++++++++ 22 files changed, 1472 insertions(+), 12 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/components/color-picker-modal.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/components/index.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/components/inspector.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/components/nav-link.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/components/screen-header.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/components/screen.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/components/setting-link.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/components/style-preview.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/components/url-sync.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/constants.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/index.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/screens/colors-element.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/screens/colors-palette.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/screens/colors.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/screens/global-styles.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/screens/index.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/state.js diff --git a/package-lock.json b/package-lock.json index 98cb8029eb2116..45b7e854981af8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18424,6 +18424,7 @@ "version": "file:packages/edit-site", "requires": { "@babel/runtime": "^7.13.10", + "@emotion/styled": "^11.3.0", "@wordpress/a11y": "file:packages/a11y", "@wordpress/api-fetch": "file:packages/api-fetch", "@wordpress/block-editor": "file:packages/block-editor", @@ -18451,9 +18452,51 @@ "classnames": "^2.3.1", "downloadjs": "^1.4.7", "file-saver": "^2.0.2", + "framer-motion": "^4.1.3", "jszip": "^3.2.2", "lodash": "^4.17.21", - "rememo": "^3.0.0" + "react-json-view": "^1.21.3", + "rememo": "^3.0.0", + "uuid": "^8.3.0" + }, + "dependencies": { + "@emotion/is-prop-valid": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz", + "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, + "@emotion/serialize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", + "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==", + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/styled": { + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz", + "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.3.0", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.0.0" + } + }, + "csstype": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + } } }, "@wordpress/edit-widgets": { @@ -28753,6 +28796,11 @@ } } }, + "base16": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz", + "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=" + }, "base64-js": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz", @@ -36125,6 +36173,14 @@ "bser": "^2.0.0" } }, + "fbemitter": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz", + "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==", + "requires": { + "fbjs": "^3.0.0" + } + }, "fbjs": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz", @@ -36629,6 +36685,15 @@ "readable-stream": "^2.0.4" } }, + "flux": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.1.tgz", + "integrity": "sha512-emk4RCvJ8RzNP2lNpphKnG7r18q8elDYNAPx7xn+bDeOIo9FFfxEfIQ2y6YbQNmnsGD3nH1noxtLE64Puz1bRQ==", + "requires": { + "fbemitter": "^3.0.0", + "fbjs": "^3.0.0" + } + }, "follow-redirects": { "version": "1.14.3", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.3.tgz", @@ -45283,6 +45348,11 @@ "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=", "dev": true }, + "lodash.curry": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", + "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA=" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -45330,6 +45400,11 @@ "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=", "dev": true }, + "lodash.flow": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz", + "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=" + }, "lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", @@ -52076,6 +52151,11 @@ "jest-diff": "^26.6.2" } }, + "pure-color": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz", + "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=" + }, "q": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", @@ -52351,6 +52431,17 @@ "prop-types": "^15.5.6" } }, + "react-base16-styling": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz", + "integrity": "sha1-7yFW1mz0E5aVyKFniGy2nqZgeSw=", + "requires": { + "base16": "^1.0.0", + "lodash.curry": "^4.0.1", + "lodash.flow": "^3.3.0", + "pure-color": "^1.2.0" + } + }, "react-colorful": { "version": "5.2.3", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.2.3.tgz", @@ -52901,11 +52992,33 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz", "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==" }, + "react-json-view": { + "version": "1.21.3", + "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.21.3.tgz", + "integrity": "sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==", + "requires": { + "flux": "^4.0.1", + "react-base16-styling": "^0.6.0", + "react-lifecycles-compat": "^3.0.4", + "react-textarea-autosize": "^8.3.2" + }, + "dependencies": { + "react-textarea-autosize": { + "version": "8.3.3", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz", + "integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==", + "requires": { + "@babel/runtime": "^7.10.2", + "use-composed-ref": "^1.0.0", + "use-latest": "^1.0.0" + } + } + } + }, "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", - "dev": true + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, "react-moment-proptypes": { "version": "1.7.0", @@ -59227,8 +59340,7 @@ "ts-essentials": { "version": "2.0.12", "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz", - "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==", - "dev": true + "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==" }, "ts-pnp": { "version": "1.2.0", @@ -59916,7 +60028,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz", "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==", - "dev": true, "requires": { "ts-essentials": "^2.0.3" } @@ -59924,14 +60035,12 @@ "use-isomorphic-layout-effect": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz", - "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==", - "dev": true + "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==" }, "use-latest": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz", "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==", - "dev": true, "requires": { "use-isomorphic-layout-effect": "^1.0.0" } diff --git a/packages/components/src/item-group/index.ts b/packages/components/src/item-group/index.ts index 25412ed60e0f66..afde00be7f4439 100644 --- a/packages/components/src/item-group/index.ts +++ b/packages/components/src/item-group/index.ts @@ -1,2 +1,2 @@ -export { default as Item } from './item'; -export { default as ItemGroup } from './item-group'; +export { default as Item, useItem } from './item'; +export { default as ItemGroup, useItemGroup } from './item-group'; diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 67094e789a272d..0e603859312e54 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -27,6 +27,7 @@ "react-native": "src/index", "dependencies": { "@babel/runtime": "^7.13.10", + "@emotion/styled": "^11.3.0", "@wordpress/a11y": "file:../a11y", "@wordpress/api-fetch": "file:../api-fetch", "@wordpress/block-editor": "file:../block-editor", @@ -54,9 +55,12 @@ "classnames": "^2.3.1", "downloadjs": "^1.4.7", "file-saver": "^2.0.2", + "framer-motion": "^4.1.3", "jszip": "^3.2.2", "lodash": "^4.17.21", - "rememo": "^3.0.0" + "react-json-view": "^1.21.3", + "rememo": "^3.0.0", + "uuid": "^8.3.0" }, "publishConfig": { "access": "public" diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/components/color-picker-modal.js b/packages/edit-site/src/components/sidebar/global-styles-v2/components/color-picker-modal.js new file mode 100644 index 00000000000000..e0fa54be659d08 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/components/color-picker-modal.js @@ -0,0 +1,61 @@ +/** + * WordPress dependencies + */ +import { + Card, + CardBody, + CardHeader, + CloseButton, + ColorPicker, + Heading, + HStack, + View, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { useAppState } from '../state'; + +export function ColorPickerModal() { + const appState = useAppState(); + const { showColorPicker, toggleShowColorPicker } = appState; + if ( ! showColorPicker ) return null; + const { colorPickerKey, get, set } = appState; + + const color = get( colorPickerKey ); + const handleOnChange = ( next ) => set( colorPickerKey, next ); + + return ( + + + + + + Color + + + + + + + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/components/index.js b/packages/edit-site/src/components/sidebar/global-styles-v2/components/index.js new file mode 100644 index 00000000000000..d8934204d007e3 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/components/index.js @@ -0,0 +1,8 @@ +export { ColorPickerModal } from './color-picker-modal'; +export { Inspector } from './inspector'; +export { NavLink } from './nav-link'; +export { Screen } from './screen'; +export { ScreenHeader } from './screen-header'; +export { SettingLink } from './setting-link'; +export { StylePreview } from './style-preview'; +export { URLSync, useInitialPath } from './url-sync'; diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/components/inspector.js b/packages/edit-site/src/components/sidebar/global-styles-v2/components/inspector.js new file mode 100644 index 00000000000000..868d7c0d17e24f --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/components/inspector.js @@ -0,0 +1,90 @@ +/** + * External dependencies + */ +import { motion } from 'framer-motion'; +import ReactJson from 'react-json-view'; + +/** + * WordPress dependencies + */ +import { + Card, + CardBody, + CardHeader, + FormGroup, + Panel, + PanelBody, + PanelHeader, + Select, + useNavigatorHistory, + useNavigatorLocation, + View, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { useAppState } from '../state'; + +const routes = [ + '/', + '/colors', + '/colors/palette', + '/colors/elements/background', + '/typography', + '/typography/elements/headings', +].map( ( o ) => ( { + value: o, + label: o, +} ) ); + +export const Inspector = () => { + const navigator = useNavigatorHistory(); + const location = useNavigatorLocation(); + const currentPath = location?.pathname; + const handleOnRouteChange = ( next ) => navigator.push( next ); + const appState = useAppState(); + + return ( +
+ + + Inspector + + + + + + + + + + + + + + + + + + + + ); + } + + return ( + + ); +} + +export default contextConnect( NavigatorButton, 'NavigatorButton' ); diff --git a/packages/components/src/navigator/navigator-context.js b/packages/components/src/navigator/navigator-context.js new file mode 100644 index 00000000000000..6ebc2db5e1b101 --- /dev/null +++ b/packages/components/src/navigator/navigator-context.js @@ -0,0 +1,7 @@ +/** + * WordPress dependencies + */ +import { createContext, useContext } from '@wordpress/element'; + +export const NavigatorContext = createContext( {} ); +export const useNavigatorContext = () => useContext( NavigatorContext ); diff --git a/packages/components/src/navigator/navigator-hooks.js b/packages/components/src/navigator/navigator-hooks.js new file mode 100644 index 00000000000000..4340a5fd061782 --- /dev/null +++ b/packages/components/src/navigator/navigator-hooks.js @@ -0,0 +1,9 @@ +/** + * Internal dependencies + */ +import { useHistory, useLocation, useParams, useRouteMatch } from './router'; + +export const useNavigatorHistory = useHistory; +export const useNavigatorLocation = useLocation; +export const useNavigatorParams = useParams; +export const useNavigatorRouteMatch = useRouteMatch; diff --git a/packages/components/src/navigator/navigator-link.js b/packages/components/src/navigator/navigator-link.js new file mode 100644 index 00000000000000..a97dd4737547be --- /dev/null +++ b/packages/components/src/navigator/navigator-link.js @@ -0,0 +1,105 @@ +/** + * External dependencies + */ +import classNames from 'classnames'; + +/** + * WordPress dependencies + */ +import { Children } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from './navigator-styles'; +import { + contextConnect, + ContextSystemProvider, + hasConnectNamespace, + useContextSystem, +} from '../ui/context'; +import { NavLink, useHistory } from './router'; + +function NavigatorLink( props, forwardedRef ) { + /* eslint-disable no-unused-vars */ + const { + as, + children, + className, + exact, + href, + isBack, + isPlain, + params, + showArrow, + to, + ...otherProps + } = useContextSystem( props, 'NavigatorLink' ); + /* eslint-enable no-unused-vars */ + + const history = useHistory(); + const [ child ] = Children.toArray( children ); + const isWrappingMenuItem = hasConnectNamespace( child, [ 'MenuItem' ] ); + + const isLink = !! to || !! href; + + const classes = classNames( { + [ styles.menuItemLink ]: isWrappingMenuItem, + className, + } ); + + const handleOnClick = ( event ) => { + if ( isBack ) { + event.preventDefault(); + if ( to ) { + history.push( to, { isBack: true } ); + } else { + history.goBack(); + } + } + }; + + const content = ( + + { children } + + ); + + if ( ! to ) { + return ( + + { content } + + ); + } + + return ( + + { content } + + ); +} + +export default contextConnect( NavigatorLink, 'NavigatorLink' ); diff --git a/packages/components/src/navigator/navigator-router.js b/packages/components/src/navigator/navigator-router.js new file mode 100644 index 00000000000000..6701c89ded8938 --- /dev/null +++ b/packages/components/src/navigator/navigator-router.js @@ -0,0 +1,34 @@ +/** + * WordPress dependencies + */ +import { memo, useEffect } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { useNavigatorHistory } from './navigator-hooks'; +import { MemoryRouter } from './router'; + +function NavigatorRouter( { children, initialPath } ) { + const history = useNavigatorHistory(); + // Would only exist if nested within another + const location = history?.location; + + // Redirect on load + useEffect( () => {} ); + + // No parent router + if ( ! location ) { + const initialEntry = initialPath ? [ initialPath ] : undefined; + + return ( + + { children } + + ); + } + + return children; +} + +export default memo( NavigatorRouter ); diff --git a/packages/components/src/navigator/navigator-screen.js b/packages/components/src/navigator/navigator-screen.js new file mode 100644 index 00000000000000..5800ff22ea9ae5 --- /dev/null +++ b/packages/components/src/navigator/navigator-screen.js @@ -0,0 +1,93 @@ +/** + * External dependencies + */ +import { motion } from 'framer-motion'; + +/** + * WordPress dependencies + */ +import { createElement } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { contextConnect, useContextSystem } from '../ui/context'; +import { Route } from './router'; + +function NavigatorScreen( props, forwardedRef ) { + const { + animationEnterDelay = 0, + animationEnterDuration = 0.14, + animationExitDelay = 0, + animationExitDuration = 0.14, + children, + component, + path, + render, + ...otherProps + } = useContextSystem( props, 'NavigatorScreen' ); + return ( + { + const { history } = routeProps; + const isBack = + history?.action === 'POP' || + history?.location?.state?.isBack; + + const combinedProps = { ...routeProps, ...otherProps }; + + /* eslint-disable no-nested-ternary */ + const content = children + ? typeof children === 'function' + ? children( combinedProps ) + : children + : component + ? createElement( component, combinedProps ) + : render + ? render( combinedProps ) + : null; + /* eslint-enable no-nested-ternary */ + + const animate = { + opacity: 1, + transition: { + delay: animationEnterDelay, + duration: animationEnterDuration, + ease: 'easeInOut', + }, + x: 0, + }; + const initial = { + opacity: 0, + x: isBack ? -50 : 50, + }; + const exit = { + delay: animationExitDelay, + opacity: 0, + x: isBack ? 50 : -50, + transition: { + duration: animationExitDuration, + ease: 'easeInOut', + }, + }; + + const animatedProps = { + animate, + exit, + initial, + }; + + return ( + + { content } + + ); + } } + /> + ); +} + +export default contextConnect( NavigatorScreen, 'NavigatorScreen' ); diff --git a/packages/components/src/navigator/navigator-screens.js b/packages/components/src/navigator/navigator-screens.js new file mode 100644 index 00000000000000..73ecee70883577 --- /dev/null +++ b/packages/components/src/navigator/navigator-screens.js @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import NavigatorSwitch from './navigator-switch'; +import { contextConnect, useContextSystem } from '../ui/context'; +import { NavigatorView } from './navigator-styles'; + +function NavigatorScreens( props, forwardedRef ) { + const { children, ...otherProps } = useContextSystem( + props, + 'NavigatorScreens' + ); + + return ( + + { children } + + ); +} + +export default contextConnect( NavigatorScreens, 'NavigatorScreens' ); diff --git a/packages/components/src/navigator/navigator-styles.js b/packages/components/src/navigator/navigator-styles.js new file mode 100644 index 00000000000000..6ba41efc947b51 --- /dev/null +++ b/packages/components/src/navigator/navigator-styles.js @@ -0,0 +1,16 @@ +/** + * External dependencies + */ +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; + +export const NavigatorView = styled.div` + height: 100%; + overflow: hidden; + position: relative; +`; + +export const menuItemLink = css` + display: flex; + outline: none; +`; diff --git a/packages/components/src/navigator/navigator-switch.js b/packages/components/src/navigator/navigator-switch.js new file mode 100644 index 00000000000000..7196eb31022618 --- /dev/null +++ b/packages/components/src/navigator/navigator-switch.js @@ -0,0 +1,30 @@ +/** + * External dependencies + */ +import { AnimatePresence } from 'framer-motion'; + +/** + * WordPress dependencies + */ +import { memo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { Route, Switch } from './router'; + +function NavigatorSwitch( { children } ) { + return ( + ( + + + { children } + + + ) } + /> + ); +} + +export default memo( NavigatorSwitch ); diff --git a/packages/components/src/navigator/navigator.js b/packages/components/src/navigator/navigator.js new file mode 100644 index 00000000000000..d39017965c5c0b --- /dev/null +++ b/packages/components/src/navigator/navigator.js @@ -0,0 +1,27 @@ +/** + * Internal dependencies + */ +import NavigatorRouter from './navigator-router'; +import { contextConnect, useContextSystem } from '../ui/context'; +import { NavigatorContext } from './navigator-context'; + +function Navigator( props, forwardedRef ) { + const { animationDuration = 300, children, initialPath } = useContextSystem( + props, + 'Navigator' + ); + + const contextProps = { + animationDuration, + }; + + return ( + + + { children } + + + ); +} + +export default contextConnect( Navigator, 'Navigator' ); diff --git a/packages/components/src/navigator/router/history-context.js b/packages/components/src/navigator/router/history-context.js new file mode 100644 index 00000000000000..f6c9b6a81b6325 --- /dev/null +++ b/packages/components/src/navigator/router/history-context.js @@ -0,0 +1,15 @@ +/** + * WordPress dependencies + */ +import { createContext } from '@wordpress/element'; + +const createNamedContext = ( name ) => { + const context = createContext(); + context.displayName = name; + + return context; +}; + +const context = createNamedContext( 'NavigatorRouter' ); + +export default context; diff --git a/packages/components/src/navigator/router/hooks.js b/packages/components/src/navigator/router/hooks.js new file mode 100644 index 00000000000000..d62d3bde9d7017 --- /dev/null +++ b/packages/components/src/navigator/router/hooks.js @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { useContext } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import HistoryContext from './history-context'; +import matchPath from './match-path'; +import RouterContext from './router-context'; + +export function useHistory() { + return useContext( HistoryContext ); +} + +export function useLocation() { + return useContext( RouterContext )?.location; +} + +export function useParams() { + const match = useContext( RouterContext )?.match; + return match ? match.params : {}; +} + +export function useRouteMatch( path ) { + const location = useLocation(); + const match = useContext( RouterContext )?.match; + return path ? matchPath( location.pathname, path ) : match; +} diff --git a/packages/components/src/navigator/router/index.js b/packages/components/src/navigator/router/index.js new file mode 100644 index 00000000000000..beebbd671f50b6 --- /dev/null +++ b/packages/components/src/navigator/router/index.js @@ -0,0 +1,14 @@ +export { default as Link } from './link'; +export { default as MemoryRouter } from './memory-router'; +export { default as NavLink } from './nav-link'; +export { default as Route } from './route'; +export { default as Router } from './router'; +export { default as Switch } from './switch'; + +export { default as matchPath } from './match-path'; +export { default as withRouter } from './with-router'; + +export { default as HistoryContext } from './history-context'; +export { default as RouterContext } from './router-context'; + +export * from './hooks'; diff --git a/packages/components/src/navigator/router/link.js b/packages/components/src/navigator/router/link.js new file mode 100644 index 00000000000000..692c6465d70fdb --- /dev/null +++ b/packages/components/src/navigator/router/link.js @@ -0,0 +1,117 @@ +/** + * WordPress dependencies + */ +import { createElement, forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import RouterContext from './router-context'; +import { + normalizeToLocation, + resolveToLocation, +} from './utils/location-utils.js'; + +// React 15 compat +function isModifiedEvent( event ) { + return !! ( + event.metaKey || + event.altKey || + event.ctrlKey || + event.shiftKey + ); +} + +const LinkAnchor = forwardRef( + ( + { + innerRef, // TODO: deprecate + navigate, + onClick, + ...rest + }, + forwardedRef + ) => { + const { target } = rest; + + const props = { + ...rest, + onClick: ( event ) => { + try { + if ( onClick ) onClick( event ); + } catch ( ex ) { + event.preventDefault(); + throw ex; + } + + if ( + ! event.defaultPrevented && // onClick prevented default + event.button === 0 && // ignore everything but left clicks + ( ! target || target === '_self' ) && // let browser handle "target=_blank" etc. + ! isModifiedEvent( event ) // ignore clicks with modifier keys + ) { + event.preventDefault(); + navigate(); + } + }, + ref: forwardedRef || innerRef, + }; + + /* eslint-disable-next-line jsx-a11y/anchor-has-content */ + return ; + } +); + +/** + * The public API for rendering a history-aware . + */ +const Link = forwardRef( + ( + { + component = LinkAnchor, + replace, + to, + innerRef, // TODO: deprecate + ...rest + }, + forwardedRef + ) => { + return ( + + { ( context ) => { + const { history } = context; + + const location = normalizeToLocation( + resolveToLocation( to, context.location ), + context.location + ); + + let href = location ? history.createHref( location ) : ''; + if ( to ) { + href = undefined; + } + const props = { + ...rest, + href, + navigate() { + const resolvedLocation = resolveToLocation( + to, + context.location + ); + const method = replace + ? history.replace + : history.push; + + method( resolvedLocation ); + }, + ref: forwardedRef || innerRef, + }; + + return createElement( component, props ); + } } + + ); + } +); + +export default Link; diff --git a/packages/components/src/navigator/router/match-path.js b/packages/components/src/navigator/router/match-path.js new file mode 100644 index 00000000000000..fae20c83e90a95 --- /dev/null +++ b/packages/components/src/navigator/router/match-path.js @@ -0,0 +1,79 @@ +/** + * External dependencies + */ +import pathToRegexp from 'path-to-regexp'; + +const cache = {}; +const cacheLimit = 10000; +let cacheCount = 0; + +function compilePath( path, options ) { + const cacheKey = `${ options.end }${ options.strict }${ options.sensitive }`; + const pathCache = cache[ cacheKey ] || ( cache[ cacheKey ] = {} ); + + if ( pathCache[ path ] ) return pathCache[ path ]; + + const keys = []; + const regexp = pathToRegexp( path, keys, options ); + const result = { keys, regexp }; + + if ( cacheCount < cacheLimit ) { + pathCache[ path ] = result; + cacheCount++; + } + + return result; +} + +/** + * Public API for matching a URL pathname to a path. + * + * @param {string} pathname Pathname + * @param {string|Array} options Matching options. + * @return {Object} Matched path details + */ +function matchPath( pathname, options = {} ) { + if ( typeof options === 'string' || Array.isArray( options ) ) { + options = { path: options }; + } + + const { exact = false, path, sensitive = false, strict = false } = options; + + const paths = [].concat( path ); + + return paths.reduce( ( matched, currentPath ) => { + if ( ! currentPath && currentPath !== '' ) return null; + if ( matched ) return matched; + + const { keys, regexp } = compilePath( currentPath, { + end: exact, + sensitive, + strict, + } ); + const match = regexp.exec( pathname ); + + if ( ! match ) return null; + + const [ url, ...values ] = match; + const isExact = pathname === url; + + if ( exact && ! isExact ) return null; + + return { + // the matched portion of the URL + isExact, + + // whether or not we matched exactly + params: keys.reduce( ( memo, key, index ) => { + memo[ key.name ] = values[ index ]; + return memo; + }, {} ), + + path: currentPath, + // the path used to match + url: currentPath === '/' && url === '' ? '/' : url, + }; + }, null ); +} + +export default matchPath; diff --git a/packages/components/src/navigator/router/memory-router.js b/packages/components/src/navigator/router/memory-router.js new file mode 100644 index 00000000000000..1fd5896f6e9c53 --- /dev/null +++ b/packages/components/src/navigator/router/memory-router.js @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import { createMemoryHistory as createHistory } from 'history'; + +/** + * Internal dependencies + */ +import Router from './router'; + +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; + +/** + * The public API for a that stores location in memory. + */ +class MemoryRouter extends Component { + constructor() { + super(); + + this.history = createHistory( this.props ); + } + + render() { + return ( + + ); + } +} + +export default MemoryRouter; diff --git a/packages/components/src/navigator/router/nav-link.js b/packages/components/src/navigator/router/nav-link.js new file mode 100644 index 00000000000000..ec76ed6a081263 --- /dev/null +++ b/packages/components/src/navigator/router/nav-link.js @@ -0,0 +1,89 @@ +/** + * Internal dependencies + */ +import Link from './link'; +import matchPath from './match-path'; +import RouterContext from './router-context'; +import { normalizeToLocation, resolveToLocation } from './utils/location-utils'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +function joinClassnames( ...classnames ) { + return classnames.filter( ( i ) => i ).join( ' ' ); +} + +/** + * A wrapper that knows if it's "active" or not. + */ +const NavLink = forwardRef( + ( + { + activeClassName = 'active', + activeStyle, + 'aria-current': ariaCurrent = 'page', + className: classNameProp, + exact, + innerRef, + isActive: isActiveProp, + location: locationProp, + sensitive, + strict, + style: styleProp, + to, // TODO: deprecate + ...rest + }, + forwardedRef + ) => { + return ( + + { ( context ) => { + const currentLocation = locationProp || context.location; + const toLocation = normalizeToLocation( + resolveToLocation( to, currentLocation ), + currentLocation + ); + const { pathname: path } = toLocation; + // Regex taken from: https://github.com/pillarjs/path-to-regexp/blob/master/index.js#L202 + const escapedPath = + path && + path.replace( /([.+*?=^!:${}()[\]|/\\])/g, '\\$1' ); + + const match = escapedPath + ? matchPath( currentLocation.pathname, { + exact, + path: escapedPath, + sensitive, + strict, + } ) + : null; + const isActive = !! ( isActiveProp + ? isActiveProp( match, currentLocation ) + : match ); + + const className = isActive + ? joinClassnames( classNameProp, activeClassName ) + : classNameProp; + const style = isActive + ? { ...styleProp, ...activeStyle } + : styleProp; + + const props = { + 'aria-current': ( isActive && ariaCurrent ) || null, + className, + style, + to: toLocation, + ref: forwardedRef || innerRef, + ...rest, + }; + + return ; + } } + + ); + } +); + +export default NavLink; diff --git a/packages/components/src/navigator/router/route.js b/packages/components/src/navigator/router/route.js new file mode 100644 index 00000000000000..b075711a2eca55 --- /dev/null +++ b/packages/components/src/navigator/router/route.js @@ -0,0 +1,69 @@ +/** + * Internal dependencies + */ +import matchPath from './match-path'; +import RouterContext from './router-context'; + +/** + * WordPress dependencies + */ +import { Children, Component, createElement } from '@wordpress/element'; + +function isEmptyChildren( children ) { + return Children.count( children ) === 0; +} + +/** + * The public API for matching a single path and rendering. + */ +class Route extends Component { + render() { + /* eslint-disable no-nested-ternary */ + return ( + + { ( context ) => { + const location = this.props.location || context.location; + const match = this.props.computedMatch + ? this.props.computedMatch // already computed the match for us + : this.props.path + ? matchPath( location.pathname, this.props ) + : context.match; + + const props = { ...context, location, match }; + + let { children, component, render } = this.props; + + // Preact uses an empty array as children by + // default, so use null if that's the case. + if ( + Array.isArray( children ) && + isEmptyChildren( children ) + ) { + children = null; + } + + return ( + + { props.match + ? children + ? typeof children === 'function' + ? children( props ) + : children + : component + ? createElement( component, props ) + : render + ? render( props ) + : null + : typeof children === 'function' + ? children( props ) + : null } + + ); + } } + + ); + /* eslint-enable no-nested-ternary */ + } +} + +export default Route; diff --git a/packages/components/src/navigator/router/router-context.js b/packages/components/src/navigator/router/router-context.js new file mode 100644 index 00000000000000..80c94deb7a416c --- /dev/null +++ b/packages/components/src/navigator/router/router-context.js @@ -0,0 +1,15 @@ +/** + * WordPress dependencies + */ +import { createContext } from '@wordpress/element'; + +const createNamedContext = ( name ) => { + const context = createContext(); + context.displayName = name; + + return context; +}; + +const historyContext = createNamedContext( 'NavigatorRouterHistory' ); + +export default historyContext; diff --git a/packages/components/src/navigator/router/router.js b/packages/components/src/navigator/router/router.js new file mode 100644 index 00000000000000..b29eb6fa7dd4b0 --- /dev/null +++ b/packages/components/src/navigator/router/router.js @@ -0,0 +1,83 @@ +/** + * Internal dependencies + */ +import HistoryContext from './history-context'; +import RouterContext from './router-context'; + +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; + +/** + * The public API for putting history on context. + */ +class Router extends Component { + static computeRootMatch( pathname ) { + return { isExact: pathname === '/', params: {}, path: '/', url: '/' }; + } + + constructor( props ) { + super( props ); + + this.state = { + location: props.history.location, + }; + + // This is a bit of a hack. We have to start listening for location + // changes here in the constructor in case there are any s + // on the initial render. If there are, they will replace/push when + // they mount and since cDM fires in children before parents, we may + // get a new location before the is mounted. + this._isMounted = false; + this._pendingLocation = null; + + if ( ! props.staticContext ) { + this.unlisten = props.history.listen( ( location ) => { + if ( this._isMounted ) { + this.setState( { location } ); + } else { + this._pendingLocation = location; + } + } ); + } + } + + componentDidMount() { + this._isMounted = true; + + if ( this._pendingLocation ) { + this.setState( { location: this._pendingLocation } ); + } + } + + componentWillUnmount() { + if ( this.unlisten ) { + this.unlisten(); + this._isMounted = false; + this._pendingLocation = null; + } + } + + render() { + return ( + + + + ); + } +} + +export default Router; diff --git a/packages/components/src/navigator/router/switch.js b/packages/components/src/navigator/router/switch.js new file mode 100644 index 00000000000000..b767a3f7ae7cc1 --- /dev/null +++ b/packages/components/src/navigator/router/switch.js @@ -0,0 +1,61 @@ +/** + * Internal dependencies + */ +import matchPath from './match-path'; +import RouterContext from './router-context'; + +/** + * WordPress dependencies + */ +import { + Children, + cloneElement, + Component, + isValidElement, +} from '@wordpress/element'; + +/** + * The public API for rendering the first that matches. + */ +class Switch extends Component { + render() { + return ( + + { ( context ) => { + const location = this.props.location || context.location; + + let element, match; + + // We use React.Children.forEach instead of React.Children.toArray().find() + // here because toArray adds keys to all child elements and we do not want + // to trigger an unmount/remount for two s that render the same + // component at different URLs. + Children.forEach( this.props.children, ( child ) => { + // eslint-disable-next-line eqeqeq + if ( match == null && isValidElement( child ) ) { + element = child; + + const path = child.props.path || child.props.from; + + match = path + ? matchPath( location.pathname, { + ...child.props, + path, + } ) + : context.match; + } + } ); + + return match + ? cloneElement( element, { + computedMatch: match, + location, + } ) + : null; + } } + + ); + } +} + +export default Switch; diff --git a/packages/components/src/navigator/router/utils/location-utils.js b/packages/components/src/navigator/router/utils/location-utils.js new file mode 100644 index 00000000000000..41ffec08117225 --- /dev/null +++ b/packages/components/src/navigator/router/utils/location-utils.js @@ -0,0 +1,13 @@ +/** + * External dependencies + */ +import { createLocation } from 'history'; + +export const resolveToLocation = ( to, currentLocation ) => + typeof to === 'function' ? to( currentLocation ) : to; + +export const normalizeToLocation = ( to, currentLocation ) => { + return typeof to === 'string' + ? createLocation( to, null, null, currentLocation ) + : to; +}; diff --git a/packages/components/src/navigator/router/with-router.js b/packages/components/src/navigator/router/with-router.js new file mode 100644 index 00000000000000..938353b099a14a --- /dev/null +++ b/packages/components/src/navigator/router/with-router.js @@ -0,0 +1,40 @@ +/** + * External dependencies + */ +import hoistNonReactStatics from 'hoist-non-react-statics'; + +/** + * Internal dependencies + */ +import RouterContext from './router-context'; + +// A public higher-order component to access the imperative API +function withRouter( Component ) { + const displayName = `withRouter(${ + Component.displayName || Component.name + })`; + const C = ( props ) => { + const { wrappedComponentRef, ...remainingProps } = props; + + return ( + + { ( context ) => { + return ( + + ); + } } + + ); + }; + + C.displayName = displayName; + C.WrappedComponent = Component; + + return hoistNonReactStatics( C, Component ); +} + +export default withRouter; diff --git a/packages/components/src/navigator/with-navigator.js b/packages/components/src/navigator/with-navigator.js new file mode 100644 index 00000000000000..f9d6d139fc44cc --- /dev/null +++ b/packages/components/src/navigator/with-navigator.js @@ -0,0 +1,8 @@ +/** + * Internal dependencies + */ +import { withRouter } from './router'; + +const withNavigator = withRouter; + +export default withNavigator; From c77a4f6b42fe98384db3a51e82401de0d40e65d5 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Tue, 13 Jul 2021 16:38:22 +0300 Subject: [PATCH 03/16] Introduce story, fix component imports --- packages/components/src/index.js | 7 ++-- .../components/color-picker-modal.js | 28 ++++++++++----- .../global-styles-v2/components/inspector.js | 19 +++++----- .../components/screen-header.js | 14 ++++---- .../global-styles-v2/components/screen.js | 2 +- .../components/style-preview.js | 7 +++- .../sidebar/global-styles-v2/index.js | 16 +++------ .../screens/colors-element.js | 6 +++- .../screens/colors-palette.js | 4 +-- .../global-styles-v2/screens/colors.js | 35 +++++++++---------- .../global-styles-v2/screens/global-styles.js | 2 +- .../sidebar/global-styles-v2/state.js | 14 ++++---- .../sidebar/global-styles-v2/stories/index.js | 10 ++++++ storybook/main.js | 1 + 14 files changed, 93 insertions(+), 72 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar/global-styles-v2/stories/index.js diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 969a07bf72bf1b..c910f51839851b 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -47,6 +47,10 @@ export { CompositeItem as __unstableCompositeItem, useCompositeState as __unstableUseCompositeState, } from './composite'; +export { + ContextSystemProvider as __experimentalContextSystemProvider, + useContextSystem as __experimentalUseContextSystem, +} from './ui/context'; export { default as CustomSelectControl } from './custom-select-control'; export { default as Dashicon } from './dashicon'; export { default as DateTimePicker, DatePicker, TimePicker } from './date-time'; @@ -96,9 +100,7 @@ export { default as __experimentalNavigationBackButton } from './navigation/back export { default as __experimentalNavigationGroup } from './navigation/group'; export { default as __experimentalNavigationItem } from './navigation/item'; export { default as __experimentalNavigationMenu } from './navigation/menu'; - export * from './navigator'; - export { default as Notice } from './notice'; export { default as __experimentalNumberControl } from './number-control'; export { default as NoticeList } from './notice/list'; @@ -160,6 +162,7 @@ export { parseUnit as __experimentalParseUnit, } from './unit-control'; export { VisuallyHidden } from './visually-hidden'; +export { View as __experimentalView } from './view'; export { VStack as __experimentalVStack } from './v-stack'; export { default as IsolatedEventContainer } from './isolated-event-container'; export { diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/components/color-picker-modal.js b/packages/edit-site/src/components/sidebar/global-styles-v2/components/color-picker-modal.js index e0fa54be659d08..765fc465703586 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-v2/components/color-picker-modal.js +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/components/color-picker-modal.js @@ -2,15 +2,17 @@ * WordPress dependencies */ import { + Button, Card, CardBody, CardHeader, - CloseButton, ColorPicker, - Heading, - HStack, - View, + __experimentalHeading as Heading, + __experimentalHStack as HStack, + __experimentalUseContextSystem as useContextSystem, + __experimentalView as View, } from '@wordpress/components'; +import { close } from '@wordpress/icons'; /** * Internal dependencies @@ -20,8 +22,16 @@ import { useAppState } from '../state'; export function ColorPickerModal() { const appState = useAppState(); const { showColorPicker, toggleShowColorPicker } = appState; - if ( ! showColorPicker ) return null; const { colorPickerKey, get, set } = appState; + const buttonProps = { + onClick: toggleShowColorPicker, + size: 'small', + }; + const { ...otherButtonProps } = useContextSystem( + buttonProps, + 'CloseButton' + ); + if ( ! showColorPicker ) return null; const color = get( colorPickerKey ); const handleOnChange = ( next ) => set( colorPickerKey, next ); @@ -41,9 +51,11 @@ export function ColorPickerModal() { Color - diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/components/inspector.js b/packages/edit-site/src/components/sidebar/global-styles-v2/components/inspector.js index 868d7c0d17e24f..399f16f6aa8197 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-v2/components/inspector.js +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/components/inspector.js @@ -11,14 +11,13 @@ import { Card, CardBody, CardHeader, - FormGroup, Panel, PanelBody, PanelHeader, - Select, + SelectControl, useNavigatorHistory, useNavigatorLocation, - View, + __experimentalView as View, } from '@wordpress/components'; /** @@ -51,13 +50,13 @@ export const Inspector = () => { Inspector - - - + - - - + - - - + Date: Wed, 14 Jul 2021 12:14:38 +0300 Subject: [PATCH 08/16] Remove FormGroup from typography screen --- .../screens/typography-element.js | 43 +++++++++---------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js b/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js index c7d229e1324700..283b16a34de629 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js @@ -8,13 +8,13 @@ import { isUndefined, startCase } from 'lodash'; */ import { __experimentalGrid as Grid, + __experimentalHeading as Heading, __experimentalVStack as VStack, Button, ButtonGroup, CardBody, DropdownMenu, FontSizePicker, - FormGroup, NumberControl, Panel, SelectControl, @@ -229,27 +229,26 @@ export const TypographyElementScreen = () => { - - - + + { palettes.map( ( palette, index ) => ( Date: Wed, 14 Jul 2021 14:36:13 +0300 Subject: [PATCH 13/16] Fix navigator styles --- packages/components/src/navigator/navigator-styles.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/navigator/navigator-styles.js b/packages/components/src/navigator/navigator-styles.js index 6ba41efc947b51..a4d91dc875f374 100644 --- a/packages/components/src/navigator/navigator-styles.js +++ b/packages/components/src/navigator/navigator-styles.js @@ -2,7 +2,10 @@ * External dependencies */ import styled from '@emotion/styled'; -import { css } from '@emotion/react'; +// Disable reason: Temporarily disable for existing usages +// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css +// eslint-disable-next-line no-restricted-imports +import { css } from '@emotion/css'; export const NavigatorView = styled.div` height: 100%; From 80c9f2dceaab322ae487d4abf71f37f361c1f679 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Wed, 14 Jul 2021 15:01:44 +0300 Subject: [PATCH 14/16] Fix dropdown menu check icon --- .../sidebar/global-styles-v2/screens/typography-element.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js b/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js index 283b16a34de629..ed3eede14bed1b 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js @@ -22,6 +22,7 @@ import { useNavigatorParams, } from '@wordpress/components'; import { + check, formatCapitalize, formatLowercase, formatUppercase, @@ -73,10 +74,12 @@ const TypographyOptions = () => { } = useStyleAttributesForScreen(); const options = typographyOptions.map( ( o ) => { + const isActive = ! isUndefined( styles[ o.value ] ); return { ...o, - isActive: ! isUndefined( styles[ o.value ] ), + isActive, onClick: () => toggleAttribute( o.value, o.defaultValue ), + icon: isActive ? check : undefined, }; } ); From 03870e77ab3d7ce7c1840f843b1b9c3cc6c65ce7 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Wed, 14 Jul 2021 15:04:33 +0300 Subject: [PATCH 15/16] Fix NumberControl import --- .../sidebar/global-styles-v2/screens/typography-element.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js b/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js index ed3eede14bed1b..65b6e386e8a7ff 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/screens/typography-element.js @@ -9,13 +9,13 @@ import { isUndefined, startCase } from 'lodash'; import { __experimentalGrid as Grid, __experimentalHeading as Heading, + __experimentalNumberControl as NumberControl, __experimentalVStack as VStack, Button, ButtonGroup, CardBody, DropdownMenu, FontSizePicker, - NumberControl, Panel, SelectControl, TextControl, From ed970748ae2342eafb6310b159128ccc2e5508fe Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Wed, 14 Jul 2021 15:05:29 +0300 Subject: [PATCH 16/16] Improve ButtonGroup placeholders --- .../sidebar/global-styles-v2/screens/colors-palette.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/screens/colors-palette.js b/packages/edit-site/src/components/sidebar/global-styles-v2/screens/colors-palette.js index a4367c89cef271..67127af41ce1a8 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-v2/screens/colors-palette.js +++ b/packages/edit-site/src/components/sidebar/global-styles-v2/screens/colors-palette.js @@ -50,9 +50,9 @@ const Palettes = () => { return ( <> - - - + + + { palettes.map( ( palette, index ) => (