diff --git a/package-lock.json b/package-lock.json
index bcc60655c7a96b..efa0fa578d8e97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3289,6 +3289,7 @@
"babel-eslint": "^8.0.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
+ "eslint-plugin-react-hooks": "^1.6.0",
"requireindex": "^1.2.0"
}
},
@@ -8485,6 +8486,12 @@
}
}
},
+ "eslint-plugin-react-hooks": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz",
+ "integrity": "sha512-lHBVRIaz5ibnIgNG07JNiAuBUeKhEf8l4etNx5vfAEwqQ5tcuK3jV9yjmopPgQDagQb7HwIuQVsE3IVcGrRnag==",
+ "dev": true
+ },
"eslint-scope": {
"version": "3.7.3",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.3.tgz",
diff --git a/packages/block-editor/src/components/contrast-checker/index.js b/packages/block-editor/src/components/contrast-checker/index.js
index 0542164f1dbc79..308572e55531aa 100644
--- a/packages/block-editor/src/components/contrast-checker/index.js
+++ b/packages/block-editor/src/components/contrast-checker/index.js
@@ -11,6 +11,22 @@ import { __ } from '@wordpress/i18n';
import { Notice } from '@wordpress/components';
import { useEffect } from '@wordpress/element';
+function ContrastCheckerMessage( { tinyBackgroundColor, tinyTextColor, backgroundColor, textColor } ) {
+ const msg = tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ?
+ __( 'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.' ) :
+ __( 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.' );
+ useEffect( () => {
+ speak( __( 'This color combination may be hard for people to read.' ) );
+ }, [ backgroundColor, textColor ] );
+ return (
+
+
+ { msg }
+
+
+ );
+}
+
function ContrastChecker( {
backgroundColor,
fallbackBackgroundColor,
@@ -33,18 +49,14 @@ function ContrastChecker( {
) ) {
return null;
}
- const msg = tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ?
- __( 'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.' ) :
- __( 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.' );
- useEffect( () => {
- speak( __( 'This color combination may be hard for people to read.' ) );
- }, [ backgroundColor, textColor ] );
+
return (
-
-
- { msg }
-
-
+
);
}
diff --git a/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
index 16bb2d6c050441..49f7c916e7151f 100644
--- a/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
@@ -8,24 +8,57 @@ exports[`ContrastChecker should render component when the colors do not meet AA
isLargeText={true}
textColor="#666"
>
-
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
-
+
+
+
`;
@@ -37,24 +70,57 @@ exports[`ContrastChecker should render different message matching snapshot when
isLargeText={false}
textColor="#666"
>
-
-
-
- This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.
+
+ This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.
+
-
-
-
+
+
+
`;
@@ -63,24 +129,56 @@ exports[`ContrastChecker should render messages when the textColor is valid, but
fallbackBackgroundColor="#000000"
textColor="#000000"
>
-
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
-
+
+
+
`;
@@ -90,24 +188,57 @@ exports[`ContrastChecker should take into consideration the font size passed 1`]
fontSize={23}
textColor="#000000"
>
-
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
-
+
+
+
`;
@@ -117,24 +248,57 @@ exports[`ContrastChecker should take into consideration wherever text is large o
isLargeText={false}
textColor="#000000"
>
-
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
-
+
+
+
`;
@@ -145,23 +309,56 @@ exports[`ContrastChecker should use isLargeText to make decisions if both isLarg
isLargeText={false}
textColor="#000000"
>
-
-
-
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+
-
-
-
+
+
+
`;
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index b13a52316a882b..57443b156bb3b8 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -3,6 +3,7 @@
### New Features
- New Rule: [`@wordpress/react-no-unsafe-timeout`](https://github.com/WordPress/gutenberg/blob/master/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md)
+- Add [React Hooks Rules](https://reactjs.org/docs/hooks-rules.html) config.
## 2.1.0 (2019-03-20)
diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js
index 05c09b7e16809a..4947d15fb57468 100644
--- a/packages/eslint-plugin/configs/react.js
+++ b/packages/eslint-plugin/configs/react.js
@@ -9,6 +9,7 @@ module.exports = {
},
plugins: [
'react',
+ 'react-hooks',
],
rules: {
'react/display-name': 'off',
@@ -24,5 +25,7 @@ module.exports = {
'react/no-children-prop': 'off',
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
+ 'react-hooks/rules-of-hooks': 'error',
+ 'react-hooks/exhaustive-deps': 'warn',
},
};
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index cc731ab72be5c9..68784f5c29894b 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -21,6 +21,7 @@
"babel-eslint": "^8.0.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
+ "eslint-plugin-react-hooks": "^1.6.0",
"requireindex": "^1.2.0"
},
"publishConfig": {