Block Edit: Remove extra context values and use selectors/actions ins…

…tead.
WordPress · Oct 21, 2019 · 69865dd · 69865dd
1 parent 86efb01
commit 69865dd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
@@ -27,13 +27,13 @@ class BlockEdit extends Component {
 		);
 	}
 
-	propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange, attributes, setAttributes ) {
-		return { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange, attributes, setAttributes };
+	propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange ) {
+		return { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange };
 	}
 
 	render() {
-		const { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange, attributes, setAttributes } = this.props;
-		const value = this.propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange, attributes, setAttributes );
+		const { name, isSelected, clientId, onFocus, onCaretVerticalPositionChange } = this.props;
+		const value = this.propsToContext( name, isSelected, clientId, onFocus, onCaretVerticalPositionChange );
 
 		return (
 			<BlockEditContextProvider value={ value }>

diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js
@@ -8,7 +8,13 @@ import { kebabCase, startCase } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo, Children, cloneElement } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useCallback,
+	useMemo,
+	Children,
+	cloneElement,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -63,7 +69,16 @@ export default function __experimentalUseColors(
 	},
 	deps = []
 ) {
-	const { attributes, setAttributes } = useBlockEditContext();
+	const { clientId } = useBlockEditContext();
+	const attributes = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlockAttributes( clientId ),
+		[ clientId ]
+	);
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+	const setAttributes = useCallback(
+		( newAttributes ) => updateBlockAttributes( clientId, newAttributes ),
+		[ updateBlockAttributes, clientId ]
+	);
 
 	const createComponent = useMemo(
 		() =>