From b9c48270f46314e3c55ebc55afeee099374d357c Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 9 Mar 2020 14:58:42 -0400 Subject: [PATCH 01/30] Update emotion library to latest. Adds to block-library package. --- package-lock.json | 199 +++++++++++++++++++++++++++-- packages/block-editor/package.json | 2 + packages/components/package.json | 8 +- 3 files changed, 194 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index a4184598a1d89..dca0eb541a9ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1878,6 +1878,7 @@ "version": "10.0.19", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.19.tgz", "integrity": "sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==", + "dev": true, "requires": { "@emotion/sheet": "0.9.3", "@emotion/stylis": "0.8.4", @@ -1889,6 +1890,7 @@ "version": "10.0.22", "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.22.tgz", "integrity": "sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==", + "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/cache": "^10.0.17", @@ -1902,6 +1904,7 @@ "version": "7.7.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", + "dev": true, "requires": { "regenerator-runtime": "^0.13.2" } @@ -1910,6 +1913,7 @@ "version": "10.0.22", "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.22.tgz", "integrity": "sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==", + "dev": true, "requires": { "@emotion/serialize": "^0.11.12", "@emotion/utils": "0.11.2", @@ -1920,6 +1924,7 @@ "version": "0.11.14", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz", "integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==", + "dev": true, "requires": { "@emotion/hash": "0.7.3", "@emotion/memoize": "0.7.3", @@ -1977,12 +1982,14 @@ "@emotion/hash": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz", - "integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==" + "integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==", + "dev": true }, "@emotion/is-prop-valid": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz", "integrity": "sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==", + "dev": true, "requires": { "@emotion/memoize": "0.7.3" } @@ -1990,7 +1997,8 @@ "@emotion/memoize": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz", - "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==" + "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==", + "dev": true }, "@emotion/native": { "version": "10.0.27", @@ -2045,12 +2053,14 @@ "@emotion/sheet": { "version": "0.9.3", "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz", - "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==" + "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==", + "dev": true }, "@emotion/styled": { "version": "10.0.23", "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.23.tgz", "integrity": "sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==", + "dev": true, "requires": { "@emotion/styled-base": "^10.0.23", "babel-plugin-emotion": "^10.0.23" @@ -2060,6 +2070,7 @@ "version": "10.0.24", "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.24.tgz", "integrity": "sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==", + "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/is-prop-valid": "0.8.5", @@ -2071,6 +2082,7 @@ "version": "7.7.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", + "dev": true, "requires": { "regenerator-runtime": "^0.13.2" } @@ -2079,6 +2091,7 @@ "version": "0.11.14", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz", "integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==", + "dev": true, "requires": { "@emotion/hash": "0.7.3", "@emotion/memoize": "0.7.3", @@ -2092,22 +2105,26 @@ "@emotion/stylis": { "version": "0.8.4", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz", - "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==" + "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==", + "dev": true }, "@emotion/unitless": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz", - "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==" + "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==", + "dev": true }, "@emotion/utils": { "version": "0.11.2", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz", - "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==" + "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==", + "dev": true }, "@emotion/weak-memoize": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz", - "integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==" + "integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==", + "dev": true }, "@evocateur/libnpmaccess": { "version": "3.1.2", @@ -10491,6 +10508,8 @@ "version": "file:packages/block-editor", "requires": { "@babel/runtime": "^7.8.3", + "@emotion/core": "^10.0.28", + "@emotion/styled": "^10.0.27", "@wordpress/a11y": "file:packages/a11y", "@wordpress/blob": "file:packages/blob", "@wordpress/blocks": "file:packages/blocks", @@ -10526,6 +10545,85 @@ "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "traverse": "^0.6.6" + }, + "dependencies": { + "@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "requires": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "@emotion/core": { + "version": "10.0.28", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz", + "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + } + }, + "@emotion/is-prop-valid": { + "version": "0.8.7", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.7.tgz", + "integrity": "sha512-OPkKzUeiid0vEKjZqnGcy2mzxjIlCffin+L2C02pdz/bVlt5zZZE2VzO0D3XOPnH0NEeF21QNKSXiZphjr4xiQ==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "@emotion/styled": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", + "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", + "requires": { + "@emotion/styled-base": "^10.0.27", + "babel-plugin-emotion": "^10.0.27" + } + }, + "@emotion/styled-base": { + "version": "10.0.28", + "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.28.tgz", + "integrity": "sha512-bLYVsPlFZ3SIR9YQsuFiJ9mML76ZLnsAfbkwBFbdMTCJ/0I+xgv+SG/QYHiLvGUUohjNVPeneYUyTUkcKndWxg==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/is-prop-valid": "0.8.7", + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3" + } + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + } } }, "@wordpress/block-library": { @@ -10612,10 +10710,10 @@ "version": "file:packages/components", "requires": { "@babel/runtime": "^7.8.3", - "@emotion/core": "^10.0.22", - "@emotion/css": "^10.0.22", - "@emotion/native": "^10.0.22", - "@emotion/styled": "^10.0.23", + "@emotion/core": "^10.0.28", + "@emotion/css": "^10.0.27", + "@emotion/native": "^10.0.27", + "@emotion/styled": "^10.0.27", "@wordpress/a11y": "file:packages/a11y", "@wordpress/compose": "file:packages/compose", "@wordpress/deprecated": "file:packages/deprecated", @@ -10644,6 +10742,85 @@ "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" + }, + "dependencies": { + "@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "requires": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "@emotion/core": { + "version": "10.0.28", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz", + "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + } + }, + "@emotion/is-prop-valid": { + "version": "0.8.7", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.7.tgz", + "integrity": "sha512-OPkKzUeiid0vEKjZqnGcy2mzxjIlCffin+L2C02pdz/bVlt5zZZE2VzO0D3XOPnH0NEeF21QNKSXiZphjr4xiQ==", + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "@emotion/styled": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", + "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", + "requires": { + "@emotion/styled-base": "^10.0.27", + "babel-plugin-emotion": "^10.0.27" + } + }, + "@emotion/styled-base": { + "version": "10.0.28", + "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.28.tgz", + "integrity": "sha512-bLYVsPlFZ3SIR9YQsuFiJ9mML76ZLnsAfbkwBFbdMTCJ/0I+xgv+SG/QYHiLvGUUohjNVPeneYUyTUkcKndWxg==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/is-prop-valid": "0.8.7", + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3" + } + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + } } }, "@wordpress/compose": { diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index de1af791c8e08..9d161a464915e 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -23,6 +23,8 @@ "react-native": "src/index", "dependencies": { "@babel/runtime": "^7.8.3", + "@emotion/core": "^10.0.28", + "@emotion/styled": "^10.0.27", "@wordpress/a11y": "file:../a11y", "@wordpress/blob": "file:../blob", "@wordpress/blocks": "file:../blocks", diff --git a/packages/components/package.json b/packages/components/package.json index 56b8bd902e9dc..1c2f616bc95be 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -25,10 +25,10 @@ ], "dependencies": { "@babel/runtime": "^7.8.3", - "@emotion/core": "^10.0.22", - "@emotion/css": "^10.0.22", - "@emotion/native": "^10.0.22", - "@emotion/styled": "^10.0.23", + "@emotion/core": "^10.0.28", + "@emotion/css": "^10.0.27", + "@emotion/native": "^10.0.27", + "@emotion/styled": "^10.0.27", "@wordpress/a11y": "file:../a11y", "@wordpress/compose": "file:../compose", "@wordpress/deprecated": "file:../deprecated", From 58d57f703f5a5a799a7e71ff2aa457feb1c968b7 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 9 Mar 2020 14:59:20 -0400 Subject: [PATCH 02/30] Add LineHeightControl component to block-editor --- .../components/line-height-control/index.js | 117 ++++++++++++++++++ .../components/line-height-control/styles.js | 13 ++ 2 files changed, 130 insertions(+) create mode 100644 packages/block-editor/src/components/line-height-control/index.js create mode 100644 packages/block-editor/src/components/line-height-control/styles.js diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js new file mode 100644 index 0000000000000..1ead55fce0d2b --- /dev/null +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -0,0 +1,117 @@ +/** + * External dependencies + */ +import { isUndefined } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { TextControl } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { DOWN, UP } from '@wordpress/keycodes'; + +/** + * Internal dependencies + */ +import { LineHeightControlWrapper } from './styles'; + +const BASE_DEFAULT_VALUE = 1.5; +const STEP = 0.1; + +export default function LineHeightControl( props ) { + const [ lineHeight, setLineHeight ] = useLineHeightState(); + + // Handles cases when there is no lineHeight defined. + // Improves interaction by starting with a base of 1.5, rather than 0. + const handleOnKeyDown = ( event ) => { + if ( ! isUndefined( lineHeight ) ) return; + + switch ( event.keyCode ) { + case UP: + event.preventDefault(); + return setLineHeight( BASE_DEFAULT_VALUE + STEP ); + case DOWN: + event.preventDefault(); + return setLineHeight( BASE_DEFAULT_VALUE - STEP ); + } + }; + + return ( + + + + ); +} + +export function getLineHeightControlStyles( attributes ) { + const { lineHeight } = attributes; + + return { + '--wp--core-paragraph--line-height': `${ lineHeight * 100 }%`, + }; +} + +export function getLineHeightControlClassName( attributes ) { + const { lineHeight } = attributes; + + return ! isUndefined( lineHeight ) ? 'has-line-height' : ''; +} + +function useLineHeightState() { + const attributes = useBlockAttributes(); + const setAttributes = useSetAttributes(); + + const { lineHeight } = attributes; + const setLineHeight = ( value ) => + setAttributes( { lineHeight: parseFloat( value ) } ); + + const value = isUndefined( lineHeight ) + ? undefined + : parseFloat( lineHeight ); + + return [ value, setLineHeight ]; +} + +function useBlockAttributes() { + const clientId = useSelectedBlockClientId(); + const { attributes } = useSelect( ( select ) => { + const { __unstableGetBlockWithoutInnerBlocks } = select( + 'core/block-editor' + ); + return __unstableGetBlockWithoutInnerBlocks( clientId ) || {}; + }, [] ); + + return attributes; +} + +function useSelectedBlockClientId() { + const clientId = useSelect( ( select ) => { + const { getSelectedBlockClientId } = select( 'core/block-editor' ); + return getSelectedBlockClientId(); + }, [] ); + + return clientId; +} + +function useSetAttributes() { + const clientId = useSelectedBlockClientId(); + const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); + + const setAttributes = ( newAttributes ) => { + updateBlockAttributes( clientId, newAttributes ); + }; + + return setAttributes; +} diff --git a/packages/block-editor/src/components/line-height-control/styles.js b/packages/block-editor/src/components/line-height-control/styles.js new file mode 100644 index 0000000000000..4cb5c3039eaf3 --- /dev/null +++ b/packages/block-editor/src/components/line-height-control/styles.js @@ -0,0 +1,13 @@ +/** + * External dependencies + */ +import styled from '@emotion/styled'; + +export const LineHeightControlWrapper = styled.div` + margin-bottom: 24px; + + input { + display: block; + max-width: 60px; + } +`; From d7fba5e630da6b8167761af2880d48f617e22efb Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 9 Mar 2020 15:01:53 -0400 Subject: [PATCH 03/30] Export LineHeightControl as experimental from block-editor --- packages/block-editor/src/components/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 0fd7fb2d4fb09..6042e395c553f 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -34,6 +34,11 @@ export { default as InnerBlocks } from './inner-blocks'; export { default as InspectorAdvancedControls } from './inspector-advanced-controls'; export { default as InspectorControls } from './inspector-controls'; export { default as __experimentalLinkControl } from './link-control'; +export { + default as __experimentalLineHeightControl, + getLineHeightControlStyles as __experimentalGetLineHeightControlStyles, + getLineHeightControlClassName as __experimentalGetLineHeightControlClassName, +} from './line-height-control'; export { default as MediaReplaceFlow } from './media-replace-flow'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as MediaUpload } from './media-upload'; From 9319076b3dc14aaec015cb7d22301b6e50c8d420 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 9 Mar 2020 15:02:26 -0400 Subject: [PATCH 04/30] Hook up LineHeightControl with core Paragraph block --- .../block-library/src/paragraph/block.json | 8 ++++++- packages/block-library/src/paragraph/edit.js | 23 +++++++++++++++---- .../block-library/src/paragraph/editor.scss | 4 ++++ packages/block-library/src/paragraph/save.js | 23 ++++++++++++++----- .../block-library/src/paragraph/style.scss | 4 ++++ 5 files changed, 50 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index ff252ec7760a3..f7cfc8160ef40 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -21,12 +21,18 @@ "fontSize": { "type": "string" }, + "lineHeight": { + "type": "number" + }, "customFontSize": { "type": "number" }, "direction": { "type": "string", - "enum": [ "ltr", "rtl" ] + "enum": [ + "ltr", + "rtl" + ] } } } diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index cda1879390d2c..25d13dfaa6ee9 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -16,6 +16,9 @@ import { RichText, withFontSizes, __experimentalBlock as Block, + __experimentalLineHeightControl as LineHeightControl, + __experimentalGetLineHeightControlStyles as getLineHeightStyles, + __experimentalGetLineHeightControlClassName as getLineHeightClassName, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { compose } from '@wordpress/compose'; @@ -82,11 +85,23 @@ function ParagraphBlock( { } ) { const { align, content, dropCap, placeholder, direction } = attributes; + const lineHeightStyles = getLineHeightStyles( attributes ); + const lineHeightClassName = getLineHeightClassName( attributes ); + const ref = useRef(); const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ fontSize.size, ] ); + const className = classnames( + { + 'has-drop-cap': dropCap, + [ `has-text-align-${ align }` ]: align, + [ fontSize.class ]: fontSize.class, + }, + lineHeightClassName + ); + return ( <> @@ -109,6 +124,7 @@ function ParagraphBlock( { value={ fontSize.size } onChange={ setFontSize } /> + Date: Mon, 9 Mar 2020 15:10:16 -0400 Subject: [PATCH 05/30] Improve undefined/reset interactions for line-height attribute --- .../src/components/line-height-control/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 1ead55fce0d2b..1e838f78ffd44 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { isUndefined } from 'lodash'; +import { isUndefined, isNaN } from 'lodash'; /** * WordPress dependencies @@ -77,9 +77,11 @@ function useLineHeightState() { const setLineHeight = ( value ) => setAttributes( { lineHeight: parseFloat( value ) } ); - const value = isUndefined( lineHeight ) - ? undefined - : parseFloat( lineHeight ); + let value = parseFloat( lineHeight ); + + if ( isNaN( value ) ) { + value = undefined; + } return [ value, setLineHeight ]; } From 7867960cd792db7a2794d6d001163c09f479739a Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 9 Mar 2020 16:36:14 -0400 Subject: [PATCH 06/30] Refactor store hook usage with LineHeightControl --- .../components/line-height-control/index.js | 135 +++++++++--------- packages/block-editor/src/index.js | 2 + packages/block-editor/src/store/hooks.js | 67 +++++++++ 3 files changed, 138 insertions(+), 66 deletions(-) create mode 100644 packages/block-editor/src/store/hooks.js diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 1e838f78ffd44..6cb237d6f2d57 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -1,53 +1,57 @@ /** * External dependencies */ -import { isUndefined, isNaN } from 'lodash'; +import { isUndefined } from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { TextControl } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { DOWN, UP } from '@wordpress/keycodes'; /** * Internal dependencies */ +import { __experimentalUseBlockEditProps as useBlockEditProps } from '../../index'; import { LineHeightControlWrapper } from './styles'; const BASE_DEFAULT_VALUE = 1.5; +const INITIAL_VALUE = ''; const STEP = 0.1; export default function LineHeightControl( props ) { const [ lineHeight, setLineHeight ] = useLineHeightState(); - // Handles cases when there is no lineHeight defined. - // Improves interaction by starting with a base of 1.5, rather than 0. - const handleOnKeyDown = ( event ) => { - if ( ! isUndefined( lineHeight ) ) return; - - switch ( event.keyCode ) { - case UP: - event.preventDefault(); - return setLineHeight( BASE_DEFAULT_VALUE + STEP ); - case DOWN: - event.preventDefault(); - return setLineHeight( BASE_DEFAULT_VALUE - STEP ); + const handleOnChange = ( nextValue ) => { + // Set the next value as normal if lineHeight has been defined + if ( isLineHeightDefined( lineHeight ) ) { + return setLineHeight( nextValue ); } + + // Otherwise... + let adjustedNextValue; + + if ( nextValue === `${ STEP }` ) { + // Increment by step value + adjustedNextValue = BASE_DEFAULT_VALUE + STEP; + } else { + // Decrement by step value + adjustedNextValue = BASE_DEFAULT_VALUE - STEP; + } + + setLineHeight( adjustedNextValue ); }; return ( @@ -55,65 +59,64 @@ export default function LineHeightControl( props ) { ); } -export function getLineHeightControlStyles( attributes ) { - const { lineHeight } = attributes; - - return { - '--wp--core-paragraph--line-height': `${ lineHeight * 100 }%`, - }; -} - -export function getLineHeightControlClassName( attributes ) { - const { lineHeight } = attributes; - - return ! isUndefined( lineHeight ) ? 'has-line-height' : ''; -} - +/** + * Retrieves the attributes/setter for the block, but adjusted to target just the lineHeight attribute + * + * @return {Array} [lineHeight, setLineHeight] from the block's edit props. + */ function useLineHeightState() { - const attributes = useBlockAttributes(); - const setAttributes = useSetAttributes(); + const [ attributes, setAttributes ] = useBlockEditProps(); const { lineHeight } = attributes; - const setLineHeight = ( value ) => - setAttributes( { lineHeight: parseFloat( value ) } ); - - let value = parseFloat( lineHeight ); - if ( isNaN( value ) ) { - value = undefined; - } + const setLineHeight = ( value ) => { + setAttributes( { lineHeight: value } ); + }; - return [ value, setLineHeight ]; + return [ lineHeight, setLineHeight ]; } -function useBlockAttributes() { - const clientId = useSelectedBlockClientId(); - const { attributes } = useSelect( ( select ) => { - const { __unstableGetBlockWithoutInnerBlocks } = select( - 'core/block-editor' - ); - return __unstableGetBlockWithoutInnerBlocks( clientId ) || {}; - }, [] ); - - return attributes; +/** + * Determines if the lineHeight attribute has been properly defined. + * + * @param {any} lineHeight The value to check. + * + * @return {boolean} Whether the lineHeight attribute is valid. + */ +function isLineHeightDefined( lineHeight ) { + return ! isUndefined( lineHeight ) && lineHeight !== INITIAL_VALUE; } -function useSelectedBlockClientId() { - const clientId = useSelect( ( select ) => { - const { getSelectedBlockClientId } = select( 'core/block-editor' ); - return getSelectedBlockClientId(); - }, [] ); - - return clientId; -} +/** + * Generates the "inline" lineHeight attribute styles, if defined. + * + * @param {Object} attributes Attributes from a block. + * + * @return {Object} Style properties with the lineHeight attribute, if defined. + */ +export function getLineHeightControlStyles( { lineHeight } = {} ) { + if ( ! isLineHeightDefined( lineHeight ) ) { + return {}; + } -function useSetAttributes() { - const clientId = useSelectedBlockClientId(); - const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); + const value = parseFloat( lineHeight ) * 100; - const setAttributes = ( newAttributes ) => { - updateBlockAttributes( clientId, newAttributes ); + return { + '--wp--core-paragraph--line-height': `${ value }%`, }; +} + +/** + * Generates the CSS className representing the lineHeight attribute styles, if defined. + * + * @param {Object} attributes Attributes from a block. + * + * @return {string} CSS className of the lineHeight attribute, if defined. + */ +export function getLineHeightControlClassName( { lineHeight } = {} ) { + if ( ! isLineHeightDefined( lineHeight ) ) { + return ''; + } - return setAttributes; + return 'has-line-height'; } diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 9e9e2a3c7a15b..9e63bf87a2780 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -15,3 +15,5 @@ export * from './components'; export * from './utils'; export { storeConfig } from './store'; export { SETTINGS_DEFAULTS } from './store/defaults'; + +export { useBlockEditProps as __experimentalUseBlockEditProps } from './store/hooks'; diff --git a/packages/block-editor/src/store/hooks.js b/packages/block-editor/src/store/hooks.js new file mode 100644 index 0000000000000..b635b1434a147 --- /dev/null +++ b/packages/block-editor/src/store/hooks.js @@ -0,0 +1,67 @@ +/** + * WordPress dependencies + */ +import { useCallback } from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; + +/** + * Retrieves the selected block clientId + * + * @return {string} Block clientId. + */ +export function useSelectedBlockClientId() { + const clientId = useSelect( ( select ) => { + const { getSelectedBlockClientId } = select( 'core/block-editor' ); + return getSelectedBlockClientId(); + }, [] ); + + return clientId; +} + +/** + * Retrieves setAttributes callback for the selected block. + * + * @return {Function} setAttributes callback. + */ +export function useSetAttributes() { + const clientId = useSelectedBlockClientId(); + const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); + + const setAttributes = useCallback( + ( newAttributes ) => { + updateBlockAttributes( clientId, newAttributes ); + }, + [ clientId ] + ); + + return setAttributes; +} + +/** + * Retrieves the selected block attributes + * + * @return {Object} Block attributes. + */ +export function useBlockAttributes() { + const clientId = useSelectedBlockClientId(); + const { attributes } = useSelect( ( select ) => { + const { __unstableGetBlockWithoutInnerBlocks } = select( + 'core/block-editor' + ); + return __unstableGetBlockWithoutInnerBlocks( clientId ) || {}; + }, [] ); + + return attributes || {}; +} + +/** + * Retrieves the attributes and setAttributes callback from the selected block. + * + * @return {Array} [attributes, setAttributes] + */ +export function useBlockEditProps() { + const attributes = useBlockAttributes(); + const setAttributes = useSetAttributes(); + + return [ attributes, setAttributes ]; +} From bb61179628434374e84c7542db888863f65ae970 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 9 Mar 2020 17:28:29 -0400 Subject: [PATCH 07/30] Refactor with withLineHeight HOC for Edit and Save components --- packages/block-editor/src/components/index.js | 3 +- .../components/line-height-control/index.js | 104 ++++-------------- .../components/line-height-control/utils.js | 77 +++++++++++++ .../line-height-control/with-line-height.js | 47 ++++++++ packages/block-library/src/paragraph/edit.js | 41 +++---- packages/block-library/src/paragraph/save.js | 20 ++-- 6 files changed, 174 insertions(+), 118 deletions(-) create mode 100644 packages/block-editor/src/components/line-height-control/utils.js create mode 100644 packages/block-editor/src/components/line-height-control/with-line-height.js diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 6042e395c553f..870abaa7125cf 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -36,8 +36,7 @@ export { default as InspectorControls } from './inspector-controls'; export { default as __experimentalLinkControl } from './link-control'; export { default as __experimentalLineHeightControl, - getLineHeightControlStyles as __experimentalGetLineHeightControlStyles, - getLineHeightControlClassName as __experimentalGetLineHeightControlClassName, + withLineHeight as __experimentalWithLineHeight, } from './line-height-control'; export { default as MediaReplaceFlow } from './media-replace-flow'; export { default as MediaPlaceholder } from './media-placeholder'; diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 6cb237d6f2d57..be16b850e5eb4 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { isUndefined } from 'lodash'; - /** * WordPress dependencies */ @@ -12,12 +7,20 @@ import { TextControl } from '@wordpress/components'; /** * Internal dependencies */ -import { __experimentalUseBlockEditProps as useBlockEditProps } from '../../index'; +import { + BASE_DEFAULT_VALUE, + INITIAL_VALUE, + STEP, + useLineHeightState, + isLineHeightDefined, +} from './utils'; import { LineHeightControlWrapper } from './styles'; -const BASE_DEFAULT_VALUE = 1.5; -const INITIAL_VALUE = ''; -const STEP = 0.1; +export { + getLineHeightControlStyles, + getLineHeightControlClassName, +} from './utils'; +export { default as withLineHeight } from './with-line-height'; export default function LineHeightControl( props ) { const [ lineHeight, setLineHeight ] = useLineHeightState(); @@ -25,18 +28,21 @@ export default function LineHeightControl( props ) { const handleOnChange = ( nextValue ) => { // Set the next value as normal if lineHeight has been defined if ( isLineHeightDefined( lineHeight ) ) { - return setLineHeight( nextValue ); + return setLineHeight( parseFloat( nextValue ) ); } // Otherwise... - let adjustedNextValue; - - if ( nextValue === `${ STEP }` ) { - // Increment by step value - adjustedNextValue = BASE_DEFAULT_VALUE + STEP; - } else { - // Decrement by step value - adjustedNextValue = BASE_DEFAULT_VALUE - STEP; + let adjustedNextValue = nextValue; + + switch ( nextValue ) { + case `${ STEP }`: + // Increment by step value + adjustedNextValue = BASE_DEFAULT_VALUE + STEP; + break; + case '0': + // Decrement by step value + adjustedNextValue = BASE_DEFAULT_VALUE - STEP; + break; } setLineHeight( adjustedNextValue ); @@ -58,65 +64,3 @@ export default function LineHeightControl( props ) { ); } - -/** - * Retrieves the attributes/setter for the block, but adjusted to target just the lineHeight attribute - * - * @return {Array} [lineHeight, setLineHeight] from the block's edit props. - */ -function useLineHeightState() { - const [ attributes, setAttributes ] = useBlockEditProps(); - - const { lineHeight } = attributes; - - const setLineHeight = ( value ) => { - setAttributes( { lineHeight: value } ); - }; - - return [ lineHeight, setLineHeight ]; -} - -/** - * Determines if the lineHeight attribute has been properly defined. - * - * @param {any} lineHeight The value to check. - * - * @return {boolean} Whether the lineHeight attribute is valid. - */ -function isLineHeightDefined( lineHeight ) { - return ! isUndefined( lineHeight ) && lineHeight !== INITIAL_VALUE; -} - -/** - * Generates the "inline" lineHeight attribute styles, if defined. - * - * @param {Object} attributes Attributes from a block. - * - * @return {Object} Style properties with the lineHeight attribute, if defined. - */ -export function getLineHeightControlStyles( { lineHeight } = {} ) { - if ( ! isLineHeightDefined( lineHeight ) ) { - return {}; - } - - const value = parseFloat( lineHeight ) * 100; - - return { - '--wp--core-paragraph--line-height': `${ value }%`, - }; -} - -/** - * Generates the CSS className representing the lineHeight attribute styles, if defined. - * - * @param {Object} attributes Attributes from a block. - * - * @return {string} CSS className of the lineHeight attribute, if defined. - */ -export function getLineHeightControlClassName( { lineHeight } = {} ) { - if ( ! isLineHeightDefined( lineHeight ) ) { - return ''; - } - - return 'has-line-height'; -} diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js new file mode 100644 index 0000000000000..cc1cb45f3fd54 --- /dev/null +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -0,0 +1,77 @@ +/** + * External dependencies + */ +import { isUndefined } from 'lodash'; + +/** + * Internal dependencies + */ +import { __experimentalUseBlockEditProps as useBlockEditProps } from '../../index'; + +export const BASE_DEFAULT_VALUE = 1.5; +export const INITIAL_VALUE = ''; +export const STEP = 0.1; + +/** + * Retrieves the attributes/setter for the block, but adjusted to target just the lineHeight attribute + * + * @return {Array} [lineHeight, setLineHeight] from the block's edit props. + */ +export function useLineHeightState() { + const [ attributes, setAttributes ] = useBlockEditProps(); + + const { lineHeight } = attributes; + + const setLineHeight = ( value ) => { + setAttributes( { lineHeight: value } ); + }; + + return [ lineHeight, setLineHeight ]; +} + +/** + * Determines if the lineHeight attribute has been properly defined. + * + * @param {any} lineHeight The value to check. + * + * @return {boolean} Whether the lineHeight attribute is valid. + */ +export function isLineHeightDefined( lineHeight ) { + return ! isUndefined( lineHeight ) && lineHeight !== INITIAL_VALUE; +} + +/** + * Generates the "inline" lineHeight attribute styles, if defined. + * + * @param {Object} attributes Attributes from a block. + * + * @return {Object} Style properties with the lineHeight attribute, if defined. + */ +export function getLineHeightControlStyles( { lineHeight } = {} ) { + if ( ! isLineHeightDefined( lineHeight ) ) { + return {}; + } + + const value = parseFloat( lineHeight ) * 100; + + // Using CSS variable to set the style. This reduces specifity, allowing for + // easier overrides, if needed. + return { + '--wp--core-paragraph--line-height': `${ value }%`, + }; +} + +/** + * Generates the CSS className representing the lineHeight attribute styles, if defined. + * + * @param {Object} attributes Attributes from a block. + * + * @return {string} CSS className of the lineHeight attribute, if defined. + */ +export function getLineHeightControlClassName( { lineHeight } = {} ) { + if ( ! isLineHeightDefined( lineHeight ) ) { + return ''; + } + + return 'has-line-height'; +} diff --git a/packages/block-editor/src/components/line-height-control/with-line-height.js b/packages/block-editor/src/components/line-height-control/with-line-height.js new file mode 100644 index 0000000000000..d68b7fbd2be8b --- /dev/null +++ b/packages/block-editor/src/components/line-height-control/with-line-height.js @@ -0,0 +1,47 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import { + getLineHeightControlStyles, + getLineHeightControlClassName, +} from './index'; + +/** + * Higher-order component that provides a Block's Edit/Save component with + * interpolated className and style based on the lineHeight attribute value. + */ +export default function withLineHeight() { + return ( WrappedComponent ) => { + return function ComposedComponent( { + attributes = {}, + className, + style = {}, + ...props + } ) { + const { lineHeight } = attributes; + const lineHeightStyles = getLineHeightControlStyles( { + lineHeight, + } ); + const lineHeightClassName = getLineHeightControlClassName( { + lineHeight, + } ); + + const classes = classnames( lineHeightClassName, className ); + const styles = { ...style, ...lineHeightStyles }; + + return ( + + ); + }; + }; +} diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 25d13dfaa6ee9..937dcccdce65a 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ @@ -16,9 +11,8 @@ import { RichText, withFontSizes, __experimentalBlock as Block, + __experimentalWithLineHeight as withLineHeight, __experimentalLineHeightControl as LineHeightControl, - __experimentalGetLineHeightControlStyles as getLineHeightStyles, - __experimentalGetLineHeightControlClassName as getLineHeightClassName, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { compose } from '@wordpress/compose'; @@ -82,25 +76,22 @@ function ParagraphBlock( { onReplace, setAttributes, setFontSize, + className, + style, } ) { const { align, content, dropCap, placeholder, direction } = attributes; - const lineHeightStyles = getLineHeightStyles( attributes ); - const lineHeightClassName = getLineHeightClassName( attributes ); - const ref = useRef(); const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ fontSize.size, ] ); - const className = classnames( - { - 'has-drop-cap': dropCap, - [ `has-text-align-${ align }` ]: align, - [ fontSize.class ]: fontSize.class, - }, - lineHeightClassName - ); + const styles = { + ...style, + fontSize: fontSize.size ? `${ fontSize.size }px` : undefined, + direction, + minHeight: dropCapMinimumHeight, + }; return ( <> @@ -144,12 +135,7 @@ function ParagraphBlock( { identifier="content" tagName={ Block.p } className={ className } - style={ { - ...lineHeightStyles, - fontSize: fontSize.size ? fontSize.size + 'px' : undefined, - direction, - minHeight: dropCapMinimumHeight, - } } + style={ styles } value={ content } onChange={ ( newContent ) => setAttributes( { content: newContent } ) @@ -185,8 +171,9 @@ function ParagraphBlock( { ); } -const ParagraphEdit = compose( [ withFontSizes( 'fontSize' ) ] )( - ParagraphBlock -); +const ParagraphEdit = compose( [ + withFontSizes( 'fontSize' ), + withLineHeight(), +] )( ParagraphBlock ); export default ParagraphEdit; diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js index e6661ea8cd51f..2054cab42f71f 100644 --- a/packages/block-library/src/paragraph/save.js +++ b/packages/block-library/src/paragraph/save.js @@ -9,11 +9,11 @@ import classnames from 'classnames'; import { getFontSizeClass, RichText, - __experimentalGetLineHeightControlStyles as getLineHeightStyles, - __experimentalGetLineHeightControlClassName as getLineHeightClassName, + __experimentalWithLineHeight as withLineHeight, } from '@wordpress/block-editor'; +import { compose } from '@wordpress/compose'; -export default function save( { attributes } ) { +function ParagraphSaveBlock( { attributes, className, style = {} } ) { const { align, content, @@ -23,21 +23,19 @@ export default function save( { attributes } ) { direction, } = attributes; - const lineHeightStyles = getLineHeightStyles( attributes ); - const lineHeightClassName = getLineHeightClassName( attributes ); const fontSizeClass = getFontSizeClass( fontSize ); - const className = classnames( + const classes = classnames( { 'has-drop-cap': dropCap, [ `has-text-align-${ align }` ]: align, [ fontSizeClass ]: fontSizeClass, }, - lineHeightClassName + className ); const styles = { - ...lineHeightStyles, + ...style, fontSize: fontSizeClass ? undefined : customFontSize, }; @@ -45,9 +43,13 @@ export default function save( { attributes } ) { ); } + +const ParagraphSave = compose( [ withLineHeight() ] )( ParagraphSaveBlock ); + +export default ParagraphSave; From 0facc594f63c074cf13afc5adc3020fa6de11000 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 9 Mar 2020 19:21:11 -0400 Subject: [PATCH 08/30] Improve reset logic. Simplifies stlye value output. --- .../src/components/line-height-control/index.js | 3 ++- .../src/components/line-height-control/utils.js | 10 ++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index be16b850e5eb4..6cacb903cfd53 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -28,7 +28,8 @@ export default function LineHeightControl( props ) { const handleOnChange = ( nextValue ) => { // Set the next value as normal if lineHeight has been defined if ( isLineHeightDefined( lineHeight ) ) { - return setLineHeight( parseFloat( nextValue ) ); + setLineHeight( nextValue ); + return; } // Otherwise... diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index cc1cb45f3fd54..1eb48e610d61e 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -23,7 +23,11 @@ export function useLineHeightState() { const { lineHeight } = attributes; const setLineHeight = ( value ) => { - setAttributes( { lineHeight: value } ); + const nextValue = isLineHeightDefined( value ) + ? parseFloat( value ) + : INITIAL_VALUE; + + setAttributes( { lineHeight: nextValue } ); }; return [ lineHeight, setLineHeight ]; @@ -52,12 +56,10 @@ export function getLineHeightControlStyles( { lineHeight } = {} ) { return {}; } - const value = parseFloat( lineHeight ) * 100; - // Using CSS variable to set the style. This reduces specifity, allowing for // easier overrides, if needed. return { - '--wp--core-paragraph--line-height': `${ value }%`, + '--wp--core-paragraph--line-height': `${ lineHeight }`, }; } From 601a1f21fa034e2173db78473b48981163086dd5 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 10 Mar 2020 11:04:44 -0400 Subject: [PATCH 09/30] Refactor function names and comments --- .../src/components/line-height-control/index.js | 14 ++++++-------- .../src/components/line-height-control/utils.js | 11 ++++++----- .../line-height-control/with-line-height.js | 12 +++++------- packages/block-editor/src/store/hooks.js | 2 +- 4 files changed, 18 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 6cacb903cfd53..88aeb90eb988c 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -11,22 +11,18 @@ import { BASE_DEFAULT_VALUE, INITIAL_VALUE, STEP, - useLineHeightState, + useLineHeightControlState, isLineHeightDefined, } from './utils'; import { LineHeightControlWrapper } from './styles'; -export { - getLineHeightControlStyles, - getLineHeightControlClassName, -} from './utils'; export { default as withLineHeight } from './with-line-height'; export default function LineHeightControl( props ) { - const [ lineHeight, setLineHeight ] = useLineHeightState(); + const [ lineHeight, setLineHeight ] = useLineHeightControlState(); const handleOnChange = ( nextValue ) => { - // Set the next value as normal if lineHeight has been defined + // Set the next value without modification if lineHeight has been defined if ( isLineHeightDefined( lineHeight ) ) { setLineHeight( nextValue ); return; @@ -49,6 +45,8 @@ export default function LineHeightControl( props ) { setLineHeight( adjustedNextValue ); }; + const value = lineHeight || INITIAL_VALUE; + return ( diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index 1eb48e610d61e..e03597d3befff 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -17,12 +17,13 @@ export const STEP = 0.1; * * @return {Array} [lineHeight, setLineHeight] from the block's edit props. */ -export function useLineHeightState() { +export function useLineHeightControlState() { const [ attributes, setAttributes ] = useBlockEditProps(); const { lineHeight } = attributes; const setLineHeight = ( value ) => { + // Value needs to be either a (float) number or empty string const nextValue = isLineHeightDefined( value ) ? parseFloat( value ) : INITIAL_VALUE; @@ -47,11 +48,11 @@ export function isLineHeightDefined( lineHeight ) { /** * Generates the "inline" lineHeight attribute styles, if defined. * - * @param {Object} attributes Attributes from a block. + * @param {number|string} lineHeight The line-height value to stylize. * * @return {Object} Style properties with the lineHeight attribute, if defined. */ -export function getLineHeightControlStyles( { lineHeight } = {} ) { +export function getLineHeightControlStyles( lineHeight ) { if ( ! isLineHeightDefined( lineHeight ) ) { return {}; } @@ -66,11 +67,11 @@ export function getLineHeightControlStyles( { lineHeight } = {} ) { /** * Generates the CSS className representing the lineHeight attribute styles, if defined. * - * @param {Object} attributes Attributes from a block. + * @param {number|string} lineHeight The line-height value render to className. * * @return {string} CSS className of the lineHeight attribute, if defined. */ -export function getLineHeightControlClassName( { lineHeight } = {} ) { +export function getLineHeightControlClassName( lineHeight ) { if ( ! isLineHeightDefined( lineHeight ) ) { return ''; } diff --git a/packages/block-editor/src/components/line-height-control/with-line-height.js b/packages/block-editor/src/components/line-height-control/with-line-height.js index d68b7fbd2be8b..c181939644182 100644 --- a/packages/block-editor/src/components/line-height-control/with-line-height.js +++ b/packages/block-editor/src/components/line-height-control/with-line-height.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { getLineHeightControlStyles, getLineHeightControlClassName, -} from './index'; +} from './utils'; /** * Higher-order component that provides a Block's Edit/Save component with @@ -24,12 +24,10 @@ export default function withLineHeight() { ...props } ) { const { lineHeight } = attributes; - const lineHeightStyles = getLineHeightControlStyles( { - lineHeight, - } ); - const lineHeightClassName = getLineHeightControlClassName( { - lineHeight, - } ); + const lineHeightStyles = getLineHeightControlStyles( lineHeight ); + const lineHeightClassName = getLineHeightControlClassName( + lineHeight + ); const classes = classnames( lineHeightClassName, className ); const styles = { ...style, ...lineHeightStyles }; diff --git a/packages/block-editor/src/store/hooks.js b/packages/block-editor/src/store/hooks.js index b635b1434a147..f175b5d9b8ade 100644 --- a/packages/block-editor/src/store/hooks.js +++ b/packages/block-editor/src/store/hooks.js @@ -57,7 +57,7 @@ export function useBlockAttributes() { /** * Retrieves the attributes and setAttributes callback from the selected block. * - * @return {Array} [attributes, setAttributes] + * @return {Array} [attributes, setAttributes] for a block. */ export function useBlockEditProps() { const attributes = useBlockAttributes(); From d455c174ad5c7d21a1a6497daeee1a70a0d55c0c Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 10 Mar 2020 11:43:21 -0400 Subject: [PATCH 10/30] Fix import/export of new experimental attribute hooks --- .../block-editor/src/components/line-height-control/utils.js | 2 +- packages/block-editor/src/index.js | 2 -- packages/block-editor/src/store/index.js | 2 ++ 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index e03597d3befff..665ad0a1b2eb3 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -6,7 +6,7 @@ import { isUndefined } from 'lodash'; /** * Internal dependencies */ -import { __experimentalUseBlockEditProps as useBlockEditProps } from '../../index'; +import { __experimentalUseBlockEditProps as useBlockEditProps } from '../../store'; export const BASE_DEFAULT_VALUE = 1.5; export const INITIAL_VALUE = ''; diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 9e63bf87a2780..9e9e2a3c7a15b 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -15,5 +15,3 @@ export * from './components'; export * from './utils'; export { storeConfig } from './store'; export { SETTINGS_DEFAULTS } from './store/defaults'; - -export { useBlockEditProps as __experimentalUseBlockEditProps } from './store/hooks'; diff --git a/packages/block-editor/src/store/index.js b/packages/block-editor/src/store/index.js index bfc7766a50876..206a1fc4505d5 100644 --- a/packages/block-editor/src/store/index.js +++ b/packages/block-editor/src/store/index.js @@ -37,4 +37,6 @@ const store = registerStore( MODULE_KEY, { } ); applyMiddlewares( store ); +export { useBlockEditProps as __experimentalUseBlockEditProps } from './hooks'; + export default store; From ce678af1d8b35b22660f0408384f4138fc9c7cbe Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 11 Mar 2020 09:57:55 -0400 Subject: [PATCH 11/30] Export LineHeightControls and withLineHeight for native --- packages/block-editor/src/components/index.native.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index 130cde1c2303b..c9274b97b27b6 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -11,6 +11,10 @@ export * from './font-sizes'; export { default as AlignmentToolbar } from './alignment-toolbar'; export { default as InnerBlocks } from './inner-blocks'; export { default as InspectorControls } from './inspector-controls'; +export { + default as __experimentalLineHeightControl, + withLineHeight as __experimentalWithLineHeight, +} from './line-height-control'; export { default as PlainText } from './plain-text'; export { default as RichText, From 499d59eea76651c4759424d90c1b8501a3695fa7 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 11 Mar 2020 12:45:16 -0400 Subject: [PATCH 12/30] Adjust mechanism to get block attributes in useBlockAttributes hook --- packages/block-editor/src/store/hooks.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/store/hooks.js b/packages/block-editor/src/store/hooks.js index f175b5d9b8ade..00d206c0152f1 100644 --- a/packages/block-editor/src/store/hooks.js +++ b/packages/block-editor/src/store/hooks.js @@ -44,14 +44,12 @@ export function useSetAttributes() { */ export function useBlockAttributes() { const clientId = useSelectedBlockClientId(); - const { attributes } = useSelect( ( select ) => { - const { __unstableGetBlockWithoutInnerBlocks } = select( - 'core/block-editor' - ); - return __unstableGetBlockWithoutInnerBlocks( clientId ) || {}; + const attributes = useSelect( ( select ) => { + const { getBlockAttributes } = select( 'core/block-editor' ); + return getBlockAttributes( clientId ) || {}; }, [] ); - return attributes || {}; + return attributes; } /** From c329f21f5f2befb3e5667971035e6c45d56e0b6a Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 11 Mar 2020 14:31:25 -0400 Subject: [PATCH 13/30] Add theme support for disable-custom-line-height --- lib/client-assets.php | 12 ++++++++++++ .../components/line-height-control/index.js | 7 +++++++ .../components/line-height-control/utils.js | 19 +++++++++++++++++++ .../editor/src/components/provider/index.js | 1 + 4 files changed, 39 insertions(+) diff --git a/lib/client-assets.php b/lib/client-assets.php index 1f3016019b6dc..ca870791da59a 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -647,6 +647,18 @@ function gutenberg_extend_settings_block_patterns( $settings ) { } add_filter( 'block_editor_settings', 'gutenberg_extend_settings_block_patterns', 0 ); +/** + * Extends block editor settings to determine whether to use custom line height controls. + * + * @param array $settings Default editor settings. + * + * @return array Filtered editor settings. + */ +function gutenberg_extend_settings_custom_line_height( $settings ) { + $settings['disableCustomLineHeight'] = get_theme_support( 'disable-custom-line-height' ); + return $settings; +} +add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_line_height' ); /* * Register default patterns if not registered in Core already. diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 88aeb90eb988c..ff9898d31b7c8 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -11,6 +11,7 @@ import { BASE_DEFAULT_VALUE, INITIAL_VALUE, STEP, + useIsLineHeightControlsDisabled, useLineHeightControlState, isLineHeightDefined, } from './utils'; @@ -20,6 +21,12 @@ export { default as withLineHeight } from './with-line-height'; export default function LineHeightControl( props ) { const [ lineHeight, setLineHeight ] = useLineHeightControlState(); + const isDisabled = useIsLineHeightControlsDisabled(); + + // Don't render the controls if disabled by editor settings + if ( isDisabled ) { + return null; + } const handleOnChange = ( nextValue ) => { // Set the next value without modification if lineHeight has been defined diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index 665ad0a1b2eb3..fa282bc652a78 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -3,6 +3,11 @@ */ import { isUndefined } from 'lodash'; +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + /** * Internal dependencies */ @@ -12,6 +17,20 @@ export const BASE_DEFAULT_VALUE = 1.5; export const INITIAL_VALUE = ''; export const STEP = 0.1; +/** + * Retrieves whether custom lineHeight controls should be disabled from editor settings. + * + * @return {boolean} Whether lineHeight controls should be disabled. + */ +export function useIsLineHeightControlsDisabled() { + const isDisabled = useSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + return !! getSettings().disableCustomLineHeight; + }, [] ); + + return isDisabled; +} + /** * Retrieves the attributes/setter for the block, but adjusted to target just the lineHeight attribute * diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 555b7b88f0250..2fe6dc6a591a1 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -104,6 +104,7 @@ class EditorProvider extends Component { 'disableCustomColors', 'disableCustomFontSizes', 'disableCustomGradients', + 'disableCustomLineHeight', 'focusMode', 'fontSizes', 'hasFixedToolbar', From 2d6beb4934e9c934fe80e1421b104dcc847bbbc7 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Thu, 12 Mar 2020 10:23:16 -0400 Subject: [PATCH 14/30] Clarify logic + add comments for lineHeight attribute -> value evaluation --- .../components/line-height-control/index.js | 7 ++++--- .../components/line-height-control/utils.js | 21 ++++++++++++++----- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index ff9898d31b7c8..423eec94528b3 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -9,7 +9,7 @@ import { TextControl } from '@wordpress/components'; */ import { BASE_DEFAULT_VALUE, - INITIAL_VALUE, + RESET_VALUE, STEP, useIsLineHeightControlsDisabled, useLineHeightControlState, @@ -22,6 +22,7 @@ export { default as withLineHeight } from './with-line-height'; export default function LineHeightControl( props ) { const [ lineHeight, setLineHeight ] = useLineHeightControlState(); const isDisabled = useIsLineHeightControlsDisabled(); + const isDefined = isLineHeightDefined( lineHeight ); // Don't render the controls if disabled by editor settings if ( isDisabled ) { @@ -30,7 +31,7 @@ export default function LineHeightControl( props ) { const handleOnChange = ( nextValue ) => { // Set the next value without modification if lineHeight has been defined - if ( isLineHeightDefined( lineHeight ) ) { + if ( isDefined ) { setLineHeight( nextValue ); return; } @@ -52,7 +53,7 @@ export default function LineHeightControl( props ) { setLineHeight( adjustedNextValue ); }; - const value = lineHeight || INITIAL_VALUE; + const value = isDefined ? lineHeight : RESET_VALUE; return ( diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index fa282bc652a78..1116447994608 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -14,8 +14,18 @@ import { useSelect } from '@wordpress/data'; import { __experimentalUseBlockEditProps as useBlockEditProps } from '../../store'; export const BASE_DEFAULT_VALUE = 1.5; -export const INITIAL_VALUE = ''; export const STEP = 0.1; +/** + * There are varying value types within LineHeightControl: + * + * {undefined} Initial value. No changes from the user. + * {string} Input value. Value consumed/outputted by the input. Empty would be ''. + * {number} Block attribute type. Input value needs to be converted for attribute setting. + * + * Note: If the value is undefined, the input requires it to be an empty string ('') + * in order to be considered "controlled" by props (rather than internal state). + */ +export const RESET_VALUE = ''; /** * Retrieves whether custom lineHeight controls should be disabled from editor settings. @@ -42,10 +52,11 @@ export function useLineHeightControlState() { const { lineHeight } = attributes; const setLineHeight = ( value ) => { - // Value needs to be either a (float) number or empty string const nextValue = isLineHeightDefined( value ) - ? parseFloat( value ) - : INITIAL_VALUE; + ? // Convert to a number for the block attribute + parseFloat( value ) + : // Unset for the block attribute + undefined; setAttributes( { lineHeight: nextValue } ); }; @@ -61,7 +72,7 @@ export function useLineHeightControlState() { * @return {boolean} Whether the lineHeight attribute is valid. */ export function isLineHeightDefined( lineHeight ) { - return ! isUndefined( lineHeight ) && lineHeight !== INITIAL_VALUE; + return ! isUndefined( lineHeight ) && lineHeight !== RESET_VALUE; } /** From 2e9930113751e0c7eb64fcae3f76bd814d634750 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Thu, 12 Mar 2020 10:24:03 -0400 Subject: [PATCH 15/30] Simplify CSS output for lineHeight in paragraph block --- packages/block-library/src/paragraph/editor.scss | 4 ---- packages/block-library/src/paragraph/style.scss | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss index aa4a95ba4761f..20b0f6a4311cd 100644 --- a/packages/block-library/src/paragraph/editor.scss +++ b/packages/block-library/src/paragraph/editor.scss @@ -1,7 +1,3 @@ -.block-editor-block-list__block[data-type="core/paragraph"].has-line-height { - line-height: var(--wp--core-paragraph--line-height, inherit); -} - // Overwrite the inline style to make the height collapse when the paragraph editable gets focus. .block-editor-block-list__block[data-type="core/paragraph"].has-drop-cap:focus { min-height: auto !important; diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 2d5e744401c90..2b56d15085ffc 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -33,7 +33,7 @@ font-style: normal; } -p.has-line-height { +:root p.has-line-height { line-height: var(--wp--core-paragraph--line-height, inherit); } From 864e8ea5c513cb4af10cf7c4ba04171a23451423 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Thu, 12 Mar 2020 10:53:36 -0400 Subject: [PATCH 16/30] Add experimental prefix for disableCustomLineHeight setting --- lib/client-assets.php | 3 ++- .../block-editor/src/components/line-height-control/utils.js | 3 ++- packages/editor/src/components/provider/index.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index ca870791da59a..9c05c51667eb7 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -649,13 +649,14 @@ function gutenberg_extend_settings_block_patterns( $settings ) { /** * Extends block editor settings to determine whether to use custom line height controls. + * Currently experimental. * * @param array $settings Default editor settings. * * @return array Filtered editor settings. */ function gutenberg_extend_settings_custom_line_height( $settings ) { - $settings['disableCustomLineHeight'] = get_theme_support( 'disable-custom-line-height' ); + $settings['__experimentalDisableCustomLineHeight'] = get_theme_support( 'disable-custom-line-height' ); return $settings; } add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_line_height' ); diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index 1116447994608..94e6db8d580c0 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -35,7 +35,8 @@ export const RESET_VALUE = ''; export function useIsLineHeightControlsDisabled() { const isDisabled = useSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); - return !! getSettings().disableCustomLineHeight; + + return !! getSettings().__experimentalDisableCustomLineHeight; }, [] ); return isDisabled; diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 2fe6dc6a591a1..5cbd7751736b9 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -104,7 +104,6 @@ class EditorProvider extends Component { 'disableCustomColors', 'disableCustomFontSizes', 'disableCustomGradients', - 'disableCustomLineHeight', 'focusMode', 'fontSizes', 'hasFixedToolbar', @@ -124,6 +123,7 @@ class EditorProvider extends Component { '__experimentalEnableFullSiteEditingDemo', '__experimentalGlobalStylesUserEntityId', '__experimentalGlobalStylesBase', + '__experimentalDisableCustomLineHeight', 'gradients', ] ), mediaUpload: hasUploadPermissions ? mediaUpload : undefined, From cc18a2b70afb33e9c2f447ecf184e2aa8f66f3ca Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 16 Mar 2020 09:50:11 -0400 Subject: [PATCH 17/30] Add comment for :root based CSS rule --- packages/block-library/src/paragraph/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 2b56d15085ffc..5636f5a76e2c7 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -33,6 +33,8 @@ font-style: normal; } +// :root increases CSS specificity +// This improves rendering consistency within the editor and site. :root p.has-line-height { line-height: var(--wp--core-paragraph--line-height, inherit); } From 0838ee098f555c11cb8d66b68128d8eba9817c29 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 16 Mar 2020 10:17:15 -0400 Subject: [PATCH 18/30] Removes @emotion from block-library. Refactor to use scss --- package-lock.json | 2 -- packages/block-editor/package.json | 2 -- .../components/line-height-control/index.js | 18 ++++++++++++++---- .../components/line-height-control/style.scss | 8 ++++++++ .../components/line-height-control/styles.js | 13 ------------- packages/block-editor/src/style.scss | 1 + 6 files changed, 23 insertions(+), 21 deletions(-) create mode 100644 packages/block-editor/src/components/line-height-control/style.scss delete mode 100644 packages/block-editor/src/components/line-height-control/styles.js diff --git a/package-lock.json b/package-lock.json index dca0eb541a9ff..c0d03efa6bf59 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10508,8 +10508,6 @@ "version": "file:packages/block-editor", "requires": { "@babel/runtime": "^7.8.3", - "@emotion/core": "^10.0.28", - "@emotion/styled": "^10.0.27", "@wordpress/a11y": "file:packages/a11y", "@wordpress/blob": "file:packages/blob", "@wordpress/blocks": "file:packages/blocks", diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 9d161a464915e..de1af791c8e08 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -23,8 +23,6 @@ "react-native": "src/index", "dependencies": { "@babel/runtime": "^7.8.3", - "@emotion/core": "^10.0.28", - "@emotion/styled": "^10.0.27", "@wordpress/a11y": "file:../a11y", "@wordpress/blob": "file:../blob", "@wordpress/blocks": "file:../blocks", diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 423eec94528b3..619fca8cc9a90 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -15,11 +20,14 @@ import { useLineHeightControlState, isLineHeightDefined, } from './utils'; -import { LineHeightControlWrapper } from './styles'; export { default as withLineHeight } from './with-line-height'; -export default function LineHeightControl( props ) { +export default function LineHeightControl( { + className, + style = {}, + ...props +} ) { const [ lineHeight, setLineHeight ] = useLineHeightControlState(); const isDisabled = useIsLineHeightControlsDisabled(); const isDefined = isLineHeightDefined( lineHeight ); @@ -53,10 +61,12 @@ export default function LineHeightControl( props ) { setLineHeight( adjustedNextValue ); }; + const classes = classnames( 'block-editor-line-height-control', className ); + const value = isDefined ? lineHeight : RESET_VALUE; return ( - +
- +
); } diff --git a/packages/block-editor/src/components/line-height-control/style.scss b/packages/block-editor/src/components/line-height-control/style.scss new file mode 100644 index 0000000000000..ad98d76e4a2ed --- /dev/null +++ b/packages/block-editor/src/components/line-height-control/style.scss @@ -0,0 +1,8 @@ +.block-editor-line-height-control { + margin-bottom: 24px; + + input { + display: block; + max-width: 60px; + } +} diff --git a/packages/block-editor/src/components/line-height-control/styles.js b/packages/block-editor/src/components/line-height-control/styles.js deleted file mode 100644 index 4cb5c3039eaf3..0000000000000 --- a/packages/block-editor/src/components/line-height-control/styles.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * External dependencies - */ -import styled from '@emotion/styled'; - -export const LineHeightControlWrapper = styled.div` - margin-bottom: 24px; - - input { - display: block; - max-width: 60px; - } -`; diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index cdf78fbc8f498..3f4ae8b3b3136 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -27,6 +27,7 @@ @import "./components/contrast-checker/style.scss"; @import "./components/default-block-appender/style.scss"; @import "./components/link-control/style.scss"; +@import "./components/line-height-control/style.scss"; @import "./components/image-size-control/style.scss"; @import "./components/inner-blocks/style.scss"; @import "./components/inserter-list-item/style.scss"; From 002e7539ed211b07088026fb063112dd30e88122 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 17 Mar 2020 12:00:57 -0400 Subject: [PATCH 19/30] Remove withLineHeight HOC abstraction. Reverted to use inline styles instead of CSS variable for line-height style rendering --- packages/block-editor/src/components/index.js | 5 +-- .../components/line-height-control/index.js | 2 - .../components/line-height-control/utils.js | 34 -------------- .../line-height-control/with-line-height.js | 45 ------------------- packages/block-library/src/paragraph/edit.js | 25 +++++++---- packages/block-library/src/paragraph/save.js | 30 +++++-------- .../block-library/src/paragraph/style.scss | 6 --- 7 files changed, 28 insertions(+), 119 deletions(-) delete mode 100644 packages/block-editor/src/components/line-height-control/with-line-height.js diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 870abaa7125cf..0463948da0ce3 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -34,10 +34,7 @@ export { default as InnerBlocks } from './inner-blocks'; export { default as InspectorAdvancedControls } from './inspector-advanced-controls'; export { default as InspectorControls } from './inspector-controls'; export { default as __experimentalLinkControl } from './link-control'; -export { - default as __experimentalLineHeightControl, - withLineHeight as __experimentalWithLineHeight, -} from './line-height-control'; +export { default as __experimentalLineHeightControl } from './line-height-control'; export { default as MediaReplaceFlow } from './media-replace-flow'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as MediaUpload } from './media-upload'; diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 619fca8cc9a90..c94089a7f9b90 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -21,8 +21,6 @@ import { isLineHeightDefined, } from './utils'; -export { default as withLineHeight } from './with-line-height'; - export default function LineHeightControl( { className, style = {}, diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index 94e6db8d580c0..b4ba6d72a6646 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -75,37 +75,3 @@ export function useLineHeightControlState() { export function isLineHeightDefined( lineHeight ) { return ! isUndefined( lineHeight ) && lineHeight !== RESET_VALUE; } - -/** - * Generates the "inline" lineHeight attribute styles, if defined. - * - * @param {number|string} lineHeight The line-height value to stylize. - * - * @return {Object} Style properties with the lineHeight attribute, if defined. - */ -export function getLineHeightControlStyles( lineHeight ) { - if ( ! isLineHeightDefined( lineHeight ) ) { - return {}; - } - - // Using CSS variable to set the style. This reduces specifity, allowing for - // easier overrides, if needed. - return { - '--wp--core-paragraph--line-height': `${ lineHeight }`, - }; -} - -/** - * Generates the CSS className representing the lineHeight attribute styles, if defined. - * - * @param {number|string} lineHeight The line-height value render to className. - * - * @return {string} CSS className of the lineHeight attribute, if defined. - */ -export function getLineHeightControlClassName( lineHeight ) { - if ( ! isLineHeightDefined( lineHeight ) ) { - return ''; - } - - return 'has-line-height'; -} diff --git a/packages/block-editor/src/components/line-height-control/with-line-height.js b/packages/block-editor/src/components/line-height-control/with-line-height.js deleted file mode 100644 index c181939644182..0000000000000 --- a/packages/block-editor/src/components/line-height-control/with-line-height.js +++ /dev/null @@ -1,45 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * Internal dependencies - */ -import { - getLineHeightControlStyles, - getLineHeightControlClassName, -} from './utils'; - -/** - * Higher-order component that provides a Block's Edit/Save component with - * interpolated className and style based on the lineHeight attribute value. - */ -export default function withLineHeight() { - return ( WrappedComponent ) => { - return function ComposedComponent( { - attributes = {}, - className, - style = {}, - ...props - } ) { - const { lineHeight } = attributes; - const lineHeightStyles = getLineHeightControlStyles( lineHeight ); - const lineHeightClassName = getLineHeightControlClassName( - lineHeight - ); - - const classes = classnames( lineHeightClassName, className ); - const styles = { ...style, ...lineHeightStyles }; - - return ( - - ); - }; - }; -} diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 937dcccdce65a..5dab31ec71ea6 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { isUndefined } from 'lodash'; + /** * WordPress dependencies */ @@ -11,7 +16,6 @@ import { RichText, withFontSizes, __experimentalBlock as Block, - __experimentalWithLineHeight as withLineHeight, __experimentalLineHeightControl as LineHeightControl, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; @@ -77,9 +81,15 @@ function ParagraphBlock( { setAttributes, setFontSize, className, - style, } ) { - const { align, content, dropCap, placeholder, direction } = attributes; + const { + align, + content, + dropCap, + placeholder, + direction, + lineHeight, + } = attributes; const ref = useRef(); const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ @@ -87,10 +97,10 @@ function ParagraphBlock( { ] ); const styles = { - ...style, fontSize: fontSize.size ? `${ fontSize.size }px` : undefined, direction, minHeight: dropCapMinimumHeight, + lineHeight: isUndefined( lineHeight ) ? undefined : lineHeight, }; return ( @@ -171,9 +181,8 @@ function ParagraphBlock( { ); } -const ParagraphEdit = compose( [ - withFontSizes( 'fontSize' ), - withLineHeight(), -] )( ParagraphBlock ); +const ParagraphEdit = compose( [ withFontSizes( 'fontSize' ) ] )( + ParagraphBlock +); export default ParagraphEdit; diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js index 2054cab42f71f..047839b476054 100644 --- a/packages/block-library/src/paragraph/save.js +++ b/packages/block-library/src/paragraph/save.js @@ -2,18 +2,14 @@ * External dependencies */ import classnames from 'classnames'; +import { isUndefined } from 'lodash'; /** * WordPress dependencies */ -import { - getFontSizeClass, - RichText, - __experimentalWithLineHeight as withLineHeight, -} from '@wordpress/block-editor'; -import { compose } from '@wordpress/compose'; +import { getFontSizeClass, RichText } from '@wordpress/block-editor'; -function ParagraphSaveBlock( { attributes, className, style = {} } ) { +export default function save( { attributes } ) { const { align, content, @@ -21,22 +17,20 @@ function ParagraphSaveBlock( { attributes, className, style = {} } ) { fontSize, customFontSize, direction, + lineHeight, } = attributes; const fontSizeClass = getFontSizeClass( fontSize ); - const classes = classnames( - { - 'has-drop-cap': dropCap, - [ `has-text-align-${ align }` ]: align, - [ fontSizeClass ]: fontSizeClass, - }, - className - ); + const classes = classnames( { + 'has-drop-cap': dropCap, + [ `has-text-align-${ align }` ]: align, + [ fontSizeClass ]: fontSizeClass, + } ); const styles = { - ...style, fontSize: fontSizeClass ? undefined : customFontSize, + lineHeight: isUndefined( lineHeight ) ? undefined : lineHeight, }; return ( @@ -49,7 +43,3 @@ function ParagraphSaveBlock( { attributes, className, style = {} } ) { /> ); } - -const ParagraphSave = compose( [ withLineHeight() ] )( ParagraphSaveBlock ); - -export default ParagraphSave; diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 5636f5a76e2c7..f43612c851d1f 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -33,12 +33,6 @@ font-style: normal; } -// :root increases CSS specificity -// This improves rendering consistency within the editor and site. -:root p.has-line-height { - line-height: var(--wp--core-paragraph--line-height, inherit); -} - p.has-background { padding: $block-bg-padding--v $block-bg-padding--h; } From 3bd0457298fdc392f6f1c7f14323f4f63b78052f Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 17 Mar 2020 12:14:34 -0400 Subject: [PATCH 20/30] Revert className implementation Also revert @emotion library versions to master --- packages/block-library/src/paragraph/edit.js | 12 ++++++++---- packages/block-library/src/paragraph/save.js | 4 ++-- packages/components/package.json | 8 ++++---- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 5dab31ec71ea6..0b93570a6f184 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import classnames from 'classnames'; import { isUndefined } from 'lodash'; /** @@ -80,15 +81,14 @@ function ParagraphBlock( { onReplace, setAttributes, setFontSize, - className, } ) { const { align, content, - dropCap, - placeholder, direction, + dropCap, lineHeight, + placeholder, } = attributes; const ref = useRef(); @@ -144,7 +144,11 @@ function ParagraphBlock( { ref={ ref } identifier="content" tagName={ Block.p } - className={ className } + className={ classnames( { + 'has-drop-cap': dropCap, + [ `has-text-align-${ align }` ]: align, + [ fontSize.class ]: fontSize.class, + } ) } style={ styles } value={ content } onChange={ ( newContent ) => diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js index 047839b476054..903d7d641836a 100644 --- a/packages/block-library/src/paragraph/save.js +++ b/packages/block-library/src/paragraph/save.js @@ -22,7 +22,7 @@ export default function save( { attributes } ) { const fontSizeClass = getFontSizeClass( fontSize ); - const classes = classnames( { + const className = classnames( { 'has-drop-cap': dropCap, [ `has-text-align-${ align }` ]: align, [ fontSizeClass ]: fontSizeClass, @@ -37,7 +37,7 @@ export default function save( { attributes } ) { diff --git a/packages/components/package.json b/packages/components/package.json index 1c2f616bc95be..7b7960a5fbc74 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -25,10 +25,10 @@ ], "dependencies": { "@babel/runtime": "^7.8.3", - "@emotion/core": "^10.0.28", - "@emotion/css": "^10.0.27", - "@emotion/native": "^10.0.27", - "@emotion/styled": "^10.0.27", + "@emotion/core": "^10.0.22", + "@emotion/css": "^10.0.22", + "@emotion/native": "^10.0.23", + "@emotion/styled": "^10.0.23", "@wordpress/a11y": "file:../a11y", "@wordpress/compose": "file:../compose", "@wordpress/deprecated": "file:../deprecated", From bda4f0e21198b57ed69eec63e671d83d7359f22e Mon Sep 17 00:00:00 2001 From: Jon Q Date: Tue, 17 Mar 2020 12:16:36 -0400 Subject: [PATCH 21/30] Revert @emotion/native from 10.0.23 -> 10.0.22 (to match master) --- packages/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/package.json b/packages/components/package.json index 7b7960a5fbc74..56b8bd902e9dc 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -27,7 +27,7 @@ "@babel/runtime": "^7.8.3", "@emotion/core": "^10.0.22", "@emotion/css": "^10.0.22", - "@emotion/native": "^10.0.23", + "@emotion/native": "^10.0.22", "@emotion/styled": "^10.0.23", "@wordpress/a11y": "file:../a11y", "@wordpress/compose": "file:../compose", From 5900583584c3cf4d9195728780bf5b57a014a5ea Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 18 Mar 2020 15:37:52 -0400 Subject: [PATCH 22/30] Updates package-lock.json --- package-lock.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index c0d03efa6bf59..cadacb5c16290 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10708,10 +10708,10 @@ "version": "file:packages/components", "requires": { "@babel/runtime": "^7.8.3", - "@emotion/core": "^10.0.28", - "@emotion/css": "^10.0.27", - "@emotion/native": "^10.0.27", - "@emotion/styled": "^10.0.27", + "@emotion/core": "^10.0.22", + "@emotion/css": "^10.0.22", + "@emotion/native": "^10.0.22", + "@emotion/styled": "^10.0.23", "@wordpress/a11y": "file:packages/a11y", "@wordpress/compose": "file:packages/compose", "@wordpress/deprecated": "file:packages/deprecated", From 35794cceedddaf27ae5cc9f937b889c381dc1ec6 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 18 Mar 2020 17:54:55 -0400 Subject: [PATCH 23/30] Fix e2e test to target correct text input --- packages/e2e-tests/specs/editor/various/embedding.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js index b33a24fd78720..9e30ec116f3c3 100644 --- a/packages/e2e-tests/specs/editor/various/embedding.test.js +++ b/packages/e2e-tests/specs/editor/various/embedding.test.js @@ -307,7 +307,7 @@ describe( 'Embedding content', () => { await page.keyboard.type( 'Hello there!' ); await publishPost(); const postUrl = await page.$eval( - '[id^=inspector-text-control-]', + '.editor-post-publish-panel [id^=inspector-text-control-]', ( el ) => el.value ); From bf7ef839b00a7f2796036e7bf46db590fbdc9a11 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Thu, 19 Mar 2020 09:12:41 -0400 Subject: [PATCH 24/30] Reverting package-lock.json --- package-lock.json | 189 ++-------------------------------------------- 1 file changed, 7 insertions(+), 182 deletions(-) diff --git a/package-lock.json b/package-lock.json index cadacb5c16290..a4184598a1d89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1878,7 +1878,6 @@ "version": "10.0.19", "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.19.tgz", "integrity": "sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==", - "dev": true, "requires": { "@emotion/sheet": "0.9.3", "@emotion/stylis": "0.8.4", @@ -1890,7 +1889,6 @@ "version": "10.0.22", "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.22.tgz", "integrity": "sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==", - "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/cache": "^10.0.17", @@ -1904,7 +1902,6 @@ "version": "7.7.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.2" } @@ -1913,7 +1910,6 @@ "version": "10.0.22", "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.22.tgz", "integrity": "sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==", - "dev": true, "requires": { "@emotion/serialize": "^0.11.12", "@emotion/utils": "0.11.2", @@ -1924,7 +1920,6 @@ "version": "0.11.14", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz", "integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==", - "dev": true, "requires": { "@emotion/hash": "0.7.3", "@emotion/memoize": "0.7.3", @@ -1982,14 +1977,12 @@ "@emotion/hash": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz", - "integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==", - "dev": true + "integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==" }, "@emotion/is-prop-valid": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz", "integrity": "sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==", - "dev": true, "requires": { "@emotion/memoize": "0.7.3" } @@ -1997,8 +1990,7 @@ "@emotion/memoize": { "version": "0.7.3", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz", - "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==", - "dev": true + "integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==" }, "@emotion/native": { "version": "10.0.27", @@ -2053,14 +2045,12 @@ "@emotion/sheet": { "version": "0.9.3", "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz", - "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==", - "dev": true + "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==" }, "@emotion/styled": { "version": "10.0.23", "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.23.tgz", "integrity": "sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==", - "dev": true, "requires": { "@emotion/styled-base": "^10.0.23", "babel-plugin-emotion": "^10.0.23" @@ -2070,7 +2060,6 @@ "version": "10.0.24", "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.24.tgz", "integrity": "sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==", - "dev": true, "requires": { "@babel/runtime": "^7.5.5", "@emotion/is-prop-valid": "0.8.5", @@ -2082,7 +2071,6 @@ "version": "7.7.2", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz", "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.2" } @@ -2091,7 +2079,6 @@ "version": "0.11.14", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.14.tgz", "integrity": "sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==", - "dev": true, "requires": { "@emotion/hash": "0.7.3", "@emotion/memoize": "0.7.3", @@ -2105,26 +2092,22 @@ "@emotion/stylis": { "version": "0.8.4", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz", - "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==", - "dev": true + "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==" }, "@emotion/unitless": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz", - "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==", - "dev": true + "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==" }, "@emotion/utils": { "version": "0.11.2", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz", - "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==", - "dev": true + "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==" }, "@emotion/weak-memoize": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz", - "integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==", - "dev": true + "integrity": "sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==" }, "@evocateur/libnpmaccess": { "version": "3.1.2", @@ -10543,85 +10526,6 @@ "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "traverse": "^0.6.6" - }, - "dependencies": { - "@emotion/cache": { - "version": "10.0.29", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", - "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", - "requires": { - "@emotion/sheet": "0.9.4", - "@emotion/stylis": "0.8.5", - "@emotion/utils": "0.11.3", - "@emotion/weak-memoize": "0.2.5" - } - }, - "@emotion/core": { - "version": "10.0.28", - "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz", - "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==", - "requires": { - "@babel/runtime": "^7.5.5", - "@emotion/cache": "^10.0.27", - "@emotion/css": "^10.0.27", - "@emotion/serialize": "^0.11.15", - "@emotion/sheet": "0.9.4", - "@emotion/utils": "0.11.3" - } - }, - "@emotion/is-prop-valid": { - "version": "0.8.7", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.7.tgz", - "integrity": "sha512-OPkKzUeiid0vEKjZqnGcy2mzxjIlCffin+L2C02pdz/bVlt5zZZE2VzO0D3XOPnH0NEeF21QNKSXiZphjr4xiQ==", - "requires": { - "@emotion/memoize": "0.7.4" - } - }, - "@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" - }, - "@emotion/sheet": { - "version": "0.9.4", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", - "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" - }, - "@emotion/styled": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", - "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", - "requires": { - "@emotion/styled-base": "^10.0.27", - "babel-plugin-emotion": "^10.0.27" - } - }, - "@emotion/styled-base": { - "version": "10.0.28", - "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.28.tgz", - "integrity": "sha512-bLYVsPlFZ3SIR9YQsuFiJ9mML76ZLnsAfbkwBFbdMTCJ/0I+xgv+SG/QYHiLvGUUohjNVPeneYUyTUkcKndWxg==", - "requires": { - "@babel/runtime": "^7.5.5", - "@emotion/is-prop-valid": "0.8.7", - "@emotion/serialize": "^0.11.15", - "@emotion/utils": "0.11.3" - } - }, - "@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" - }, - "@emotion/utils": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" - }, - "@emotion/weak-memoize": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", - "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" - } } }, "@wordpress/block-library": { @@ -10740,85 +10644,6 @@ "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" - }, - "dependencies": { - "@emotion/cache": { - "version": "10.0.29", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", - "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", - "requires": { - "@emotion/sheet": "0.9.4", - "@emotion/stylis": "0.8.5", - "@emotion/utils": "0.11.3", - "@emotion/weak-memoize": "0.2.5" - } - }, - "@emotion/core": { - "version": "10.0.28", - "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz", - "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==", - "requires": { - "@babel/runtime": "^7.5.5", - "@emotion/cache": "^10.0.27", - "@emotion/css": "^10.0.27", - "@emotion/serialize": "^0.11.15", - "@emotion/sheet": "0.9.4", - "@emotion/utils": "0.11.3" - } - }, - "@emotion/is-prop-valid": { - "version": "0.8.7", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.7.tgz", - "integrity": "sha512-OPkKzUeiid0vEKjZqnGcy2mzxjIlCffin+L2C02pdz/bVlt5zZZE2VzO0D3XOPnH0NEeF21QNKSXiZphjr4xiQ==", - "requires": { - "@emotion/memoize": "0.7.4" - } - }, - "@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" - }, - "@emotion/sheet": { - "version": "0.9.4", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", - "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" - }, - "@emotion/styled": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", - "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", - "requires": { - "@emotion/styled-base": "^10.0.27", - "babel-plugin-emotion": "^10.0.27" - } - }, - "@emotion/styled-base": { - "version": "10.0.28", - "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.28.tgz", - "integrity": "sha512-bLYVsPlFZ3SIR9YQsuFiJ9mML76ZLnsAfbkwBFbdMTCJ/0I+xgv+SG/QYHiLvGUUohjNVPeneYUyTUkcKndWxg==", - "requires": { - "@babel/runtime": "^7.5.5", - "@emotion/is-prop-valid": "0.8.7", - "@emotion/serialize": "^0.11.15", - "@emotion/utils": "0.11.3" - } - }, - "@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" - }, - "@emotion/utils": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", - "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" - }, - "@emotion/weak-memoize": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", - "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" - } } }, "@wordpress/compose": { From 96d41580430177ccc744603f01ec7169374bd8ae Mon Sep 17 00:00:00 2001 From: Jon Q Date: Thu, 19 Mar 2020 09:22:13 -0400 Subject: [PATCH 25/30] Provide clientId in dependency array in useSetAttributes hook --- packages/block-editor/src/store/hooks.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/store/hooks.js b/packages/block-editor/src/store/hooks.js index 00d206c0152f1..d50502ff730da 100644 --- a/packages/block-editor/src/store/hooks.js +++ b/packages/block-editor/src/store/hooks.js @@ -44,10 +44,13 @@ export function useSetAttributes() { */ export function useBlockAttributes() { const clientId = useSelectedBlockClientId(); - const attributes = useSelect( ( select ) => { - const { getBlockAttributes } = select( 'core/block-editor' ); - return getBlockAttributes( clientId ) || {}; - }, [] ); + const attributes = useSelect( + ( select ) => { + const { getBlockAttributes } = select( 'core/block-editor' ); + return getBlockAttributes( clientId ) || {}; + }, + [ clientId ] + ); return attributes; } From 5f43e2564a8a16ca3055cd7af6b5286961615dcb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 25 Mar 2020 14:48:11 +0100 Subject: [PATCH 26/30] Use CSS variables and a support flag for the line height customization --- .../src/components/index.native.js | 5 +- .../components/line-height-control/index.js | 22 ++----- .../components/line-height-control/utils.js | 28 -------- packages/block-editor/src/hooks/color.js | 15 +---- .../block-editor/src/hooks/line-height.js | 64 +++++++++++++++++++ packages/block-editor/src/hooks/style.js | 3 +- packages/block-editor/src/hooks/test/color.js | 2 +- .../src/hooks/test/{anchor.js => utils.js} | 0 packages/block-editor/src/hooks/utils.js | 23 +++++++ packages/block-editor/src/store/index.js | 2 - .../block-library/src/paragraph/block.json | 3 - packages/block-library/src/paragraph/edit.js | 13 +--- packages/block-library/src/paragraph/index.js | 1 + packages/block-library/src/paragraph/save.js | 3 - .../block-library/src/paragraph/style.scss | 1 + packages/editor/src/editor-styles.scss | 1 - 16 files changed, 99 insertions(+), 87 deletions(-) create mode 100644 packages/block-editor/src/hooks/line-height.js rename packages/block-editor/src/hooks/test/{anchor.js => utils.js} (100%) create mode 100644 packages/block-editor/src/hooks/utils.js diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index c9274b97b27b6..a970323a0350d 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -11,10 +11,7 @@ export * from './font-sizes'; export { default as AlignmentToolbar } from './alignment-toolbar'; export { default as InnerBlocks } from './inner-blocks'; export { default as InspectorControls } from './inspector-controls'; -export { - default as __experimentalLineHeightControl, - withLineHeight as __experimentalWithLineHeight, -} from './line-height-control'; +export { default as __experimentalLineHeightControl } from './line-height-control'; export { default as PlainText } from './plain-text'; export { default as RichText, diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index c94089a7f9b90..51b1338cacd21 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ @@ -17,16 +12,10 @@ import { RESET_VALUE, STEP, useIsLineHeightControlsDisabled, - useLineHeightControlState, isLineHeightDefined, } from './utils'; -export default function LineHeightControl( { - className, - style = {}, - ...props -} ) { - const [ lineHeight, setLineHeight ] = useLineHeightControlState(); +export default function LineHeightControl( { value: lineHeight, onChange } ) { const isDisabled = useIsLineHeightControlsDisabled(); const isDefined = isLineHeightDefined( lineHeight ); @@ -38,7 +27,7 @@ export default function LineHeightControl( { const handleOnChange = ( nextValue ) => { // Set the next value without modification if lineHeight has been defined if ( isDefined ) { - setLineHeight( nextValue ); + onChange( nextValue ); return; } @@ -56,15 +45,13 @@ export default function LineHeightControl( { break; } - setLineHeight( adjustedNextValue ); + onChange( adjustedNextValue ); }; - const classes = classnames( 'block-editor-line-height-control', className ); - const value = isDefined ? lineHeight : RESET_VALUE; return ( -
+
diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index b4ba6d72a6646..8c285f781d53c 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -8,11 +8,6 @@ import { isUndefined } from 'lodash'; */ import { useSelect } from '@wordpress/data'; -/** - * Internal dependencies - */ -import { __experimentalUseBlockEditProps as useBlockEditProps } from '../../store'; - export const BASE_DEFAULT_VALUE = 1.5; export const STEP = 0.1; /** @@ -42,29 +37,6 @@ export function useIsLineHeightControlsDisabled() { return isDisabled; } -/** - * Retrieves the attributes/setter for the block, but adjusted to target just the lineHeight attribute - * - * @return {Array} [lineHeight, setLineHeight] from the block's edit props. - */ -export function useLineHeightControlState() { - const [ attributes, setAttributes ] = useBlockEditProps(); - - const { lineHeight } = attributes; - - const setLineHeight = ( value ) => { - const nextValue = isLineHeightDefined( value ) - ? // Convert to a number for the block attribute - parseFloat( value ) - : // Unset for the block attribute - undefined; - - setAttributes( { lineHeight: nextValue } ); - }; - - return [ lineHeight, setLineHeight ]; -} - /** * Determines if the lineHeight attribute has been properly defined. * diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index f02476e82caec..61d85140cf249 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -2,7 +2,6 @@ * External dependencies */ import classnames from 'classnames'; -import { pickBy, isEqual, isObject, identity, mapValues } from 'lodash'; /** * WordPress dependencies @@ -26,22 +25,10 @@ import PanelColorSettings from '../components/panel-color-settings'; import ContrastChecker from '../components/contrast-checker'; import InspectorControls from '../components/inspector-controls'; import { getBlockDOMNode } from '../utils/dom'; +import { cleanEmptyObject } from './utils'; export const COLOR_SUPPORT_KEY = '__experimentalColor'; -export const cleanEmptyObject = ( object ) => { - if ( ! isObject( object ) ) { - return object; - } - const cleanedNestedObjects = pickBy( - mapValues( object, cleanEmptyObject ), - identity - ); - return isEqual( cleanedNestedObjects, {} ) - ? undefined - : cleanedNestedObjects; -}; - /** * Filters registered block settings, extending attributes to include * `backgroundColor` and `textColor` attribute. diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js new file mode 100644 index 0000000000000..6f81303221811 --- /dev/null +++ b/packages/block-editor/src/hooks/line-height.js @@ -0,0 +1,64 @@ +/** + * WordPress dependencies + */ +import { addFilter } from '@wordpress/hooks'; +import { hasBlockSupport } from '@wordpress/blocks'; +import { createHigherOrderComponent } from '@wordpress/compose'; +import { PanelBody } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import LineHeightControl from '../components/line-height-control'; +import InspectorControls from '../components/inspector-controls'; +import { cleanEmptyObject } from './utils'; + +export const LINE_HEIGHT_SUPPRT_KEY = '__experimentalLineHeight'; + +/** + * Override the default edit UI to include new inspector controls for block + * color, if block defines support. + * + * @param {Function} BlockEdit Original component + * @return {Function} Wrapped component + */ +export const withBlockControls = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + const { name: blockName } = props; + if ( ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPRT_KEY ) ) { + return ; + } + const { style } = props.attributes; + const onChange = ( newLineHeightValue ) => { + const newStyle = { + ...style, + typography: { + lineHeight: newLineHeightValue, + }, + }; + props.setAttributes( { + style: cleanEmptyObject( newStyle ), + } ); + }; + + return [ + + + + + , + , + ]; + }, + 'withToolbarControls' +); + +addFilter( + 'editor.BlockEdit', + 'core/color/with-block-controls', + withBlockControls +); diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 5eea58cea5b9f..9ffd3fd34d0ca 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -13,8 +13,9 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import { COLOR_SUPPORT_KEY } from './color'; +import { LINE_HEIGHT_SUPPRT_KEY } from './line-height'; -const styleSupportKeys = [ COLOR_SUPPORT_KEY ]; +const styleSupportKeys = [ COLOR_SUPPORT_KEY, LINE_HEIGHT_SUPPRT_KEY ]; const hasStyleSupport = ( blockType ) => styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) ); diff --git a/packages/block-editor/src/hooks/test/color.js b/packages/block-editor/src/hooks/test/color.js index d8644c931a3e5..9c3361ce80c95 100644 --- a/packages/block-editor/src/hooks/test/color.js +++ b/packages/block-editor/src/hooks/test/color.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { cleanEmptyObject } from '../color'; +import { cleanEmptyObject } from '../utils'; describe( 'cleanEmptyObject', () => { it( 'should remove nested keys', () => { diff --git a/packages/block-editor/src/hooks/test/anchor.js b/packages/block-editor/src/hooks/test/utils.js similarity index 100% rename from packages/block-editor/src/hooks/test/anchor.js rename to packages/block-editor/src/hooks/test/utils.js diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js new file mode 100644 index 0000000000000..dba018f2cfc8a --- /dev/null +++ b/packages/block-editor/src/hooks/utils.js @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import { pickBy, isEqual, isObject, identity, mapValues } from 'lodash'; + +/** + * Removed undefined values from nested object. + * + * @param {*} object + * @return {*} Object cleaned from undefined values + */ +export const cleanEmptyObject = ( object ) => { + if ( ! isObject( object ) ) { + return object; + } + const cleanedNestedObjects = pickBy( + mapValues( object, cleanEmptyObject ), + identity + ); + return isEqual( cleanedNestedObjects, {} ) + ? undefined + : cleanedNestedObjects; +}; diff --git a/packages/block-editor/src/store/index.js b/packages/block-editor/src/store/index.js index 206a1fc4505d5..bfc7766a50876 100644 --- a/packages/block-editor/src/store/index.js +++ b/packages/block-editor/src/store/index.js @@ -37,6 +37,4 @@ const store = registerStore( MODULE_KEY, { } ); applyMiddlewares( store ); -export { useBlockEditProps as __experimentalUseBlockEditProps } from './hooks'; - export default store; diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index f7cfc8160ef40..dc3d4ef895c8e 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -21,9 +21,6 @@ "fontSize": { "type": "string" }, - "lineHeight": { - "type": "number" - }, "customFontSize": { "type": "number" }, diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 0b93570a6f184..e09aecea77c81 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -2,7 +2,6 @@ * External dependencies */ import classnames from 'classnames'; -import { isUndefined } from 'lodash'; /** * WordPress dependencies @@ -17,7 +16,6 @@ import { RichText, withFontSizes, __experimentalBlock as Block, - __experimentalLineHeightControl as LineHeightControl, } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; import { compose } from '@wordpress/compose'; @@ -82,14 +80,7 @@ function ParagraphBlock( { setAttributes, setFontSize, } ) { - const { - align, - content, - direction, - dropCap, - lineHeight, - placeholder, - } = attributes; + const { align, content, direction, dropCap, placeholder } = attributes; const ref = useRef(); const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ @@ -100,7 +91,6 @@ function ParagraphBlock( { fontSize: fontSize.size ? `${ fontSize.size }px` : undefined, direction, minHeight: dropCapMinimumHeight, - lineHeight: isUndefined( lineHeight ) ? undefined : lineHeight, }; return ( @@ -125,7 +115,6 @@ function ParagraphBlock( { value={ fontSize.size } onChange={ setFontSize } /> - Date: Wed, 25 Mar 2020 14:21:16 -0400 Subject: [PATCH 27/30] Improves handling of "zero" key press --- .../components/line-height-control/index.js | 21 +++++++++++++++++++ packages/keycodes/README.md | 4 ++++ packages/keycodes/src/index.js | 4 ++++ 3 files changed, 29 insertions(+) diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 51b1338cacd21..4aa913901a80b 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -3,6 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { TextControl } from '@wordpress/components'; +import { ZERO } from '@wordpress/keycodes'; /** * Internal dependencies @@ -24,6 +25,20 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) { return null; } + const handleOnKeyDown = ( event ) => { + const { keyCode } = event; + + if ( keyCode === ZERO && ! isDefined ) { + /** + * Prevents the onChange callback from firing, which prevents + * the logic from assuming the change was triggered from + * an input arrow CLICK. + */ + event.preventDefault(); + onChange( '0' ); + } + }; + const handleOnChange = ( nextValue ) => { // Set the next value without modification if lineHeight has been defined if ( isDefined ) { @@ -32,6 +47,11 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) { } // Otherwise... + /** + * The following logic handles the initial up/down arrow CLICK of the + * input element. This is so that the next values (from an undefined value state) + * are more better suited for line-height rendering. + */ let adjustedNextValue = nextValue; switch ( nextValue ) { @@ -54,6 +74,7 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
# **ZERO** + +Keycode for ZERO key. + diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js index 16a002973ec07..fc975909aa4e4 100644 --- a/packages/keycodes/src/index.js +++ b/packages/keycodes/src/index.js @@ -95,6 +95,10 @@ export const COMMAND = 'meta'; * Keycode for SHIFT key. */ export const SHIFT = 'shift'; +/** + * Keycode for ZERO key. + */ +export const ZERO = 48; /** * Object that contains functions that return the available modifier From 5923ffcdf9c05ae498bec9193656f738c7943ca7 Mon Sep 17 00:00:00 2001 From: Jon Quach Date: Wed, 25 Mar 2020 14:51:32 -0400 Subject: [PATCH 28/30] Update packages/block-editor/src/components/line-height-control/utils.js Co-Authored-By: Zebulan Stanphill --- .../block-editor/src/components/line-height-control/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index 8c285f781d53c..d7943e736fe89 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -45,5 +45,5 @@ export function useIsLineHeightControlsDisabled() { * @return {boolean} Whether the lineHeight attribute is valid. */ export function isLineHeightDefined( lineHeight ) { - return ! isUndefined( lineHeight ) && lineHeight !== RESET_VALUE; + return lineHeight !== undefined && lineHeight !== RESET_VALUE; } From 777f0794db16b07278189f35173f86494fbfab42 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 25 Mar 2020 14:55:07 -0400 Subject: [PATCH 29/30] Remove unused import --- .../block-editor/src/components/line-height-control/utils.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-editor/src/components/line-height-control/utils.js b/packages/block-editor/src/components/line-height-control/utils.js index d7943e736fe89..351a35a66a6a0 100644 --- a/packages/block-editor/src/components/line-height-control/utils.js +++ b/packages/block-editor/src/components/line-height-control/utils.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { isUndefined } from 'lodash'; - /** * WordPress dependencies */ From a129ab8d4c1f0f37ac2660766776d01958d4bbff Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 27 Mar 2020 16:14:55 +0100 Subject: [PATCH 30/30] Remove useless hooks file --- packages/block-editor/src/store/hooks.js | 68 ------------------------ 1 file changed, 68 deletions(-) delete mode 100644 packages/block-editor/src/store/hooks.js diff --git a/packages/block-editor/src/store/hooks.js b/packages/block-editor/src/store/hooks.js deleted file mode 100644 index d50502ff730da..0000000000000 --- a/packages/block-editor/src/store/hooks.js +++ /dev/null @@ -1,68 +0,0 @@ -/** - * WordPress dependencies - */ -import { useCallback } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; - -/** - * Retrieves the selected block clientId - * - * @return {string} Block clientId. - */ -export function useSelectedBlockClientId() { - const clientId = useSelect( ( select ) => { - const { getSelectedBlockClientId } = select( 'core/block-editor' ); - return getSelectedBlockClientId(); - }, [] ); - - return clientId; -} - -/** - * Retrieves setAttributes callback for the selected block. - * - * @return {Function} setAttributes callback. - */ -export function useSetAttributes() { - const clientId = useSelectedBlockClientId(); - const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); - - const setAttributes = useCallback( - ( newAttributes ) => { - updateBlockAttributes( clientId, newAttributes ); - }, - [ clientId ] - ); - - return setAttributes; -} - -/** - * Retrieves the selected block attributes - * - * @return {Object} Block attributes. - */ -export function useBlockAttributes() { - const clientId = useSelectedBlockClientId(); - const attributes = useSelect( - ( select ) => { - const { getBlockAttributes } = select( 'core/block-editor' ); - return getBlockAttributes( clientId ) || {}; - }, - [ clientId ] - ); - - return attributes; -} - -/** - * Retrieves the attributes and setAttributes callback from the selected block. - * - * @return {Array} [attributes, setAttributes] for a block. - */ -export function useBlockEditProps() { - const attributes = useBlockAttributes(); - const setAttributes = useSetAttributes(); - - return [ attributes, setAttributes ]; -}