diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md index df6b305f35983e..9afcc3e46ca1bd 100644 --- a/docs/contributors/code/getting-started-with-code-contribution.md +++ b/docs/contributors/code/getting-started-with-code-contribution.md @@ -104,7 +104,9 @@ You can access the Dashboard at: `http://localhost:8888/wp-admin/` using **Usern #### Accessing the MySQL Database -To access the MySQL database on the `wp-env` instance you will first need the connection details. To do this: +phpMyAdmin is available by default for the Gutenberg project. You can access the MySQL Database at: `http://localhost:9000/`. + +If you want to access the database through another tool, you will first need the connection details. To do this: 1. In a terminal, navigate to your local Gutenberg repo. 2. Run `npm run wp-env start` - various information about the `wp-env` environment should be logged into the terminal. diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index af679edb910642..6f7e3f2f13c309 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -25,7 +25,6 @@ $z-layers: ( ".components-popover__close": 5, ".block-editor-block-list__insertion-point": 6, ".block-editor-warning": 5, - ".block-library-gallery-item__inline-menu": 20, ".block-editor-url-input__suggestions": 30, ".edit-post-layout__footer": 30, ".interface-interface-skeleton__header": 30, diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js index 42a8597227dee9..17f65d58b8f74b 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js @@ -2,11 +2,11 @@ * WordPress dependencies */ import { - PanelBody, __experimentalUseSlotFills as useSlotFills, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; -import { useLayoutEffect, useState } from '@wordpress/element'; +import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; /** @@ -15,40 +15,75 @@ import { __ } from '@wordpress/i18n'; import InspectorControlsGroups from '../inspector-controls/groups'; import { default as InspectorControls } from '../inspector-controls'; import { store as blockEditorStore } from '../../store'; +import { useToolsPanelDropdownMenuProps } from '../global-styles/utils'; +import { cleanEmptyObject } from '../../hooks/utils'; const PositionControlsPanel = () => { - const [ initialOpen, setInitialOpen ] = useState(); + const { selectedClientIds, selectedBlocks, hasPositionAttribute } = + useSelect( ( select ) => { + const { getBlocksByClientId, getSelectedBlockClientIds } = + select( blockEditorStore ); - // Determine whether the panel should be expanded. - const { multiSelectedBlocks } = useSelect( ( select ) => { - const { getBlocksByClientId, getSelectedBlockClientIds } = - select( blockEditorStore ); - const clientIds = getSelectedBlockClientIds(); - return { - multiSelectedBlocks: getBlocksByClientId( clientIds ), - }; - }, [] ); + const selectedBlockClientIds = getSelectedBlockClientIds(); + const _selectedBlocks = getBlocksByClientId( + selectedBlockClientIds + ); - useLayoutEffect( () => { - // If any selected block has a position set, open the panel by default. - // The first block's value will still be used within the control though. - if ( initialOpen === undefined ) { - setInitialOpen( - multiSelectedBlocks.some( + return { + selectedClientIds: selectedBlockClientIds, + selectedBlocks: _selectedBlocks, + hasPositionAttribute: _selectedBlocks?.some( ( { attributes } ) => !! attributes?.style?.position?.type - ) - ); + ), + }; + }, [] ); + + const { updateBlockAttributes } = useDispatch( blockEditorStore ); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + + function resetPosition() { + if ( ! selectedClientIds?.length || ! selectedBlocks?.length ) { + return; } - }, [ initialOpen, multiSelectedBlocks, setInitialOpen ] ); + + const attributesByClientId = Object.fromEntries( + selectedBlocks?.map( ( { clientId, attributes } ) => [ + clientId, + { + style: cleanEmptyObject( { + ...attributes?.style, + position: { + ...attributes?.style?.position, + type: undefined, + top: undefined, + right: undefined, + bottom: undefined, + left: undefined, + }, + } ), + }, + ] ) + ); + + updateBlockAttributes( selectedClientIds, attributesByClientId, true ); + } return ( - - - + hasPositionAttribute } + onDeselect={ resetPosition } + > + + + ); }; diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index d204d0347d8eb4..62c0eff788746d 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -117,10 +117,6 @@ opacity: 0.3; } - .is-selected .block-library-gallery-item__inline-menu { - display: inline-flex; - } - .block-editor-media-placeholder { margin: 0; height: 100%; @@ -131,58 +127,6 @@ } } -.block-library-gallery-item__inline-menu { - display: none; - position: absolute; - top: -2px; - margin: $grid-unit-10; - z-index: z-index(".block-library-gallery-item__inline-menu"); - border-radius: $radius-small; - background: $white; - border: $border-width solid $gray-900; - - @media not (prefers-reduced-motion) { - transition: box-shadow 0.2s ease-out; - } - - &:hover { - box-shadow: $elevation-x-small; - } - - @include break-small() { - // Use smaller buttons to fit when there are many columns. - .columns-7 &, - .columns-8 & { - padding: $grid-unit-05 * 0.5; - } - } - - .components-button.has-icon { - &:not(:focus) { - border: none; - box-shadow: none; - } - - @include break-small() { - // Use smaller buttons to fit when there are many columns. - .columns-7 &, - .columns-8 & { - padding: 0; - width: inherit; - height: inherit; - } - } - } - - &.is-left { - left: -2px; - } - - &.is-right { - right: -2px; - } -} - .wp-block-gallery ul.blocks-gallery-grid { padding: 0; // Some themes give all