Modal component #6261

abotteram · 2018-04-18T20:18:18Z

Description

Adds a modal component. A more feature rich version of the one used in #6244.

Note: I've attempted to mimic the API from react-modal as much as possible.

Controlling whether the modal shows or not is the responsibility of the developer that implements the modal, using the isOpen props.

The modal mounts itself in the document body using createPortal.

For accessibility reasons, when opening a modal all other elements in the body get an aria-hidden="true" attribute, except for script tags and elements that already have an aria-hidden="true" element.

How has this been tested?

To see an overview of its features go to components/modal/README.md.

To test create a modal.js file in the ./edit-post folder with tthe following contents and add import './modal'; somewhere in edit-post/index.js.

import { Component, Fragment } from '@wordpress/element';
import { Modal } from '@wordpress/components';
import { PluginSidebar, PluginSidebarMoreMenuItem } from './';
import { registerPlugin } from '@wordpress/plugins';
import { dispatch } from '@wordpress/data';

const Icon = (
	<svg width="100%" height="100%" viewBox="0 0 100 100">
		<circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
	</svg>
);

const Content = () => (
	<div>
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod ex sed sem pulvinar vehicula. Sed lobortis mauris at sem sodales, molestie malesuada mauris vehicula. Aliquam dictum, urna vitae pharetra lacinia, ipsum lectus fringilla justo, eget condimentum nisi lorem quis tortor. Ut sed molestie quam. Integer sit amet libero blandit, finibus odio ac, ornare nisi. In hac habitasse platea dictumst. Sed ullamcorper at neque varius blandit. Morbi eget ligula vel arcu scelerisque pretium. Aliquam odio felis, eleifend non augue in, sodales suscipit tellus. Nam tincidunt congue nulla sit amet efficitur.</p>
		<p> Nulla egestas augue a mi ultrices, quis consequat dui aliquet. Cras elementum a felis vel scelerisque. Curabitur mollis ipsum a turpis elementum tempus. Fusce ut dui eu eros rhoncus vulputate. Sed tristique nunc ut velit tempor mollis. In sed ligula vulputate, fermentum est sit amet, maximus nulla. Pellentesque pulvinar egestas eros, nec varius mi commodo eget. </p>
		<p> Nam nulla felis, hendrerit sed turpis id, luctus vestibulum sapien. Nullam vel vehicula odio, fringilla aliquet arcu. Pellentesque tristique ac leo ac auctor. Aliquam dapibus urna vel ante convallis, id accumsan ipsum lacinia. Mauris pulvinar at sem at molestie. Phasellus risus augue, elementum sit amet rutrum vel, iaculis in leo. Fusce at viverra nulla, eget auctor augue. Phasellus eu elit vel mi ultricies dapibus. Vivamus varius in nunc sodales euismod. Proin velit elit, convallis et fermentum eget, suscipit aliquet nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam quis odio ac nisi dictum fringilla. Nullam condimentum nulla ac nisl malesuada, at semper magna tempus. In varius orci nisl, in sagittis lacus faucibus quis. Mauris rutrum vestibulum dolor, quis maximus turpis venenatis nec. </p>
		<p> Donec facilisis libero vel nisi venenatis porttitor. Donec at dapibus sem. Nulla scelerisque et lorem sit amet accumsan. Donec ac pulvinar sem. Maecenas libero neque, bibendum quis mollis nec, pulvinar at sapien. Vestibulum lacinia tellus quam, in gravida felis volutpat nec. Aliquam erat volutpat. Proin varius placerat libero malesuada gravida. Nam ac purus ut eros convallis fringilla. Nam velit ipsum, bibendum sit amet dapibus at, hendrerit in justo. Donec efficitur nibh mi, in gravida massa aliquet sit amet. Sed augue libero, aliquet Nullam ut nulla metus. Ut condimentum pellentesque finibus. Vestibulum cursus diam vel metus feugiat pretium. Mauris cursus ornare erat. Curabitur posuere lacinia libero, sed consequat quam rhoncus vel. Nam vel ipsum nec leo porta pulvinar. Etiam a pharetra purus. Vestibulum id efficitur risus, venenatis tristique leo. In porttitor sit amet mauris vitae luctus. Sed lacinia urna interdum libero hendrerit, maximus mollis elit facilisis. Mauris augue purus, tincidunt a nibh laoreet, gravida bibendum metus. Integer maximus leo urna, in dignissim mauris eleifend eget. Cras at leo a odio vulputate lacinia a eget turpis. Proin in vehicula purus. Phasellus rutrum metus et suscipit suscipit. Suspendisse at dui a dui ornare consectetur. </p>
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod ex sed sem pulvinar vehicula. Sed lobortis mauris at sem sodales, molestie malesuada mauris vehicula. Aliquam dictum, urna vitae pharetra lacinia, ipsum lectus fringilla justo, eget condimentum nisi lorem quis tortor. Ut sed molestie quam. Integer sit amet libero blandit, finibus odio ac, ornare nisi. In hac habitasse platea dictumst. Sed ullamcorper at neque varius blandit. Morbi eget ligula vel arcu scelerisque pretium. Aliquam odio felis, eleifend non augue in, sodales suscipit tellus. Nam tincidunt congue nulla sit amet efficitur.</p>
		<p> Nulla egestas augue a mi ultrices, quis consequat dui aliquet. Cras elementum a felis vel scelerisque. Curabitur mollis ipsum a turpis elementum tempus. Fusce ut dui eu eros rhoncus vulputate. Sed tristique nunc ut velit tempor mollis. In sed ligula vulputate, fermentum est sit amet, maximus nulla. Pellentesque pulvinar egestas eros, nec varius mi commodo eget. </p>
		<p> Nam nulla felis, hendrerit sed turpis id, luctus vestibulum sapien. Nullam vel vehicula odio, fringilla aliquet arcu. Pellentesque tristique ac leo ac auctor. Aliquam dapibus urna vel ante convallis, id accumsan ipsum lacinia. Mauris pulvinar at sem at molestie. Phasellus risus augue, elementum sit amet rutrum vel, iaculis in leo. Fusce at viverra nulla, eget auctor augue. Phasellus eu elit vel mi ultricies dapibus. Vivamus varius in nunc sodales euismod. Proin velit elit, convallis et fermentum eget, suscipit aliquet nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam quis odio ac nisi dictum fringilla. Nullam condimentum nulla ac nisl malesuada, at semper magna tempus. In varius orci nisl, in sagittis lacus faucibus quis. Mauris rutrum vestibulum dolor, quis maximus turpis venenatis nec. </p>
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod ex sed sem pulvinar vehicula. Sed lobortis mauris at sem sodales, molestie malesuada mauris vehicula. Aliquam dictum, urna vitae pharetra lacinia, ipsum lectus fringilla justo, eget condimentum nisi lorem quis tortor. Ut sed molestie quam. Integer sit amet libero blandit, finibus odio ac, ornare nisi. In hac habitasse platea dictumst. Sed ullamcorper at neque varius blandit. Morbi eget ligula vel arcu scelerisque pretium. Aliquam odio felis, eleifend non augue in, sodales suscipit tellus. Nam tincidunt congue nulla sit amet efficitur.</p>
		<p> Nulla egestas augue a mi ultrices, quis consequat dui aliquet. Cras elementum a felis vel scelerisque. Curabitur mollis ipsum a turpis elementum tempus. Fusce ut dui eu eros rhoncus vulputate. Sed tristique nunc ut velit tempor mollis. In sed ligula vulputate, fermentum est sit amet, maximus nulla. Pellentesque pulvinar egestas eros, nec varius mi commodo eget. </p>
		<p> Nam nulla felis, hendrerit sed turpis id, luctus vestibulum sapien. Nullam vel vehicula odio, fringilla aliquet arcu. Pellentesque tristique ac leo ac auctor. Aliquam dapibus urna vel ante convallis, id accumsan ipsum lacinia. Mauris pulvinar at sem at molestie. Phasellus risus augue, elementum sit amet rutrum vel, iaculis in leo. Fusce at viverra nulla, eget auctor augue. Phasellus eu elit vel mi ultricies dapibus. Vivamus varius in nunc sodales euismod. Proin velit elit, convallis et fermentum eget, suscipit aliquet nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam quis odio ac nisi dictum fringilla. Nullam condimentum nulla ac nisl malesuada, at semper magna tempus. In varius orci nisl, in sagittis lacus faucibus quis. Mauris rutrum vestibulum dolor, quis maximus turpis venenatis nec. </p>
		<p> Donec facilisis libero vel nisi venenatis porttitor. Donec at dapibus sem. Nulla scelerisque et lorem sit amet accumsan. Donec ac pulvinar sem. Maecenas libero neque, bibendum quis mollis nec, pulvinar at sapien. Vestibulum lacinia tellus quam, in gravida felis volutpat nec. Aliquam erat volutpat. Proin varius placerat libero malesuada gravida. Nam ac purus ut eros convallis fringilla. Nam velit ipsum, bibendum sit amet dapibus at, hendrerit in justo. Donec efficitur nibh mi, in gravida massa aliquet sit amet. Sed augue libero, aliquet Nullam ut nulla metus. Ut condimentum pellentesque finibus. Vestibulum cursus diam vel metus feugiat pretium. Mauris cursus ornare erat. Curabitur posuere lacinia libero, sed consequat quam rhoncus vel. Nam vel ipsum nec leo porta pulvinar. Etiam a pharetra purus. Vestibulum id efficitur risus, venenatis tristique leo. In porttitor sit amet mauris vitae luctus. Sed lacinia urna interdum libero hendrerit, maximus mollis elit facilisis. Mauris augue purus, tincidunt a nibh laoreet, gravida bibendum metus. Integer maximus leo urna, in dignissim mauris eleifend eget. Cras at leo a odio vulputate lacinia a eget turpis. Proin in vehicula purus. Phasellus rutrum metus et suscipit suscipit. Suspendisse at dui a dui ornare consectetur. </p>
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod ex sed sem pulvinar vehicula. Sed lobortis mauris at sem sodales, molestie malesuada mauris vehicula. Aliquam dictum, urna vitae pharetra lacinia, ipsum lectus fringilla justo, eget condimentum nisi lorem quis tortor. Ut sed molestie quam. Integer sit amet libero blandit, finibus odio ac, ornare nisi. In hac habitasse platea dictumst. Sed ullamcorper at neque varius blandit. Morbi eget ligula vel arcu scelerisque pretium. Aliquam odio felis, eleifend non augue in, sodales suscipit tellus. Nam tincidunt congue nulla sit amet efficitur.</p>
		<p> Nulla egestas augue a mi ultrices, quis consequat dui aliquet. Cras elementum a felis vel scelerisque. Curabitur mollis ipsum a turpis elementum tempus. Fusce ut dui eu eros rhoncus vulputate. Sed tristique nunc ut velit tempor mollis. In sed ligula vulputate, fermentum est sit amet, maximus nulla. Pellentesque pulvinar egestas eros, nec varius mi commodo eget. </p>
		<p> Nam nulla felis, hendrerit sed turpis id, luctus vestibulum sapien. Nullam vel vehicula odio, fringilla aliquet arcu. Pellentesque tristique ac leo ac auctor. Aliquam dapibus urna vel ante convallis, id accumsan ipsum lacinia. Mauris pulvinar at sem at molestie. Phasellus risus augue, elementum sit amet rutrum vel, iaculis in leo. Fusce at viverra nulla, eget auctor augue. Phasellus eu elit vel mi ultricies dapibus. Vivamus varius in nunc sodales euismod. Proin velit elit, convallis et fermentum eget, suscipit aliquet nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam quis odio ac nisi dictum fringilla. Nullam condimentum nulla ac nisl malesuada, at semper magna tempus. In varius orci nisl, in sagittis lacus faucibus quis. Mauris rutrum vestibulum dolor, quis maximus turpis venenatis nec. </p>
		<p> Donec facilisis libero vel nisi venenatis porttitor. Donec at dapibus sem. Nulla scelerisque et lorem sit amet accumsan. Donec ac pulvinar sem. Maecenas libero neque, bibendum quis mollis nec, pulvinar at sapien. Vestibulum lacinia tellus quam, in gravida felis volutpat nec. Aliquam erat volutpat. Proin varius placerat libero malesuada gravida. Nam ac purus ut eros convallis fringilla. Nam velit ipsum, bibendum sit amet dapibus at, hendrerit in justo. Donec efficitur nibh mi, in gravida massa aliquet sit amet. Sed augue libero, aliquet pretium sapien vel, pulvinar auctor nisl. </p>
		<p> Nullam ut nulla metus. Ut condimentum pellentesque finibus. Vestibulum cursus diam vel metus feugiat pretium. Mauris cursus ornare erat. Curabitur posuere lacinia libero, sed consequat quam rhoncus vel. Nam vel ipsum nec leo porta pulvinar. Etiam a pharetra purus. Vestibulum id efficitur risus, venenatis tristique leo. In porttitor sit amet mauris vitae luctus. Sed lacinia urna interdum libero hendrerit, maximus mollis elit facilisis. Mauris augue purus, tincidunt a nibh laoreet, gravida bibendum metus. Integer maximus leo urna, in dignissim mauris eleifend eget. Cras at leo a odio vulputate lacinia a eget turpis. Proin in vehicula purus. Phasellus rutrum metus et suscipit suscipit. Suspendisse at dui a dui ornare consectetur. </p>
	</div>
);

class ModalWrapper extends Component {
	constructor() {
		super( ...arguments );

		this.state = {
			isOpen: false,
		};

		this.onOpen = this.onOpen.bind( this );
		this.onClose = this.onClose.bind( this );
	}

	onOpen() {
		this.setState( {
			isOpen: true,
		} );
	}

	onClose() {
		this.setState( {
			isOpen: false,
		} );
	}

	render() {
		return (
			<Fragment>
				<button onClick={ this.onOpen }>Open modal</button>
				{ this.state.isOpen ? <Modal
					title="My Modal"
					onRequestClose={ this.onClose }>
					<button onClick={ this.onClose }>Close</button>
					<Content />
				</Modal> : null }
			</Fragment>
		);
	}
}

const SidebarContents = () => {
	const onClose = dispatch( 'core/edit-post' ).closeGeneralSidebar;
	return (
		<div>
			<ModalWrapper />
			<p>Here is the sidebar content!</p>
			<button onClick={ onClose }>Close</button>
		</div>
	);
};

const PluginComponent = () => {
	return (
		<Fragment>
			<PluginSidebar name="my-sidebar" title="My modal sidebar">
				<SidebarContents />
			</PluginSidebar>
			<PluginSidebarMoreMenuItem
				icon={ Icon }
				target="my-sidebar">
				My modal sidebar
			</PluginSidebarMoreMenuItem>}
		</Fragment>
	);
};

registerPlugin( 'my-modal-plugin', {
	render: PluginComponent,
} );

Screenshots

Ouput of the code above:

Types of changes

New feature

Checklist:

My code is tested.
Note: Tests are failing due to enzyme not recognizing the React forwardRef function.
Forward ref enzymejs/enzyme#1592
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

paulwilde · 2018-04-19T08:13:01Z

components/modal/modal-content.js

+import withFocusReturn from '../higher-order/with-focus-return';
+import withFocusContain from '../higher-order/with-focus-contain';
+
+const ESC_KEY = 27;


There is a utility inside @wordpress/utils named keycodes for this, withkeycodes.ESCAPE being the one you want.

paulwilde · 2018-04-19T08:20:06Z

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

+		}
+
+		handleTabBehaviour( event ) {
+			if ( event.keyCode === 9 ) {


There is a utility inside @wordpress/utils named keycodes which will allow you to use a readable version of the keycode instead of using the number.

paulwilde · 2018-04-19T08:42:00Z

Rather than relying on a bunch of inline styles it would make sense for such component to have at least some basic styling in place, as otherwise once plugins start to adopt this component we'd be left with a bunch of different looking modals rather than having consistency. If the concern is that the component would then be too limited in how it looks, then maybe a prop could be introduced where it would remove the CSS class which is applying those styles.

I have personally already built my own Modal component for a project which has a custom Map block with the ability to plot markers:

For the most part this modal pretty much matches all the modals already in WordPress Core. The overlay background colour, the shadow on the modal itself, etc.

I think a modal component should at the very minimum have a title prop whilst all of the body of the modal itself is left up to the plugin developer.

Here is the inner markup I've used for my modal:

<div role="document" className="modal-dialog">
    <div className="modal-content">
        <div className="modal-header">
            { title && <h1 className="modal-title">{ title }</h1> }
            <IconButton icon="no-alt" className="modal-close" onClick={ onClose } />
        </div>
        { children }
    </div>
</div>

abotteram · 2018-04-19T09:49:13Z

@paulwilde Thank you for your review. I agree it needs some styling, but because in gutenberg it should not overlay the WordPress-menu I wanted to create a specific gutenberg implementation in edit-post.

It also accepts classNames for both the content and the overlay. The style prop is mostly to keep it consistent with react-modal.

aduth · 2018-04-24T18:52:02Z

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

+		}
+
+		componentWillUnmount() {
+			this.focusContainRef.current.addEventListener( 'keydown', this.handleTabBehaviour );


removeEventListener ?

See next comment.

aduth · 2018-04-24T18:52:51Z

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

+		}
+
+		componentDidMount() {
+			this.focusContainRef.current.addEventListener( 'keydown', this.handleTabBehaviour );


Why do we need to bind this on the node directly instead of a prop onKeyDown on the rendered div ?

Should we include a code comment informing future maintainers?

aduth · 2018-04-24T18:54:03Z

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

+		}
+
+		handleTabBehaviour( event ) {
+			if ( event.keyCode === 9 ) {


Minor: Early return lets you avoid indenting the rest of the function, and I find to be generally more readable:

if ( event.keyCode !== 9 ) { return; }

aduth · 2018-04-24T18:54:19Z

components/modal/README.md

@@ -0,0 +1,117 @@
+RangeControl


Copy-pasta. 🍝

aduth · 2018-04-24T18:55:45Z

components/modal/modal-content.js

+
+	componentDidMount() {
+		// Focus on mount
+		if ( this.props.focusOnMount ) {


Documentation claims this is default to true but I'm not seeing where that takes effect.

aduth · 2018-04-24T19:01:32Z

components/modal/style.scss

@@ -0,0 +1,9 @@
+.components-modal {
+	&__screen-overlay {


Minor: My recommendation would be to avoid the nesting and just create separate rules for them. This is a bit too clever.

.components-modal__screen-overlay {

aduth · 2018-04-24T19:03:06Z

components/modal/index.js

+}
+
+Modal.defaultProps = {
+	className: null,


What value is providing a default here doing?

aduth · 2018-04-24T19:04:22Z

components/modal/index.js

+};
+
+function setElements() {
+	const wpwrapEl = document.getElementById( 'wpwrap' );


This binds usage to a specific WordPress context, eliminating reusability of the component. The component shouldn't have any awareness of its ancestry. Can we pass this data via context instead?

aduth · 2018-04-24T19:06:00Z

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

+
+				if ( event.shiftKey && event.target === firstTabbable ) {
+					event.preventDefault();
+					return lastTabbable.focus();


What/why are we return-ing here?

aduth · 2018-04-24T19:06:51Z

components/modal/index.js

+			...otherProps
+		} = this.props;
+
+		if ( ! this.node ) {


This should be in the constructor. A render should have no side effects.

afercia · 2018-05-01T17:19:52Z

Updated instructions to see this modal in action (readme and instructions in the first comment need to be updated):

In edit-post/editor.js

First, import what is needed:
import Modal, { ModalContextProvider } from '../components/modal';
import { __ } from '@wordpress/i18n';

Then, after the <Layout /> component, add this:

<ModalContextProvider value={ { appElementId: 'wpwrap' } }>
	<Modal
		aria={ {
			labelledby: 'modal-title',
			describedby: 'modal-description',
		} }
		parentSelector={ () => {
			return document.getElementById( 'wpwrap' );
		} }
		isOpen={ true }
		title={ __( 'My awesome modal!' ) }
		>
		<div>
			<h2 id="modal-title">My modal content!</h2>
			<p id="modal-description">This modal is meant to be awesome!</p>
			<p>moar text!</p>
		</div>
	</Modal>
</ModalContextProvider>

afercia · 2018-05-01T18:18:32Z

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

+		}
+
+		handleTabBehaviour( event ) {
+			if ( ! event.keyCode === TAB ) {


This is false for any key pressed, please double check. It should be if ( event.keyCode !== TAB )

To clarify what's happening here, the negation occurs before the equality check, so this is effectively:

if ( false === TAB ) {

Makes me wish this ESLint rule were expanded to cover this case: https://eslint.org/docs/rules/no-unsafe-negation

No idea how I made this mistake... :/

afercia · 2018-05-01T18:31:19Z

components/modal/frame.js

+				style={ style }
+				ref={ this.containerRef }
+				role="dialog"
+				aria-modal={ true }


For some reason, aria-modal="true" prevents Safari + VoiceOver to read out the content of the modal when using Control-Option-Arrows. This doesn't happen on react-modal because it (incorrectlysets it on the overlay. aria-modalis new in ARIA 1.1 and apparently not well supported. We should investigate this, since its effect is supposed to be the same we get witharia-hidden` on the content outside the modal, maybe we should just not use it for now.

afercia · 2018-05-01T18:34:47Z

components/modal/header.js

+			className={ 'components-modal__header' }
+		>
+			<div>
+				<span aria-hidden="true">


we should avoid to render an empty span if an icon prop is not passed

…d, also added aria.labelledby change logic

aduth

Looks good, thanks for working through this one. I pushed a couple revisions in 1a0bf75 and 8778706 .

I also observed an unexpected behavior where multiple div were created in the parent element. In a strange coincidence, I found this tracked back to another issue I discovered today with StrictMode where apparently two copies of the component are being constructed, thus the extra node. This will only apply to development environments, not the plugin distributable. It's an issue we should sort through, but outside the scope of these immediate changes.

aduth · 2018-07-04T00:00:01Z

components/higher-order/with-global-events/index.js

-		};
+		}
+
+		return forwardRef( ( props, ref ) => {


Should this be built-in to createHigherOrderComponent ?

See similar mention at #6480 (comment)

This comment has yet to be addressed or responded.

For future readers, see related effort at #7557 .

aduth · 2018-07-04T00:32:57Z

components/modal/index.js

+	 *
+	 * @param {Object} nextProps The component's next props.
+	 */
+	componentWillReceiveProps( nextProps ) {


componentWillReceiveProps is effectively deprecated.

https://reactjs.org/docs/react-component.html#the-component-lifecycle

For this type of usage, you may consider static getDerivedStateFromProps instead:

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

However, in this case I don't think this requires state. I think we can just use the withInstanceId higher-order component.

I will make these revisions in an upcoming commit.

gziolo · 2018-07-04T08:54:24Z

🎉 thank you for landing this one!

@xyfi @atimmer @omarreiss, what are next steps planned? We still need to provide Plugins API integration with pinning support for easier consumption for plugin developers. I see that #6241 contains some logic in that area. Do you plan to continue working on it or should I put up some PR next week?

phpbits · 2018-07-07T07:02:24Z

@gziolo Tested and should the .components-modal__screen-overlay background color dark instead of using white? Thanks!

gziolo · 2018-07-09T07:01:38Z

Tested and should the .components-modal__screen-overlay background color dark instead of using white? Thanks!

@xyfi @jasmussen any thoughts on this one? I didn't follow closely design decisions made for this PR.

mtias · 2018-07-20T13:49:21Z

It's meant to be white, it's more coherent with the design of the editor.

afercia · 2018-07-20T14:47:22Z

This should be discussed during a dev chat and preferably with @helen
Gutenberg is not an isolated piece of software. It will be part of WordPress. In WordPress, the modal overlays are darker. Introducing a white overlay introduces inconsistency. Well, to be honest there are many other inconsistencies in core, but this is pretty noticeable.

mtias · 2018-07-20T15:10:35Z

These modals will also work differently in how they are invoked.

phpbits · 2018-07-20T16:01:56Z

@mtias I see, then why does the overlay color is using darker version on the screenshots above? Thanks!

pento · 2018-07-23T01:16:22Z

This should be discussed during a dev chat

Dev chat isn't really the appropriate venue for discussing Gutenberg design issues, that's what the design meetings are for, as well as the editor meetings. There's certainly a discussion to be had over ensuring consistency, but I'll leave it to @karmatosed as the Gutenberg Design Lead to expend on her thoughts here.

Given that Gutenberg introduces a whole pile of new design elements to WordPress, many of which are different to existing elements, it seems to me there's a reasonable argument that Gutenberg is introducing a new design language, so there will be some inconsistencies for a while, as the scope of Gutenberg expands beyond the editor page, to site customisation, and beyond.

afercia · 2018-07-23T06:53:57Z

As I see it this is not just a "Gutenberg design" issue. It's about integration in WordPress and introduction of new patterns in WordPress so, in my opinion, dev chat is the appropriate place to discuss it.

karmatosed · 2018-07-24T01:23:35Z

I agree with @pento there is no need to have this discussed in a dev chat. This issue works for discussion. If it were to happen in any chat this would be for a design chat, not dev one also. This is talking about inconsistencies in design and would be something the design team (who meet every week) could discuss there. I still think that's the wrong approach and standby it should be within this issue.

In many patterns new design has been created within Gutenberg that doesn't exist in core. Some does, some doesn't. We don't and shouldn't limit everything to what came before. We can respect it but maybe we have a better option and that's to have an open mind about. On merge perhaps over time core will adopt the new modals.

Regarding the modal, ideally we do have one treatment but we don't have to be limited by what exists today in core. Therefore, I standby the work done here so far.

afercia · 2018-07-24T07:18:11Z

We agree we disagree 🙂Introducing new patterns without considering the overall impact and consistency with the existing ones in core is not necessarily good. I'm not saying which one is better. I'd just like to see consistency. In my opinion, it's a responsibility of the Gutenberg team to make sure consistency is respected. In this specific case, if the team thinks a lighter overlay is better, then it's a team responsibility to make a proposal to change the overlays in core.

* Add mode to directive processing * Add #59886 wp-develop fix * Add #6251 fix * Fix linter * Include #6261 wp-develop * Fix spacing Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org> Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org> Co-authored-by: sirreal <jonsurrell@git.wordpress.org>

* Add mode to directive processing * Add WordPress#59886 wp-develop fix * Add WordPress#6251 fix * Fix linter * Include WordPress#6261 wp-develop * Fix spacing Co-authored-by: c4rl0sbr4v0 <cbravobernal@git.wordpress.org> Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org> Co-authored-by: sirreal <jonsurrell@git.wordpress.org>

Initial implementation modal

bf9f287

abotteram added the [Feature] UI Components Impacts or related to the UI component system label Apr 19, 2018

paulwilde reviewed Apr 19, 2018

View reviewed changes

Alexander Botteram added 2 commits April 19, 2018 12:09

removed style prop assignment causing error

aba9636

Set default mount node to #wpwrap

b0700fb

boblinthorst mentioned this pull request Apr 24, 2018

Add modal using react modal #6375

Closed

4 tasks

aduth requested changes Apr 24, 2018

View reviewed changes

Alexander Botteram added 16 commits April 25, 2018 11:33

Implemented default styling

66367dd

Improved styling

aca49d0

Applied code review feedback to with-focus-contain HOC

3a5d75c

Added eslint ignore for jsx-a11y/no-static-element-interactions

371e66b

Implemented withGlobalEvents HOC

bd48b5a

withGlobalEvents HOC now forwards refs

809bfdd

Replace lodash defer with withSafeTimeout

47219be

Removed unnecessary return statements

9b93633

Created separate styling rules

de29a46

Added documentation for forwardRef function

4a1b2c4

Made mount location for modal configurable

1092fbd

Renamed elementId to appElementId for clarity

44d91d3

Added noop for when no reg is provided in forwardRef

4aef9b6

Fixed error in EditorProvider

5c0568c

Fix eslint errors

887193d

Fixed incorrectly bound function

b0c4d82

afercia reviewed May 1, 2018

View reviewed changes

abotteram and others added 3 commits July 3, 2018 22:31

Don't add unique id to headingId when aria.labelledby prop is provide…

9ee5b83

…d, also added aria.labelledby change logic

Components: Reorder component lifecycle as first class members

1a0bf75

Components: Use withInstanceId to generate modal heading id

8778706

aduth approved these changes Jul 4, 2018

View reviewed changes

Components: Fix modal withInstanceId import reference

6a43d9f

aduth merged commit 8b21632 into master Jul 4, 2018

aduth deleted the add/modal branch July 4, 2018 01:30

aduth mentioned this pull request Jul 4, 2018

Screen takeover using react-modal #6241

Closed

4 tasks

tofumatt mentioned this pull request Jul 4, 2018

Images and embeds do not work #7707

Closed

adamsilverstein mentioned this pull request Jul 6, 2018

Enable Heartbeat Post Locking #4331

Closed

tn3rb mentioned this pull request Jul 20, 2018

Add HoverText UI Component eventespresso/event-espresso-core#597

Closed

8 tasks

aduth mentioned this pull request Apr 11, 2019

Components: Add onFocusOutside replacement to Popover onClickOutside #14851

Merged

kjellr mentioned this pull request Jun 3, 2019

Try: Make the modal overlay scrim darker #15974

Merged

stokesman mentioned this pull request Jul 22, 2023

Modal: Fix loss of focus when clicking outside #52653

Merged

cbravobernal added a commit that referenced this pull request Mar 15, 2024

Include #6261 wp-develop

909aadd

This was referenced May 24, 2024

Update URLPopover role and focus return #61313

Merged

Interactivity API: aria-modal is not sufficient to hide content from assistive technology #61944

Open

Modal component #6261

Modal component #6261

Conversation

abotteram commented Apr 18, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulwilde commented Apr 19, 2018

abotteram commented Apr 19, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afercia commented May 1, 2018 • edited Loading

Choose a reason for hiding this comment

aduth May 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Jul 4, 2018

phpbits commented Jul 7, 2018

gziolo commented Jul 9, 2018

mtias commented Jul 20, 2018

afercia commented Jul 20, 2018

mtias commented Jul 20, 2018

phpbits commented Jul 20, 2018

pento commented Jul 23, 2018

afercia commented Jul 23, 2018

karmatosed commented Jul 24, 2018 • edited Loading

afercia commented Jul 24, 2018

abotteram commented Apr 18, 2018 •

edited

Loading

afercia commented May 1, 2018 •

edited

Loading

aduth May 1, 2018 •

edited

Loading

karmatosed commented Jul 24, 2018 •

edited

Loading