React: Remove the usage of the componentWillMount lifecycle

components/higher-order/with-focus-return/index.js

@@ -20,9 +20,6 @@ function withFocusReturn( WrappedComponent ) {
 
 			this.setIsFocusedTrue = () => this.isFocused = true;
 			this.setIsFocusedFalse = () => this.isFocused = false;
-		}
-
-		componentWillMount() {
 			this.activeElementOnMount = document.activeElement;
 		}
 

components/slot-fill/fill.js

@@ -11,7 +11,8 @@ import { Component, createPortal } from '@wordpress/element';
 let occurrences = 0;
 
 class Fill extends Component {
-	componentWillMount() {
+	constructor() {
+		super( ...arguments );
 		this.occurrence = ++occurrences;
 	}
 

core-blocks/embed/index.js

@@ -102,7 +102,7 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed',
 				};
 			}
 
-			componentWillMount() {
+			componentDidMount() {
 				this.doServerSideRender();
 			}
 

docs/reference/deprecated.md

@@ -1,7 +1,9 @@
 Gutenberg's deprecation policy is intended to support backwards-compatibility for two minor releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version.
 
 ## 3.3.0
+
  - `useOnce: true` has been removed from the Block API. Please use `supports.multiple: false` instead.
+ - Serializing components using `componentWillMount` lifecycle method. Please use the constructor instead.
 
 ## 3.2.0
 

packages/element/package.json

@@ -20,6 +20,7 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"dependencies": {
+		"@wordpress/deprecated": "^1.0.0-alpha.1",
 		"@wordpress/is-shallow-equal": "1.0.2",
 		"lodash": "4.17.5",
 		"react": "16.3.2",

packages/element/src/serialize.js

@@ -30,6 +30,11 @@
  */
 import { isEmpty, castArray, omit, kebabCase } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
 /**
  * Internal dependencies
  */
@@ -443,6 +448,11 @@ export function renderComponent( Component, props, context = {} ) {
 
 	if ( typeof instance.componentWillMount === 'function' ) {
 		instance.componentWillMount();
+		deprecated( 'componentWillMount', {
+			version: '3.3',
+			alternative: 'the constructor',
+			plugin: 'Gutenberg',
+		} );
 	}
 
 	if ( typeof instance.getChildContext === 'function' ) {

packages/element/src/test/serialize.js

@@ -322,6 +322,7 @@ describe( 'renderComponent()', () => {
 
 		const result = renderComponent( Example, {} );
 
+		expect( console ).toHaveWarned();
 		expect( result ).toBe( 'constructedwillMounted' );
 	} );