@wordpress/interface 4.1.0 → 4.1.4

package/build-style/style.css

@@ -122,6 +122,12 @@
   }
 }
 
+@media (min-width: 782px) {
+  .components-panel__header + .interface-complementary-area-header {
+    margin-top: 0;
+  }
+}
+
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
@@ -157,12 +163,18 @@
 .interface-complementary-area p {
   margin-top: 0;
 }
-.interface-complementary-area h2,
-.interface-complementary-area h3 {
+.interface-complementary-area h2 {
   font-size: 13px;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
+.interface-complementary-area h3 {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin-bottom: 1.5em;
+}
 .interface-complementary-area hr {
   border-top: none;
   border-bottom: 1px solid #f0f0f0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "4.1.0",
+	"version": "4.1.4",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,22 +31,22 @@
 		"{src,build,build-module}/{index.js,store/index.js}"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.2",
-		"@wordpress/components": "^17.0.0",
-		"@wordpress/compose": "^5.0.2",
-		"@wordpress/data": "^6.1.0",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/element": "^4.0.1",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^5.0.2",
-		"@wordpress/plugins": "^4.0.2",
-		"@wordpress/viewport": "^4.0.2",
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/a11y": "^3.2.4",
+		"@wordpress/components": "^19.0.2",
+		"@wordpress/compose": "^5.0.6",
+		"@wordpress/data": "^6.1.4",
+		"@wordpress/deprecated": "^3.2.3",
+		"@wordpress/element": "^4.0.4",
+		"@wordpress/i18n": "^4.2.4",
+		"@wordpress/icons": "^6.1.1",
+		"@wordpress/plugins": "^4.0.6",
+		"@wordpress/viewport": "^4.0.6",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
+	"gitHead": "9a1dd3474d937468e4cf9caf9886ad61ef0a8f50"
 }

package/src/components/complementary-area/style.scss

@@ -35,13 +35,21 @@
 		margin-top: 0;
 	}
 
-	h2,
-	h3 {
+	h2 {
 		font-size: $default-font-size;
 		color: $gray-900;
 		margin-bottom: 1.5em;
 	}
 
+	// Subheading style.
+	h3 {
+		font-size: 11px;
+		text-transform: uppercase;
+		font-weight: 500;
+		color: $gray-900;
+		margin-bottom: 1.5em;
+	}
+
 	hr {
 		border-top: none;
 		border-bottom: 1px solid $gray-100;

package/src/components/complementary-area-header/style.scss

@@ -31,3 +31,11 @@
 		}
 	}
 }
+
+// This overrides the negative margins between two consecutives panels.
+// since the first panel is hidden.
+.components-panel__header + .interface-complementary-area-header {
+	@include break-medium() {
+		margin-top: 0;
+	}
+}

package/src/store/actions.js

@@ -1,13 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { controls } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { STORE_NAME as interfaceStoreName } from './constants';
-
 /**
  * Returns an action object used in signalling that an active area should be changed.
  *
@@ -99,21 +89,11 @@ export function unpinItem( scope, itemId ) {
  * @param {string} scope       The feature scope (e.g. core/edit-post).
  * @param {string} featureName The feature name.
  */
-export function* toggleFeature( scope, featureName ) {
-	const currentValue = yield controls.select(
-		interfaceStoreName,
-		'isFeatureActive',
-		scope,
-		featureName
-	);
-
-	yield controls.dispatch(
-		interfaceStoreName,
-		'setFeatureValue',
-		scope,
-		featureName,
-		! currentValue
-	);
+export function toggleFeature( scope, featureName ) {
+	return function ( { select, dispatch } ) {
+		const currentValue = select.isFeatureActive( scope, featureName );
+		dispatch.setFeatureValue( scope, featureName, ! currentValue );
+	};
 }
 
 /**

package/src/store/index.js

@@ -23,6 +23,7 @@ export const store = createReduxStore( STORE_NAME, {
 	actions,
 	selectors,
 	persist: [ 'enableItems', 'preferences' ],
+	__experimentalUseThunks: true,
 } );
 
 // Once we build a more generic persistence plugin that works across types of stores
@@ -32,4 +33,5 @@ registerStore( STORE_NAME, {
 	actions,
 	selectors,
 	persist: [ 'enableItems', 'preferences' ],
+	__experimentalUseThunks: true,
 } );

package/src/store/reducer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { flow, get } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -89,7 +89,7 @@ export function multipleEnableItems(
  *
  * @return {Object} Updated state.
  */
-export const preferenceDefaults = flow( [ combineReducers ] )( {
+export const preferenceDefaults = combineReducers( {
 	features( state = {}, action ) {
 		if ( action.type === 'SET_FEATURE_DEFAULTS' ) {
 			const { scope, defaults } = action;
@@ -114,7 +114,7 @@ export const preferenceDefaults = flow( [ combineReducers ] )( {
  *
  * @return {Object} Updated state.
  */
-export const preferences = flow( [ combineReducers ] )( {
+export const preferences = combineReducers( {
 	features( state = {}, action ) {
 		if ( action.type === 'SET_FEATURE_VALUE' ) {
 			const { scope, featureName, value } = action;