diff --git a/package-lock.json b/package-lock.json index c644fee5f071c4..c2b66ded09cd97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -92,7 +92,6 @@ "version": "7.4.4", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz", "integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==", - "dev": true, "requires": { "@babel/types": "^7.4.4", "jsesc": "^2.5.1", @@ -105,7 +104,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz", "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==", - "dev": true, "requires": { "@babel/types": "^7.0.0" } @@ -169,7 +167,6 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz", "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==", - "dev": true, "requires": { "@babel/helper-get-function-arity": "^7.0.0", "@babel/template": "^7.1.0", @@ -287,7 +284,6 @@ "version": "7.4.4", "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", - "dev": true, "requires": { "@babel/types": "^7.4.4" } @@ -328,8 +324,7 @@ "@babel/parser": { "version": "7.4.4", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.4.tgz", - "integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w==", - "dev": true + "integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w==" }, "@babel/plugin-external-helpers": { "version": "7.2.0", @@ -1584,7 +1579,6 @@ "version": "7.4.4", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz", "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==", - "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "@babel/parser": "^7.4.4", @@ -1595,7 +1589,6 @@ "version": "7.4.5", "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.5.tgz", "integrity": "sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==", - "dev": true, "requires": { "@babel/code-frame": "^7.0.0", "@babel/generator": "^7.4.4", @@ -1611,14 +1604,12 @@ "@babel/parser": { "version": "7.6.2", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.2.tgz", - "integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg==", - "dev": true + "integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg==" }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", - "dev": true, "requires": { "ms": "^2.1.1" } @@ -1626,14 +1617,12 @@ "globals": { "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" } } }, @@ -6717,6 +6706,108 @@ } } }, + "@styled-system/background": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz", + "integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/border": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.2.tgz", + "integrity": "sha512-mSSxyQGXELdNSOlf4RqaOKsX+w6//zooR3p6qDj5Zgc5pIdEsJm63QLz6EST/6xBJwTX0Z1w4ExItdd6Q7rlTQ==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/color": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz", + "integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/core": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz", + "integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==", + "requires": { + "object-assign": "^4.1.1" + } + }, + "@styled-system/css": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.4.tgz", + "integrity": "sha512-79IFT37Kxb6dlbx/0hwIGOakNHkK5oU3cMypGziShnEK8WMgK/+vuAi4MHO7uLI+FZ5U8MGYvGY9Gtk0mBzxSg==" + }, + "@styled-system/flexbox": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz", + "integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/grid": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz", + "integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/layout": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz", + "integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/position": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz", + "integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/shadow": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz", + "integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/space": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz", + "integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/typography": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz", + "integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==", + "requires": { + "@styled-system/core": "^5.1.2" + } + }, + "@styled-system/variant": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.4.tgz", + "integrity": "sha512-4bI2AYQfWU/ljvWlysKU8T+6gsVx5xXEI/yBvg2De7Jd6o03ZQ9tsL3OJwbzyMkIKg+UZp7YG190txEOb8K6tg==", + "requires": { + "@styled-system/core": "^5.1.2", + "@styled-system/css": "^5.1.4" + } + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -7723,6 +7814,8 @@ "react-spring": "^8.0.20", "reakit": "^1.0.0-beta.12", "rememo": "^3.0.0", + "styled-components": "^4.4.0", + "styled-system": "^5.1.2", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" } @@ -10686,6 +10779,17 @@ "integrity": "sha512-EMZD1563QUqLhzrqcThk759RhuNVX/ZJdrtGK6drwzgvnR+ARjWyXIHPbu+tUNaMGtPz/gQeAM2M6VUw2UiUeA==", "dev": true }, + "babel-plugin-styled-components": { + "version": "1.10.6", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz", + "integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -12096,6 +12200,11 @@ "quick-lru": "^1.0.0" } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "can-use-dom": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz", @@ -13729,6 +13838,11 @@ } } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -13912,6 +14026,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "css-to-react-native": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz", + "integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-tree": { "version": "1.0.0-alpha.28", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz", @@ -19760,6 +19884,11 @@ "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", "dev": true }, + "is-what": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.4.0.tgz", + "integrity": "sha512-oFdBRuSY9PocqPoUUseDXek4I+A1kWGigZGhuG+7GEkp0tRkek11adc0HbTEVsNvtojV7rp0uhf5LWtGvHzoOQ==" + }, "is-whitespace-character": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz", @@ -21274,8 +21403,7 @@ "jsesc": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz", - "integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=", - "dev": true + "integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=" }, "json-parse-better-errors": { "version": "1.0.2", @@ -22701,8 +22829,7 @@ "memoize-one": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz", - "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==", - "dev": true + "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==" }, "memoizerific": { "version": "1.11.3", @@ -22806,6 +22933,14 @@ } } }, + "merge-anything": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz", + "integrity": "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==", + "requires": { + "is-what": "^3.3.1" + } + }, "merge-deep": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz", @@ -22819,7 +22954,7 @@ "dependencies": { "clone-deep": { "version": "0.2.4", - "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", + "resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", "integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=", "dev": true, "requires": { @@ -22853,7 +22988,7 @@ "dependencies": { "kind-of": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz", + "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz", "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=", "dev": true, "requires": { @@ -26848,8 +26983,7 @@ "postcss-value-parser": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", - "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=", - "dev": true + "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=" }, "prelude-ls": { "version": "1.1.2", @@ -31327,6 +31461,56 @@ "inline-style-parser": "0.1.1" } }, + "styled-components": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz", + "integrity": "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.0.0", + "@emotion/is-prop-valid": "^0.8.1", + "@emotion/unitless": "^0.7.0", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^2.2.2", + "memoize-one": "^5.0.0", + "merge-anything": "^2.2.4", + "prop-types": "^15.5.4", + "react-is": "^16.6.0", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^5.5.0" + }, + "dependencies": { + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "styled-system": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.4.tgz", + "integrity": "sha512-b1EdfZ41NDcR6vnvZauylhpFvSjsFl1yyQEUA+v3rLjcKdM//EIFY195Nh3YLwgj+hWIWsG0Tk1Kl0tq1xLw8Q==", + "requires": { + "@styled-system/background": "^5.1.2", + "@styled-system/border": "^5.1.2", + "@styled-system/color": "^5.1.2", + "@styled-system/core": "^5.1.2", + "@styled-system/flexbox": "^5.1.2", + "@styled-system/grid": "^5.1.2", + "@styled-system/layout": "^5.1.2", + "@styled-system/position": "^5.1.2", + "@styled-system/shadow": "^5.1.2", + "@styled-system/space": "^5.1.2", + "@styled-system/typography": "^5.1.2", + "@styled-system/variant": "^5.1.4", + "object-assign": "^4.1.1" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -31720,6 +31904,16 @@ } } }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "sugarss": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz", @@ -32818,8 +33012,7 @@ "trim-right": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz", - "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=", - "dev": true + "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=" }, "trim-trailing-lines": { "version": "1.1.1", diff --git a/packages/block-editor/src/components/block-breadcrumb/block-breadcrumb-button.js b/packages/block-editor/src/components/block-breadcrumb/block-breadcrumb-button.js new file mode 100644 index 00000000000000..daea791c6d9c14 --- /dev/null +++ b/packages/block-editor/src/components/block-breadcrumb/block-breadcrumb-button.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import { StyledPrimitives, styled } from '@wordpress/components'; + +const Button = styled( StyledPrimitives.Button )` + &:hover { + text-decoration: underline; + cursor: pointer; + color: ${ ( props ) => props.theme.colors.primary }; + } + &:focus{ + outline: none; + outline-offset: -2px; + box-shadow: none; + } +`; + +export default function BlockBreadcrumbButton( { children, ...props } ) { + return ; +} diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index adc96ba4eb2d51..239d0ef7cf0f47 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -9,6 +8,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import BlockTitle from '../block-title'; +import BlockBreadcrumbButton from './block-breadcrumb-button'; /** * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb. @@ -43,25 +43,21 @@ const BlockBreadcrumb = function() { aria-current={ ! hasSelection ? 'true' : undefined } > { hasSelection && ( - + ) } { ! hasSelection && __( 'Document' ) } { parents.map( ( parentClientId ) => (
  • - +
    • ) ) } { !! clientId && ( diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss index b20cdd273b2566..2f57b069964784 100644 --- a/packages/block-editor/src/components/block-breadcrumb/style.scss +++ b/packages/block-editor/src/components/block-breadcrumb/style.scss @@ -13,27 +13,10 @@ } } -.block-editor-block-breadcrumb__button.components-button { - height: $icon-button-size-small; - line-height: $icon-button-size-small; - padding: 0; - - &:hover { - text-decoration: underline; - } - - &:focus { - @include square-style__focus(); - outline-offset: -2px; - box-shadow: none; - } -} - .block-editor-block-breadcrumb__current { cursor: default; } -.block-editor-block-breadcrumb__button.components-button, .block-editor-block-breadcrumb__current { color: $dark-gray-500; padding: 0 $grid-size; diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index fc153b21ea303b..a9c279f30d47ec 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -38,6 +38,14 @@ const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasSingl event.currentTarget.focus(); } } onClick={ onToggle } + display={ 'inline-flex' } + alignItems={ 'center' } + color={ 'dark-gray-500' } + background={ 'none' } + border={ 'none' } + outline={ 'none' } + padding={ 'medium' } + margin={ 0 } className="editor-inserter__toggle block-editor-inserter__toggle" aria-haspopup={ ! hasSingleBlockType ? 'true' : false } aria-expanded={ ! hasSingleBlockType ? isOpen : false } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 528c46adb87d75..92ae8f762e5a79 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -24,13 +24,6 @@ $block-inserter-search-height: 38px; } .block-editor-inserter__toggle { - display: inline-flex; - align-items: center; - color: $dark-gray-500; - background: none; - cursor: pointer; - border: none; - outline: none; transition: color 0.2s ease; @include reduce-motion("transition"); } diff --git a/packages/components/package.json b/packages/components/package.json index ce48be95d2aae5..1a63bb3bf1e0a6 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -49,6 +49,8 @@ "react-spring": "^8.0.20", "reakit": "^1.0.0-beta.12", "rememo": "^3.0.0", + "styled-components": "^4.4.0", + "styled-system": "^5.1.2", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" }, diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js index 57de08de8bf79e..bae93d8ccee145 100644 --- a/packages/components/src/button/index.js +++ b/packages/components/src/button/index.js @@ -6,26 +6,29 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { createElement, forwardRef } from '@wordpress/element'; +import { forwardRef } from '@wordpress/element'; -export function Button( props, ref ) { - const { - href, - target, - isPrimary, - isLarge, - isSmall, - isTertiary, - isPressed, - isBusy, - isDefault, - isLink, - isDestructive, - className, - disabled, - ...additionalProps - } = props; +/** + * Internal dependencies + */ +import { Button as PrimitiveButton, A } from '../styled-primitives/button'; +export function Button( { + href, + target, + isPrimary, + isLarge, + isSmall, + isTertiary, + isPressed, + isBusy, + isDefault, + isLink, + isDestructive, + className, + disabled, + ...additionalProps +}, ref ) { const classes = classnames( 'components-button', className, { 'is-button': isDefault || isPrimary || isLarge || isSmall, 'is-default': isDefault || ( ! isPrimary && ( isLarge || isSmall ) ), @@ -43,13 +46,10 @@ export function Button( props, ref ) { const tagProps = tag === 'a' ? { href, target } : { type: 'button', disabled, 'aria-pressed': isPressed }; - - return createElement( tag, { - ...tagProps, - ...additionalProps, - className: classes, - ref, - } ); + const propsToPass = { ...tagProps, ...additionalProps, className: classes, ref }; + if ( tag === 'a' ) { + return ; + } return ; } export default forwardRef( Button ); diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 02a2f62492ae2c..2a431e26f70988 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -85,6 +85,9 @@ export { Consumer as __experimentalSlotFillConsumer, } from './slot-fill'; +// Primitives with styled-system +export { default as StyledPrimitives, styled } from './styled-primitives'; + // Higher-Order Components export { default as navigateRegions } from './higher-order/navigate-regions'; export { @@ -103,3 +106,4 @@ export { default as withNotices } from './higher-order/with-notices'; export { default as withSpokenMessages, } from './higher-order/with-spoken-messages'; +export { withTheme, default as ThemeProvider } from './theme-provider'; diff --git a/packages/components/src/styled-primitives/button/index.js b/packages/components/src/styled-primitives/button/index.js new file mode 100644 index 00000000000000..4a682e1e52f5ae --- /dev/null +++ b/packages/components/src/styled-primitives/button/index.js @@ -0,0 +1,28 @@ +/** + * External dependencies + */ +import styled from 'styled-components'; +import { color, space, layout, flexbox, background, border, position, shadow } + from 'styled-system'; + +export const Button = styled.button` +${ color } +${ space } +${ layout } +${ flexbox } +${ background } +${ border } +${ position } +${ shadow } +`; + +export const A = styled.a` +${ color } +${ space } +${ layout } +${ flexbox } +${ background } +${ border } +${ position } +${ shadow } +`; diff --git a/packages/components/src/styled-primitives/index.js b/packages/components/src/styled-primitives/index.js new file mode 100644 index 00000000000000..25ef7e8db3a648 --- /dev/null +++ b/packages/components/src/styled-primitives/index.js @@ -0,0 +1,14 @@ +/** + * External dependencies + */ +export { default as styled } from 'styled-components'; + +/** + * Internal dependencies + */ +import { A, Button } from './button'; + +export default { + A, + Button, +}; diff --git a/packages/components/src/theme-provider/index.js b/packages/components/src/theme-provider/index.js new file mode 100644 index 00000000000000..5d5bf5633d2436 --- /dev/null +++ b/packages/components/src/theme-provider/index.js @@ -0,0 +1,90 @@ +/** + * External dependencies + */ +import { ThemeProvider } from 'styled-components'; + +export { withTheme as withTheme } from 'styled-components'; + +const getTheme = ( theme ) => ( { + fontSizes: { + small: 12, + medium: 18, + big: 22, + }, + space: { + small: 4, + medium: 8, + large: 16, + xlarge: 24, + }, + zIndices: { + 'block-library-gallery-item__inline-menu': 20, + }, + colors: themes[ theme || '' ] || themes.default, +} ); + +const themes = { + default: { + primary: '#0085ba', + secondary: '#11a0d2', + toggle: '#11a0d2', + button: '#0085ba', + outlines: '#007cba', + 'dark-gray-500': '#555d66', + }, + 'admin-color-light': { + primary: '#0085ba', + secondary: '#c75726', + toggle: '#11a0d2', + button: '#0085ba', + outlines: '#007cba', + }, + 'admin-color-blue': { + primary: '#82b4cb', + secondary: '#d9ab59', + toggle: '#82b4cb', + button: '#d9ab59', + outlines: '#417e9B', + }, + 'admin-color-coffee': { + primary: '#c2a68c', + secondary: '#9fa47b', + toggle: '#c2a68c', + button: '#c2a68c', + outlines: '#59524c', + }, + 'admin-color-ectoplasm': { + primary: '#a7b656', + secondary: '#c77430', + toggle: '#a7b656', + button: '#a7b656', + outlines: '#523f6d', + }, + 'admin-color-midnight': { + primary: '#e14d43', + secondary: '#77a6b9', + toggle: '#77a6b9', + button: '#e14d43', + outlines: '#497b8d', + }, + 'admin-color-ocean': { + primary: '#a3b9a2', + secondary: '#a89d8a', + toggle: '#a3b9a2', + button: '#a3b9a2', + outlines: '#5e7d5e', + }, + 'admin-color-sunrise': { + primary: '#d1864a', + secondary: '#c8b03c', + toggle: '#c8b03c', + button: '#d1864a', + outlines: '#837425', + }, +}; + +export default ( { theme, children } ) => ( + + { children } + +); diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index eb6754e7cf665c..139d911b840b1a 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -14,6 +14,7 @@ import { KeyboardShortcuts, SlotFillProvider, DropZoneProvider, + ThemeProvider, } from '@wordpress/components'; import { compose } from '@wordpress/compose'; @@ -125,7 +126,9 @@ class Editor extends Component { > - + + +