Merge pull request #2301 from WordPress/fix/popover-cascade

Components: Allow style cascade to Popovers by rendering into Gutenberg root element

components/index.js

@@ -18,6 +18,7 @@ export { default as PanelHeader } from './panel/header';
 export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
+export { default as PopoverProvider } from './popover/provider';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as Spinner } from './spinner';

components/popover/README.md

@@ -26,6 +26,23 @@ function ToggleButton( { isVisible, toggleVisible } ) {
 }
 ```
 
+If you want Popover elementss to render to a specific location on the page to allow style cascade to take effect, you must render a `PopoverProvider` further up the element tree, specifying a target:
+
+```
+import { render } from '@wordpress/element';
+import { PopoverContext } from '@wordpress/components';
+import App from './app';
+
+const app = document.getElementById( 'app' );
+
+render(
+	<PopoverContext target={ app }>
+		<App />
+	</PopoverContext>,
+	app
+);
+```
+
 ## Props
 
 The component accepts the following props:

components/popover/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEqual } from 'lodash';
+import { isEqual, noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -146,6 +146,7 @@ export class Popover extends Component {
 			return null;
 		}
 
+		const { popoverTarget = document.body } = this.context;
 		const classes = classnames(
 			'components-popover',
 			className,
@@ -171,11 +172,15 @@ export class Popover extends Component {
 							</div>
 						</div>
 					</PopoverDetectOutside>,
-					document.body
+					popoverTarget
 				) }
 			</span>
 		);
 	}
 }
 
+Popover.contextTypes = {
+	popoverTarget: noop,
+};
+
 export default Popover;

components/popover/provider.js

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+class PopoverProvider extends Component {
+	getChildContext() {
+		return {
+			popoverTarget: this.props.target,
+		};
+	}
+
+	render() {
+		return this.props.children;
+	}
+}
+
+PopoverProvider.childContextTypes = {
+	popoverTarget: noop,
+};
+
+export default PopoverProvider;

components/popover/style.scss

@@ -1,8 +1,4 @@
 .components-popover {
-	&, * {
-		box-sizing: border-box;
-	}
-
 	position: fixed;
 	z-index: z-index( ".components-popover" );
 	left: 50%;

components/popover/test/index.js

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 /**
  * Internal dependencies
  */
 import { Popover } from '../';
+import PopoverProvider from '../provider';
 
 describe( 'Popover', () => {
 	describe( '#componentDidUpdate()', () => {
@@ -238,5 +239,19 @@ describe( 'Popover', () => {
 
 			expect( wrapper.find( '.components-popover' ).prop( 'role' ) ).toBe( 'tooltip' );
 		} );
+
+		it( 'should render into provider context', () => {
+			const element = require( '@wordpress/element' );
+			jest.spyOn( element, 'createPortal' );
+			const target = document.createElement( 'div' );
+
+			mount(
+				<PopoverProvider target={ target }>
+					<Popover isOpen>Hello</Popover>
+				</PopoverProvider>
+			);
+
+			expect( element.createPortal.mock.calls[ 0 ][ 1 ] ).toBe( target );
+		} );
 	} );
 } );

editor/index.js

@@ -4,15 +4,17 @@
 import { bindActionCreators } from 'redux';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Provider as SlotFillProvider } from 'react-slot-fill';
+import { flow } from 'lodash';
 import moment from 'moment-timezone';
 import 'moment-timezone/moment-timezone-utils';
 
 /**
  * WordPress dependencies
  */
 import { EditableProvider } from '@wordpress/blocks';
-import { render } from '@wordpress/element';
-import { settings } from '@wordpress/date';
+import { createElement, render } from '@wordpress/element';
+import { PopoverProvider } from '@wordpress/components';
+import { settings as dateSettings } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -40,15 +42,15 @@ const DEFAULT_SETTINGS = {
 };
 
 // Configure moment globally
-moment.locale( settings.l10n.locale );
-if ( settings.timezone.string ) {
-	moment.tz.setDefault( settings.timezone.string );
+moment.locale( dateSettings.l10n.locale );
+if ( dateSettings.timezone.string ) {
+	moment.tz.setDefault( dateSettings.timezone.string );
 } else {
 	const momentTimezone = {
 		name: 'WP',
 		abbrs: [ 'WP' ],
 		untils: [ null ],
-		offsets: [ -settings.timezone.offset * 60 ],
+		offsets: [ -dateSettings.timezone.offset * 60 ],
 	};
 	const unpackedTimezone = moment.tz.pack( momentTimezone );
 	moment.tz.add( unpackedTimezone );
@@ -58,35 +60,72 @@ if ( settings.timezone.string ) {
 /**
  * Initializes and returns an instance of Editor.
  *
- * @param {String} id              Unique identifier for editor instance
- * @param {Object} post            API entity for post to edit  (type required)
- * @param {Object} userSettings  Editor settings object
+ * @param {String}  id       Unique identifier for editor instance
+ * @param {Object}  post     API entity for post to edit
+ * @param {?Object} settings Editor settings object
  */
-export function createEditorInstance( id, post, userSettings ) {
-	const editorSettings = Object.assign( {}, DEFAULT_SETTINGS, userSettings );
+export function createEditorInstance( id, post, settings ) {
 	const store = createReduxStore();
+	const target = document.getElementById( id );
 
-	store.dispatch( {
-		type: 'SETUP_EDITOR',
-		settings: editorSettings,
-	} );
+	settings = {
+		...DEFAULT_SETTINGS,
+		...settings,
+	};
+
+	store.dispatch( { type: 'SETUP_EDITOR' } );
 
 	store.dispatch( setInitialPost( post ) );
 
-	render(
-		<ReduxProvider store={ store }>
-			<SlotFillProvider>
-				<EditableProvider {
-					...bindActionCreators( {
-						onUndo: undo,
-					}, store.dispatch ) }
-				>
-					<EditorSettingsProvider settings={ editorSettings }>
-						<Layout />
-					</EditorSettingsProvider>
-				</EditableProvider>
-			</SlotFillProvider>
-		</ReduxProvider>,
-		document.getElementById( id )
+	const providers = [
+		// Redux provider:
+		//
+		//  - context.store
+		[
+			ReduxProvider,
+			{ store },
+		],
+
+		// Slot / Fill provider:
+		//
+		//  - context.slots
+		//  - context.fills
+		[
+			SlotFillProvider,
+		],
+
+		// Editable provider:
+		//
+		//  - context.onUndo
+		[
+			EditableProvider,
+			bindActionCreators( {
+				onUndo: undo,
+			}, store.dispatch ),
+		],
+
+		// Editor settings provider:
+		//
+		//  - context.editor
+		[
+			EditorSettingsProvider,
+			{ settings },
+		],
+
+		// Popover provider:
+		//
+		//  - context.popoverTarget
+		[
+			PopoverProvider,
+			{ target },
+		],
+	];
+
+	const createEditorElement = flow(
+		providers.map( ( [ Component, props ] ) => (
+			( children ) => createElement( Component, props, children )
+		) )
 	);
+
+	render( createEditorElement( <Layout /> ), target );
 }