diff --git a/.eslintrc.js b/.eslintrc.js
index a9ce5392e2f2e..4bb1966dde375 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -104,7 +104,7 @@ module.exports = {
{
name: '@emotion/css',
message:
- 'Please use `@emotion/react` and `@emotion/styled` in order to maintain iframe support',
+ 'Please use `@emotion/react` and `@emotion/styled` in order to maintain iframe support. As a replacement for the `cx` function, please use the `useCx` hook defined in `@wordpress/components` instead.',
},
],
},
diff --git a/changelog.txt b/changelog.txt
index 745a6fe44db92..80a58d1902190 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,6 +1,6 @@
== Changelog ==
-= 11.4.0-rc.1 =
+= 11.4.0 =
### Enhancements
- Accessibility
@@ -9,23 +9,23 @@
- Block Editor
- Block Lists: improve iframe block, pattern and template previews. ([28165](https://github.com/WordPress/gutenberg/pull/28165))
- Block Library
- - Query Loop: Update Post Template sub-block icon. ([34204](https://github.com/WordPress/gutenberg/pull/34204))
+ - Query Loop: update Post Template sub-block icon. ([34204](https://github.com/WordPress/gutenberg/pull/34204))
- Convert Gallery block to use Image blocks. ([25940](https://github.com/WordPress/gutenberg/pull/25940))
- Post Featured Image: add duotone block supports. ([34113](https://github.com/WordPress/gutenberg/pull/34113))
- Post Featured Image: add contextual help text to the `scale`property. ([34158](https://github.com/WordPress/gutenberg/pull/34158))
- File block: update transform from image to use image filename if caption is empty. ([34256](https://github.com/WordPress/gutenberg/pull/34256))
- Post date Block: add font weight support to the block. ([34070](https://github.com/WordPress/gutenberg/pull/34070))
- Post terms: add font weight support to the block. ([34142](https://github.com/WordPress/gutenberg/pull/34142))
- - Site Tagline: Add font weight support. ([33983](https://github.com/WordPress/gutenberg/pull/33983))
+ - Site Tagline: add font weight support. ([33983](https://github.com/WordPress/gutenberg/pull/33983))
- Button: update spacing support to use axial padding. ([33859](https://github.com/WordPress/gutenberg/pull/33859))
- Components
- Add deprecated props adapter for ColorPicker. ([34014](https://github.com/WordPress/gutenberg/pull/34014))
- Wrap SegmentedControl in a BaseControl with an added `help` property. ([34017](https://github.com/WordPress/gutenberg/pull/34017))
- Combobox: update the current selection if the list of suggestions is filtered. ([33928](https://github.com/WordPress/gutenberg/pull/33928))
- - Post Title: Use rich text hook and updating tag to `h1` ([31569](https://github.com/WordPress/gutenberg/pull/31569))
+ - Post Title: use rich text hook and updating tag to `h1` ([31569](https://github.com/WordPress/gutenberg/pull/31569))
- Design Tools
- Add layout default value support for blocks. ([34194](https://github.com/WordPress/gutenberg/pull/34194))
- - Dimensions Panel: Add padding tool as default for blocks where this is common setting. ([34026](https://github.com/WordPress/gutenberg/pull/34026))
+ - Dimensions Panel: add padding tool as default for blocks where this is a common setting. ([34026](https://github.com/WordPress/gutenberg/pull/34026))
- Navigation Screen
- Update navigation screen topbar. ([34166](https://github.com/WordPress/gutenberg/pull/34166))
- Packages
@@ -37,18 +37,8 @@
- Refactor editor 'feature' preferences to interface package. ([33774](https://github.com/WordPress/gutenberg/pull/33774))
### Bug Fixes
-- Build Tooling
- - Webpack: Fix watch on `.json` and `.php` files. ([34024](https://github.com/WordPress/gutenberg/pull/34024))
-- Components
- - Fix RTL on `Flex` component. ([33729](https://github.com/WordPress/gutenberg/pull/33729))
- - NavigationSidebar: fix template content for content-navigation-item preview. ([34203](https://github.com/WordPress/gutenberg/pull/34203))
- - Remove deprecated import style for storybook/addon-docs. ([34095](https://github.com/WordPress/gutenberg/pull/34095))
- - ToolsPanel: Add tools panel item deregistration. ([34085](https://github.com/WordPress/gutenberg/pull/34085))
- - Post Title: Remove wrapper div & fix border style. ([34167](https://github.com/WordPress/gutenberg/pull/34167))
-- Core Data
- - GetEntityRecords return items even if some included IDs don't exist. ([34034](https://github.com/WordPress/gutenberg/pull/34034))
- Block API
- - Spacing/Dimensions Supports: Separate spacing from dimensions for compatibility purposes. ([34059](https://github.com/WordPress/gutenberg/pull/34059))
+ - Spacing/Dimensions Supports: separate spacing from dimensions for compatibility purposes. ([34059](https://github.com/WordPress/gutenberg/pull/34059))
- Block Editor
- Font-size adjustment for tablet and mobile device previews. ([33342](https://github.com/WordPress/gutenberg/pull/33342))
- Fix single block selection by holding `shift` key. ([34137](https://github.com/WordPress/gutenberg/pull/34137))
@@ -59,16 +49,27 @@
- Latest Comments: use site locale in the editor. ([33944](https://github.com/WordPress/gutenberg/pull/33944))
- Navigation: fix vertical layout on the frontend. ([34226](https://github.com/WordPress/gutenberg/pull/34226))
- Navigation: add z-index value to responsive menu overlay. ([34228](https://github.com/WordPress/gutenberg/pull/34228))
- - Navigation: enable flex on nav container to fix space between. ([34258](https://github.com/WordPress/gutenberg/pull/34258))
+ - Navigation: enable flex on container to fix space between. ([34258](https://github.com/WordPress/gutenberg/pull/34258))
- Navigation: fix submenu icon positioning. ([34168](https://github.com/WordPress/gutenberg/pull/34168))
- Navigation block: add missing `` closing tag. ([34077](https://github.com/WordPress/gutenberg/pull/34077))
- Post Excerpt: remove interactive formatting. ([34083](https://github.com/WordPress/gutenberg/pull/34083))
- - RichText: fix Space key for button and summary elements. ([30244](https://github.com/WordPress/gutenberg/pull/30244))
+ - RichText: fix `space` key for button and summary elements. ([30244](https://github.com/WordPress/gutenberg/pull/30244))
- Search Block: add space between generated border class names. ([34025](https://github.com/WordPress/gutenberg/pull/34025))
+- Build Tooling
+ - Webpack: Fix watch on `.json` and `.php` files. ([34024](https://github.com/WordPress/gutenberg/pull/34024))
+ - Pin TypeScript dependency to a specific version to avoid pulling in breaking changes. ([34422](https://github.com/WordPress/gutenberg/pull/34422))
+- Components
+ - Fix RTL on `Flex` component. ([33729](https://github.com/WordPress/gutenberg/pull/33729))
+ - NavigationSidebar: fix template content for content-navigation-item preview. ([34203](https://github.com/WordPress/gutenberg/pull/34203))
+ - Remove deprecated import style for storybook/addon-docs. ([34095](https://github.com/WordPress/gutenberg/pull/34095))
+ - ToolsPanel: add tools panel item deregistration. ([34085](https://github.com/WordPress/gutenberg/pull/34085))
+ - Post Title: remove wrapper div and fix border style. ([34167](https://github.com/WordPress/gutenberg/pull/34167))
+- Core Data
+ - `GetEntityRecords` returns items even if some included IDs don't exist. ([34034](https://github.com/WordPress/gutenberg/pull/34034))
- Design Tools
- - Allow zero values for Theme JSON styles. ([34251](https://github.com/WordPress/gutenberg/pull/34251))
+ - Allow zero values for `theme.json` styles. ([34251](https://github.com/WordPress/gutenberg/pull/34251))
- Global Styles
- - Site editor: Fix for how CSS Custom Properties are generated. ([33932](https://github.com/WordPress/gutenberg/pull/33932))
+ - Site editor: fix for how CSS custom properties are generated. ([33932](https://github.com/WordPress/gutenberg/pull/33932))
- Packages
- Rich Text: add check to `toTree()` in replacements before accessing its type. ([34020](https://github.com/WordPress/gutenberg/pull/34020))
- Post Editor
@@ -81,50 +82,59 @@
### Experiments
- Block API
- - Block Editor: Absorb parent block toolbar controls. ([33955](https://github.com/WordPress/gutenberg/pull/33955))
- - Block Editor: Use groups for InspectorControls. ([34069](https://github.com/WordPress/gutenberg/pull/34069))
+ - Block Editor: absorb parent block toolbar controls. ([33955](https://github.com/WordPress/gutenberg/pull/33955))
+ - Block Editor: use groups for InspectorControls. ([34069](https://github.com/WordPress/gutenberg/pull/34069))
- Block Library
- Add generic classnames to children of Navigation. ([33918](https://github.com/WordPress/gutenberg/pull/33918))
- Global Styles
- Add slashes back to the Theme JSON. ([33919](https://github.com/WordPress/gutenberg/pull/33919))
- - Add block spacing gap configuration to theme.json and add support for this CSS variable to the "flow/default" layout. ([33812](https://github.com/WordPress/gutenberg/pull/33812))
+ - Add block spacing gap configuration to `theme.json` and add support for this CSS variable to the "flow/default" layout. ([33812](https://github.com/WordPress/gutenberg/pull/33812))
### Documentation
-- Packages
- - Add documentation for mobile components directory. ([33872](https://github.com/WordPress/gutenberg/pull/33872))
- Handbook
- Alphabetize glossary entries. ([34058](https://github.com/WordPress/gutenberg/pull/34058))
- - Correct minor typos in wp-plugin.md ([34185](https://github.com/WordPress/gutenberg/pull/34185))
+ - Correct minor typos in `wp-plugin.md` ([34185](https://github.com/WordPress/gutenberg/pull/34185))
- Remove extraneous params from `block_type_metadata` hook. ([34151](https://github.com/WordPress/gutenberg/pull/34151))
- - Update incorrect Settings examples in "Global Settings & Styles". ([34084](https://github.com/WordPress/gutenberg/pull/34084))
- - Use block.json to add attributes in create block tutorial. ([33978](https://github.com/WordPress/gutenberg/pull/33978))
- - Fix typo in block gap documentation in theme-json.md. ([34231](https://github.com/WordPress/gutenberg/pull/34231))
- - Fix broken mobile testing documentation link in testing-overview.md . ([34187](https://github.com/WordPress/gutenberg/pull/34187))
- - Fix typo in legacy-widget-block.md. ([34103](https://github.com/WordPress/gutenberg/pull/34103))
- - Update spelling and `fontSize` examples in create-block-theme.md. ([34152](https://github.com/WordPress/gutenberg/pull/34152))
+ - Update incorrect settings examples in "Global Settings & Styles". ([34084](https://github.com/WordPress/gutenberg/pull/34084))
+ - Use `block.json` to add attributes in create block tutorial. ([33978](https://github.com/WordPress/gutenberg/pull/33978))
+ - Fix typo in block gap documentation in `theme-json.md`. ([34231](https://github.com/WordPress/gutenberg/pull/34231))
+ - Fix broken mobile testing documentation link in `testing-overview.md`. ([34187](https://github.com/WordPress/gutenberg/pull/34187))
+ - Fix typo in `legacy-widget-block.md`. ([34103](https://github.com/WordPress/gutenberg/pull/34103))
+ - Update spelling and `fontSize` examples in `create-block-theme.md`. ([34152](https://github.com/WordPress/gutenberg/pull/34152))
- Library
- - Bump mobile version in experiments page for gallery. ([34220](https://github.com/WordPress/gutenberg/pull/34220))
+ - Bump mobile version in experiments page for Gallery. ([34220](https://github.com/WordPress/gutenberg/pull/34220))
+- Packages
+ - Add documentation for mobile components directory. ([33872](https://github.com/WordPress/gutenberg/pull/33872))
### Code Quality
- Block Editor
- Render head and body with single portal for block previews. ([34208](https://github.com/WordPress/gutenberg/pull/34208))
- BlockList: refactor element context for style/svg appending. ([34183](https://github.com/WordPress/gutenberg/pull/34183))
- - BlockList: Use InnerBlocks internally. ([29895](https://github.com/WordPress/gutenberg/pull/29895))
-- Site Editor
- - Remove extra dom element used for template part overlay. ([34012](https://github.com/WordPress/gutenberg/pull/34012))
+ - BlockList: use InnerBlocks internally. ([29895](https://github.com/WordPress/gutenberg/pull/29895))
- Components
- Unit Control: add unit tests for `getValidParsedUnit` utility method. ([34029](https://github.com/WordPress/gutenberg/pull/34029))
- Rename `SegmentedControl` to `ToggleGroupControl`. ([34111](https://github.com/WordPress/gutenberg/pull/34111))
- Dropdown Menu: remove min-width from the dropdown component and add whitespace rule to avoid wrapping ([33995](https://github.com/WordPress/gutenberg/pull/33995))
- Core Data
- Allow passing store definitions to controls. ([34170](https://github.com/WordPress/gutenberg/pull/34170))
+- Site Editor
+ - Remove extra DOM element used for template part overlay. ([34012](https://github.com/WordPress/gutenberg/pull/34012))
### Tools
+- Build Tooling
+ - Automated Changelog: force group all documentation tasks under `Documentation`. ([34042](https://github.com/WordPress/gutenberg/pull/34042))
+ - Automated Changelog: rename "Editor" grouping to "Post Editor" to avoid ambiguity with other editors. ([34093](https://github.com/WordPress/gutenberg/pull/34093))
+ - Automated Changelog: sort feature groups by issue name. ([34071](https://github.com/WordPress/gutenberg/pull/34071))
+ - Automated Changelog: use nested headings for feature groups instead of indenting lists. ([34040](https://github.com/WordPress/gutenberg/pull/34040))
+ - Automated Changelog: remove `Uncategorized` header in output and place items at top. ([34037](https://github.com/WordPress/gutenberg/pull/34037))
+ - Add Typescript extensions to watched files. ([34094](https://github.com/WordPress/gutenberg/pull/34094))
+ - Remove obsolete step that pushes tags in NPM publishing flow. ([34114](https://github.com/WordPress/gutenberg/pull/34114))
+ - Release workflow: only commit modified changelogs. ([34211](https://github.com/WordPress/gutenberg/pull/34211))
- ESLint
- - Eslint plugin: Use @typescript-eslint/no-duplicate-imports in TS projects. ([34055](https://github.com/WordPress/gutenberg/pull/34055))
+ - Eslint plugin: use `@typescript-eslint/no-duplicate-imports` in TS projects. ([34055](https://github.com/WordPress/gutenberg/pull/34055))
- GitHub Contributor Templates
- - Issue Forms: Simplify the bug report form template. ([34007](https://github.com/WordPress/gutenberg/pull/34007))
+ - Issue Forms: simplify the bug report form template. ([34007](https://github.com/WordPress/gutenberg/pull/34007))
- Logs
- Hide deprecation logs under a console group. ([34163](https://github.com/WordPress/gutenberg/pull/34163))
- Testing
@@ -134,14 +144,6 @@
- Remove the `ENVIRONMENT_DIRECTORY` env variable that was added to the performance jobs. ([34086](https://github.com/WordPress/gutenberg/pull/34086))
- Add snapshot test for changelog formatting. ([34049](https://github.com/WordPress/gutenberg/pull/34049))
- Experiment with using REST API in end-to-end tests to build up states. ([33414](https://github.com/WordPress/gutenberg/pull/33414))
-- Build Tooling
- - Automated Changelog: force group all documentation tasks under `Documentation`. ([34042](https://github.com/WordPress/gutenberg/pull/34042))
- - Automated Changelog: rename "Editor" grouping to "Post Editor" to avoid ambiguity with other editors. ([34093](https://github.com/WordPress/gutenberg/pull/34093))
- - Automated Changelog: sort feature groups by issue name. ([34071](https://github.com/WordPress/gutenberg/pull/34071))
- - Automated Changelog: use nested headings for feature groups instead of indenting lists. ([34040](https://github.com/WordPress/gutenberg/pull/34040))
- - Automated Changelog: remove `Uncategorized` header in output and place items at top. ([34037](https://github.com/WordPress/gutenberg/pull/34037))
- - Add Typescript extensions to watched files. ([34094](https://github.com/WordPress/gutenberg/pull/34094))
- - Remove obsolete step that pushes tags in npm publishing flow. ([34114](https://github.com/WordPress/gutenberg/pull/34114))
diff --git a/gutenberg.php b/gutenberg.php
index 474610ed70ee8..8b975db8bcd24 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
* Description: Printing since 1440. This is the development plugin for the new block editor in core.
* Requires at least: 5.6
* Requires PHP: 5.6
- * Version: 11.4.0-rc.1
+ * Version: 11.4.0
* Author: Gutenberg Team
* Text Domain: gutenberg
*
diff --git a/package-lock.json b/package-lock.json
index 5e6609560bfb5..c3c1f113627cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "gutenberg",
- "version": "11.4.0-rc.1",
+ "version": "11.4.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 5aa265595e143..13696a49f7d48 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "gutenberg",
- "version": "11.4.0-rc.1",
+ "version": "11.4.0",
"private": true,
"description": "A new WordPress editor experience.",
"author": "The WordPress Contributors",
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index 9f2f59213f8af..30450edbc7cc6 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -52,12 +52,13 @@
font-size: $default-font-size;
left: 0;
margin-bottom: 0;
- max-height: 100%;
+ max-height: 60%;
overflow: auto;
- padding: 40px 10px 9px;
+ padding: 0 8px 8px;
position: absolute;
text-align: center;
width: 100%;
+ box-sizing: border-box;
img {
display: inline;
diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss
index 69f5eadb9acf9..5eac3985921e4 100644
--- a/packages/components/src/date-time/style.scss
+++ b/packages/components/src/date-time/style.scss
@@ -12,6 +12,7 @@
.components-datetime__calendar-help {
padding: $grid-unit-20;
+ min-width: 260px;
h4 {
margin: 0;
@@ -47,6 +48,10 @@
margin-top: 0;
margin-bottom: 0;
}
+
+ .components-button:focus {
+ z-index: z-index(".components-button {:focus or .is-primary}");
+ }
}
.components-datetime__date {
diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js
deleted file mode 100644
index b563dff76c255..0000000000000
--- a/packages/components/src/modal/frame.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-
-import { Component } from '@wordpress/element';
-import { ESCAPE } from '@wordpress/keycodes';
-import {
- useFocusReturn,
- useFocusOnMount,
- useConstrainedTabbing,
- useMergeRefs,
-} from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import withFocusOutside from '../higher-order/with-focus-outside';
-
-function ModalFrameContent( {
- overlayClassName,
- contentLabel,
- aria: { describedby, labelledby },
- children,
- className,
- role,
- style,
- focusOnMount,
- shouldCloseOnEsc,
- onRequestClose,
-} ) {
- function handleEscapeKeyDown( event ) {
- if (
- shouldCloseOnEsc &&
- event.keyCode === ESCAPE &&
- ! event.defaultPrevented
- ) {
- event.preventDefault();
- if ( onRequestClose ) {
- onRequestClose( event );
- }
- }
- }
- const focusOnMountRef = useFocusOnMount( focusOnMount );
- const constrainedTabbingRef = useConstrainedTabbing();
- const focusReturnRef = useFocusReturn();
-
- return (
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-
- );
-};
-
-export default ModalHeader;
diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js
index 2144972d42f18..0d4ec5de58f04 100644
--- a/packages/components/src/modal/index.js
+++ b/packages/components/src/modal/index.js
@@ -1,173 +1,164 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
-import { Component, createPortal } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/compose';
+import { createPortal, useEffect, useRef } from '@wordpress/element';
+import {
+ useInstanceId,
+ useFocusReturn,
+ useFocusOnMount,
+ __experimentalUseFocusOutside as useFocusOutside,
+ useConstrainedTabbing,
+ useMergeRefs,
+} from '@wordpress/compose';
import deprecated from '@wordpress/deprecated';
+import { ESCAPE } from '@wordpress/keycodes';
+import { __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
/**
* Internal dependencies
*/
-import ModalFrame from './frame';
-import ModalHeader from './header';
import * as ariaHelper from './aria-helper';
+import Button from '../button';
// Used to count the number of open modals.
-let parentElement,
- openModalCount = 0;
-
-class Modal extends Component {
- constructor( props ) {
- super( props );
- this.prepareDOM();
- }
-
- /**
- * Appends the modal's node to the DOM, so the portal can render the
- * modal in it. Also calls the openFirstModal when this is the first modal to be
- * opened.
- */
- componentDidMount() {
+let openModalCount = 0;
+
+export default function Modal( {
+ bodyOpenClassName = 'modal-open',
+ role = 'dialog',
+ title = null,
+ focusOnMount = true,
+ shouldCloseOnEsc = true,
+ shouldCloseOnClickOutside = true,
+ isDismissable, // Deprecated
+ isDismissible = isDismissable || true,
+ /* accessibility */
+ aria = {
+ labelledby: null,
+ describedby: null,
+ },
+ onRequestClose,
+ icon,
+ closeButtonLabel,
+ children,
+ style,
+ overlayClassName,
+ className,
+ contentLabel,
+} ) {
+ const ref = useRef();
+ const instanceId = useInstanceId( Modal );
+ const headingId = title
+ ? `components-modal-header-${ instanceId }`
+ : aria.labelledby;
+ const focusOnMountRef = useFocusOnMount( focusOnMount );
+ const constrainedTabbingRef = useConstrainedTabbing();
+ const focusReturnRef = useFocusReturn();
+ const focusOutsideProps = useFocusOutside( onRequestClose );
+
+ useEffect( () => {
openModalCount++;
if ( openModalCount === 1 ) {
- this.openFirstModal();
+ ariaHelper.hideApp( ref.current );
+ document.body.classList.add( bodyOpenClassName );
}
- }
-
- /**
- * Removes the modal's node from the DOM. Also calls closeLastModal when this is
- * the last modal to be closed.
- */
- componentWillUnmount() {
- openModalCount--;
- if ( openModalCount === 0 ) {
- this.closeLastModal();
- }
-
- this.cleanDOM();
+ return () => {
+ openModalCount--;
+
+ if ( openModalCount === 0 ) {
+ document.body.classList.remove( bodyOpenClassName );
+ ariaHelper.showApp();
+ }
+ };
+ }, [] );
+
+ if ( isDismissable ) {
+ deprecated( 'isDismissable prop of the Modal component', {
+ since: '5.4',
+ alternative: 'isDismissible prop (renamed) of the Modal component',
+ } );
}
- /**
- * Prepares the DOM for the modals to be rendered.
- *
- * Every modal is mounted in a separate div appended to a parent div
- * that is appended to the document body.
- *
- * The parent div will be created if it does not yet exist, and the
- * separate div for this specific modal will be appended to that.
- */
- prepareDOM() {
- if ( ! parentElement ) {
- parentElement = document.createElement( 'div' );
- document.body.appendChild( parentElement );
+ function handleEscapeKeyDown( event ) {
+ if (
+ shouldCloseOnEsc &&
+ event.keyCode === ESCAPE &&
+ ! event.defaultPrevented
+ ) {
+ event.preventDefault();
+ if ( onRequestClose ) {
+ onRequestClose( event );
+ }
}
- this.node = document.createElement( 'div' );
- parentElement.appendChild( this.node );
- }
-
- /**
- * Removes the specific mounting point for this modal from the DOM.
- */
- cleanDOM() {
- parentElement.removeChild( this.node );
- }
-
- /**
- * Prepares the DOM for this modal and any additional modal to be mounted.
- *
- * It appends an additional div to the body for the modals to be rendered in,
- * it hides any other elements from screen-readers and adds an additional class
- * to the body to prevent scrolling while the modal is open.
- */
- openFirstModal() {
- ariaHelper.hideApp( parentElement );
- document.body.classList.add( this.props.bodyOpenClassName );
- }
-
- /**
- * Cleans up the DOM after the last modal is closed and makes the app available
- * for screen-readers again.
- */
- closeLastModal() {
- document.body.classList.remove( this.props.bodyOpenClassName );
- ariaHelper.showApp();
}
- /**
- * Renders the modal.
- *
- * @return {WPElement} The modal element.
- */
- render() {
- const {
- onRequestClose,
- title,
- icon,
- closeButtonLabel,
- children,
- aria,
- instanceId,
- isDismissible,
- isDismissable, //Deprecated
- // Many of the documented props for Modal are passed straight through
- // to the ModalFrame component and handled there.
- ...otherProps
- } = this.props;
-
- const headingId = title
- ? `components-modal-header-${ instanceId }`
- : aria.labelledby;
-
- if ( isDismissable ) {
- deprecated( 'isDismissable prop of the Modal component', {
- since: '5.4',
- alternative:
- 'isDismissible prop (renamed) of the Modal component',
- } );
- }
- // Disable reason: this stops mouse events from triggering tooltips and
- // other elements underneath the modal overlay.
- return createPortal(
-
+