+
+
`;
diff --git a/packages/block-editor/src/components/block-alignment-control/test/index.js b/packages/block-editor/src/components/block-alignment-control/test/index.js
index 193279c27ae83..fd9f0f782e25d 100644
--- a/packages/block-editor/src/components/block-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-alignment-control/test/index.js
@@ -1,61 +1,125 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* Internal dependencies
*/
import BlockAlignmentUI from '../ui';
-jest.mock( '@wordpress/data/src/components/use-select', () => {
- // This allows us to tweak the returned value on each test.
- const mock = jest.fn();
- return mock;
-} );
-useSelect.mockImplementation( () => ( { wideControlsEnabled: false } ) );
-
describe( 'BlockAlignmentUI', () => {
const alignment = 'left';
const onChange = jest.fn();
- const wrapper = shallow(
-
+
`;
diff --git a/packages/block-editor/src/components/block-compare/test/block-view.js b/packages/block-editor/src/components/block-compare/test/block-view.js
index 04b3f34ffd1fe..3edd3b6cddad2 100644
--- a/packages/block-editor/src/components/block-compare/test/block-view.js
+++ b/packages/block-editor/src/components/block-compare/test/block-view.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
/**
* Internal dependencies
@@ -12,7 +12,7 @@ const noop = () => {};
describe( 'BlockView', () => {
test( 'should match snapshot', () => {
- const wrapper = shallow(
+ const { container } = render(
{
/>
);
- expect( wrapper ).toMatchSnapshot();
+ expect( container ).toMatchSnapshot();
} );
} );
diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js
index 034c7ddd7f254..98929b64e4565 100644
--- a/packages/block-editor/src/components/block-content-overlay/index.js
+++ b/packages/block-editor/src/components/block-content-overlay/index.js
@@ -11,14 +11,10 @@ import { store as blockEditorStore } from '../../store';
export default function useBlockOverlayActive( clientId ) {
return useSelect(
( select ) => {
- const { isBlockSelected, hasSelectedInnerBlock, canEditBlock } =
+ const { __unstableHasActiveBlockOverlayActive } =
select( blockEditorStore );
- return (
- ! canEditBlock( clientId ) ||
- ( ! isBlockSelected( clientId ) &&
- ! hasSelectedInnerBlock( clientId, true ) )
- );
+ return __unstableHasActiveBlockOverlayActive( clientId );
},
[ clientId ]
);
diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss
index cba4b603d0bcf..7795bef2525f0 100644
--- a/packages/block-editor/src/components/block-content-overlay/style.scss
+++ b/packages/block-editor/src/components/block-content-overlay/style.scss
@@ -1,4 +1,6 @@
-.block-editor-block-content-overlay {
+.block-editor-block-list__block.has-block-overlay {
+ cursor: default;
+
&::before {
content: "";
position: absolute;
@@ -9,11 +11,30 @@
background: transparent;
border: none;
border-radius: $radius-block-ui;
- z-index: z-index(".block-editor-block-content-overlay__overlay");
+ z-index: z-index(".block-editor-block-list__block.has-block-overlay");
+ }
+
+ &::after {
+ content: none !important;
}
&:hover:not(.is-dragging-blocks)::before {
- background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+ background: rgba(var(--wp-admin-theme-color--rgb), 0.3);
+ box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
+ }
+
+ &.is-selected:not(.is-dragging-blocks)::before {
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
}
+
+ .block-editor-block-list__block {
+ pointer-events: none;
+ }
+
+ .block-editor-iframe__body.is-zoomed-out &::before {
+ // Unfortunately because of the vw unit, this is not always going to be exact
+ // When the scrollbar is visible, the frame exceeds the canvas by a few pixels.
+ width: calc(100vw);
+ left: calc(( 100% - 100vw ) / 2);
+ }
}
diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
index 5ba2b4b46da3a..f5d8cf5eddc91 100644
--- a/packages/block-editor/src/components/block-draggable/draggable-chip.js
+++ b/packages/block-editor/src/components/block-draggable/draggable-chip.js
@@ -13,7 +13,10 @@ import BlockIcon from '../block-icon';
export default function BlockDraggableChip( { count, icon } ) {
return (
-
- - title -
- raw
+
+ title +
+
+ raw
+
+
+
+ render
+
+
-
- render
-
+
-
- action
-
-
-
+
{
const generatedClassName = hasBlockSupport( blockType, 'className', true )
? getBlockDefaultClassName( name )
: null;
- const className = classnames( generatedClassName, attributes.className );
+ const className = classnames(
+ generatedClassName,
+ attributes.className,
+ props.className
+ );
return (
);
- expect( wrapper.html() ).toBe( 'Ok' );
+ expect( container ).toHaveTextContent( 'Ok' );
} );
describe( 'light wrapper', () => {
@@ -113,13 +115,13 @@ describe( 'Edit', () => {
save: noop,
} );
- const wrapper = mount(
+ const { container } = render(
);
- expect( wrapper.html() ).toBe( 'Ok' );
+ expect( container ).toHaveTextContent( 'Ok' );
} );
} );
} );
diff --git a/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap
new file mode 100644
index 0000000000000..977b1d1a5f6c8
--- /dev/null
+++ b/packages/block-editor/src/components/block-icon/test/__snapshots__/index.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockIcon renders a Icon 1`] = `
+ &,
+ .is-layout-flow.block-editor-block-list__block:not(.is-selected) > & {
+ pointer-events: none;
+
+ &::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ pointer-events: none;
+ @include placeholder-style();
+ }
+
+ .block-editor-inserter {
+ visibility: hidden;
+ }
+ }
+}
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 172121132b243..7db5f3ee20eb6 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -29,15 +29,12 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
+ gap: calc(4px * 1);
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
-.emotion-4>*+*:not( marquee ) {
- margin-top: calc(4px * 1);
-}
-
.emotion-4>* {
min-height: 0;
}
@@ -64,15 +61,12 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
+ gap: calc(4px * 3);
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
-.emotion-8>*+*:not( marquee ) {
- margin-top: calc(4px * 3);
-}
-
.emotion-8>* {
min-height: 0;
}
@@ -89,16 +83,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
+ gap: calc(4px * 2);
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
}
-.emotion-10>*+*:not( marquee ) {
- margin-left: calc(4px * 2);
-}
-
.emotion-10>* {
min-width: 0;
}
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 241da40d5aa3a..34e4f334e3c58 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -92,6 +92,7 @@ function ColorGradientControlInner( {
),
[ TAB_GRADIENT.value ]: (
{
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
- test( 'should render null when the colors meet AA WCAG guidelines.', () => {
- const wrapper = mount(
+ test( 'should render nothing when the colors meet AA WCAG guidelines.', () => {
+ const { container } = render(
{
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
test( 'should render component when the text and background colors do not meet AA WCAG guidelines.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
- );
+
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+ )
+ ).toBeVisible();
} );
test( 'should render component when the link and background colors do not meet AA WCAG guidelines.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
- );
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
+ )
+ ).toBeVisible();
} );
test( 'should render component when the link and text and background colors do not meet AA WCAG guidelines.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
- );
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+ )
+ ).toBeVisible();
} );
- test( 'should render render null if background color contains a transparency', () => {
- const wrapper = mount(
+ test( 'should render nothing if background color contains a transparency', () => {
+ const { container } = render(
{
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
- test( 'should render render null if text color contains a transparency', () => {
- const wrapper = mount(
+ test( 'should render nothing if text color contains a transparency', () => {
+ const { container } = render(
{
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
- test( 'should render render null if link color contains a transparency', () => {
- const wrapper = mount(
+ test( 'should render nothing if link color contains a transparency', () => {
+ const { container } = render(
{
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
test( 'should render different message matching snapshot when background color has less brightness than text color.', () => {
const darkerShade = '#555';
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
- );
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.'
+ )
+ ).toBeVisible();
} );
test( 'should take into consideration wherever text is large or not', () => {
- const wrapperSmallText = mount(
+ const { container, rerender } = render(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapperSmallText.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
- );
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+ )
+ ).toBeVisible();
- const wrapperLargeText = mount(
+ rerender(
{
/>
);
- expect( wrapperLargeText.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
test( 'should take into consideration the font size passed', () => {
- const wrapperSmallFontSize = mount(
+ const { container, rerender } = render(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapperSmallFontSize.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
- );
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+ )
+ ).toBeVisible();
- const wrapperLargeText = mount(
+ rerender(
{
/>
);
- expect( wrapperLargeText.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
test( 'should use isLargeText to make decisions if both isLargeText and fontSize props are passed', () => {
- const wrapper = mount(
+ const { container, rerender } = render(
{
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
- const wrapperNoLargeText = mount(
+ rerender(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapperNoLargeText.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
- );
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+ )
+ ).toBeVisible();
} );
- test( 'should render null when the colors meet AA WCAG guidelines, with only fallback colors.', () => {
- const wrapper = mount(
+ test( 'should render nothing when the colors meet AA WCAG guidelines, with only fallback colors.', () => {
+ const { container } = render(
{
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
test( 'should render messages when the textColor is valid, but the fallback backgroundColor conflicts.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
- );
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.'
+ )
+ ).toBeVisible();
} );
test( 'should render messages when the linkColor is valid, but the fallback backgroundColor conflicts.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
- );
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
+ )
+ ).toBeVisible();
} );
test( 'should re-announce if colors change, but still insufficient contrast', () => {
- const appRoot = document.createElement( 'div' );
-
- act( () => {
- render(
- {
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
test( 'should render component when the colors meet AA WCAG guidelines but the text color only has alpha transparency with alpha checker enabled.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'Transparent text may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'Transparent text may be hard for people to read.'
- );
+ expect(
+ screen.getByText(
+ 'Transparent text may be hard for people to read.'
+ )
+ ).toBeVisible();
} );
test( 'should render component when the colors meet AA WCAG guidelines but the link color only has alpha transparency with alpha checker enabled.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'Transparent text may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'Transparent text may be hard for people to read.'
- );
+ expect(
+ screen.getByText(
+ 'Transparent text may be hard for people to read.'
+ )
+ ).toBeVisible();
} );
- test( 'should render null when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
- const wrapper = mount(
+ test( 'should render nothing when the colors meet AA WCAG guidelines but the background color only has alpha transparency with alpha checker enabled.', () => {
+ const { container } = render(
{
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
- test( 'should render null if background color contains a transparency with alpha checker enabled.', () => {
- const wrapper = mount(
+ test( 'should render nothing if background color contains a transparency with alpha checker enabled.', () => {
+ const { container } = render(
{
);
expect( speak ).not.toHaveBeenCalled();
- expect( wrapper.html() ).toBeNull();
+ expect( container ).toBeEmptyDOMElement();
} );
test( 'should render transparency warning only if one text is not readable but the other is transparent and the background color contains a transparency with alpha checker enabled.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'Transparent text may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'Transparent text may be hard for people to read.'
- );
+ expect(
+ screen.getByText(
+ 'Transparent text may be hard for people to read.'
+ )
+ ).toBeVisible();
} );
test( 'should render component and prioritize contrast warning when the colors do no meet AA WCAG guidelines and text has alpha transparency with the alpha checker enabled.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'This color combination may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
- );
+ expect(
+ screen.getByText(
+ 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker link color.'
+ )
+ ).toBeVisible();
} );
test( 'should render component when the colors meet AA WCAG guidelines but all colors have alpha transparency with alpha checker enabled.', () => {
- const wrapper = mount(
+ render(
{
expect( speak ).toHaveBeenCalledWith(
'Transparent text may be hard for people to read.'
);
- expect( wrapper.find( Notice ).children().text() ).toBe(
- 'Transparent text may be hard for people to read.'
- );
+ expect(
+ screen.getByText(
+ 'Transparent text may be hard for people to read.'
+ )
+ ).toBeVisible();
} );
} );
diff --git a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
index 344bb95ea044b..3a0a98578a2a5 100644
--- a/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -1,73 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DefaultBlockAppender should append a default block when input focused 1`] = `
- {
@@ -79,3 +80,11 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
- Type: `Boolean`
- Required: no
- Default: `false`
+
+### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
+- Type: `Boolean`
+- Required: no
+- Default: `false`
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 84abe873ce9a1..29fe41f891636 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -14,7 +14,11 @@ import {
useReducer,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import {
+ useResizeObserver,
+ useMergeRefs,
+ useRefEffect,
+} from '@wordpress/compose';
import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
/**
@@ -184,7 +188,7 @@ async function loadScript( head, { id, src } ) {
}
function Iframe(
- { contentRef, children, head, tabIndex = 0, assets, ...props },
+ { contentRef, children, head, tabIndex = 0, assets, isZoomedOut, ...props },
ref
) {
const [ , forceRender ] = useReducer( () => ( {} ) );
@@ -194,10 +198,18 @@ function Iframe(
const scripts = useParsedAssets( assets?.scripts );
const clearerRef = useBlockSelectionClearer();
const [ before, writingFlowRef, after ] = useWritingFlow();
+ const [ contentResizeListener, { height: contentHeight } ] =
+ useResizeObserver();
const setRef = useRefEffect( ( node ) => {
+ let iFrameDocument;
+ // Prevent the default browser action for files dropped outside of dropzones.
+ function preventFileDropDefault( event ) {
+ event.preventDefault();
+ }
function setDocumentIfReady() {
const { contentDocument, ownerDocument } = node;
const { readyState, documentElement } = contentDocument;
+ iFrameDocument = contentDocument;
if ( readyState !== 'interactive' && readyState !== 'complete' ) {
return false;
@@ -223,14 +235,35 @@ function Iframe(
documentElement.removeChild( contentDocument.head );
documentElement.removeChild( contentDocument.body );
+ iFrameDocument.addEventListener(
+ 'dragover',
+ preventFileDropDefault,
+ false
+ );
+ iFrameDocument.addEventListener(
+ 'drop',
+ preventFileDropDefault,
+ false
+ );
return true;
}
// Document set with srcDoc is not immediately ready.
node.addEventListener( 'load', setDocumentIfReady );
- return () => node.removeEventListener( 'load', setDocumentIfReady );
+ return () => {
+ node.removeEventListener( 'load', setDocumentIfReady );
+ iFrameDocument?.removeEventListener(
+ 'dragover',
+ preventFileDropDefault
+ );
+ iFrameDocument?.removeEventListener(
+ 'drop',
+ preventFileDropDefault
+ );
+ };
}, [] );
+
const headRef = useRefEffect( ( element ) => {
scripts
.reduce(
@@ -285,14 +318,40 @@ function Iframe(
{ iframeDocument &&
createPortal(
<>
- { head }
+
+ { head }
+
+
+ { contentResizeListener }
{ /*
* This is a wrapper for the extra styles and scripts
* rendered imperatively by cloning the parent,
diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 029d6cf1dad94..73cc5bef95db8 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -125,11 +125,12 @@ Template locking of `InnerBlocks` is similar to [Custom Post Type templates lock
Template locking allows locking the `InnerBlocks` area for the current template.
_Options:_
+- `noContent` — prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overrideable by children.
- `'all'` — prevents all operations. It is not possible to insert new blocks. Move existing blocks or delete them.
- `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
- `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )
-If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used.
+If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used. Note that `noContent` can't be overriden: it's present, the `templateLock` value of any children is ignored.
If the block is a top level block: the locking of the Custom Post Type is used.
diff --git a/packages/block-editor/src/components/inner-blocks/default-block-appender.js b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
index b6fc392cdcaef..d2e137004d83b 100644
--- a/packages/block-editor/src/components/inner-blocks/default-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { last } from 'lodash';
-
/**
* WordPress dependencies
*/
@@ -28,7 +23,7 @@ export default compose( [
const blockClientIds = getBlockOrder( clientId );
return {
- lastBlockClientId: last( blockClientIds ),
+ lastBlockClientId: blockClientIds[ blockClientIds.length - 1 ],
};
} ),
] )( DefaultBlockAppender );
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 8a75060b434b6..a0d5c89cec99e 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -155,10 +155,11 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
getBlockName,
isBlockSelected,
hasSelectedInnerBlock,
- isNavigationMode,
+ __unstableGetEditorMode,
} = select( blockEditorStore );
const blockName = getBlockName( clientId );
- const enableClickThrough = isNavigationMode() || isSmallScreen;
+ const enableClickThrough =
+ __unstableGetEditorMode() === 'navigation' || isSmallScreen;
return {
__experimentalCaptureToolbars: select(
blocksStore
diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
index 27bfec37adaf5..2b5ffe01aaf08 100644
--- a/packages/block-editor/src/components/inner-blocks/index.native.js
+++ b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -21,6 +21,7 @@ import getBlockContext from './get-block-context';
* Internal dependencies
*/
import BlockList from '../block-list';
+import BlockListCompact from '../block-list/block-list-compact';
import { useBlockEditContext } from '../block-edit/context';
import useBlockSync from '../provider/use-block-sync';
import { BlockContextProvider } from '../block-context';
@@ -96,6 +97,7 @@ function UncontrolledInnerBlocks( props ) {
blockWidth,
__experimentalLayout: layout = defaultLayout,
gridProperties,
+ useCompactList,
} = props;
const block = useSelect(
@@ -112,8 +114,10 @@ function UncontrolledInnerBlocks( props ) {
templateInsertUpdatesSelection
);
+ const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
+
let blockList = (
- {
- // Only synchronize innerBlocks with template if innerBlocks are empty or
- // a locking all exists directly on the block.
- if ( innerBlocks.length === 0 || templateLock === 'all' ) {
+ // Only synchronize innerBlocks with template if innerBlocks are empty
+ // or a locking "all" or "noContent" exists directly on the block.
+ if (
+ innerBlocks.length === 0 ||
+ templateLock === 'all' ||
+ templateLock === 'noContent'
+ ) {
const hasTemplateChanged = ! isEqual(
template,
existingTemplate.current
diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
index d0bf71d1e72d2..c8e2e3443ae15 100644
--- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
+++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
@@ -69,7 +69,9 @@ export default function useNestedSettingsUpdate(
const newSettings = {
allowedBlocks: _allowedBlocks,
templateLock:
- templateLock === undefined ? parentLock : templateLock,
+ templateLock === undefined || parentLock === 'noContent'
+ ? parentLock
+ : templateLock,
};
// These values are not defined for RN, so only include them if they
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
index 08ba4e209955e..17183d13a8709 100644
--- a/packages/block-editor/src/components/inserter/index.js
+++ b/packages/block-editor/src/components/inserter/index.js
@@ -168,6 +168,7 @@ class Inserter extends Component {
clientId={ clientId }
isAppender={ isAppender }
showInserterHelpPanel={ showInserterHelpPanel }
+ prioritizePatterns={ prioritizePatterns }
/>
);
}
@@ -212,8 +213,6 @@ export default compose( [
hasInserterItems,
__experimentalGetAllowedBlocks,
__experimentalGetDirectInsertBlock,
- getBlockIndex,
- getBlockCount,
getSettings,
} = select( blockEditorStore );
@@ -227,8 +226,6 @@ export default compose( [
const directInsertBlock =
__experimentalGetDirectInsertBlock( rootClientId );
- const index = getBlockIndex( clientId );
- const blockCount = getBlockCount();
const settings = getSettings();
const hasSingleBlockType =
@@ -249,10 +246,7 @@ export default compose( [
directInsertBlock,
rootClientId,
prioritizePatterns:
- settings.__experimentalPreferPatternsOnRoot &&
- ! rootClientId &&
- index > 0 &&
- ( index < blockCount || blockCount === 0 ),
+ settings.__experimentalPreferPatternsOnRoot && ! rootClientId,
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index aba22e3e1f3fb..23dfdb7fd7dc6 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -26,13 +26,18 @@ function InserterLibrary(
},
ref
) {
- const destinationRootClientId = useSelect(
+ const { destinationRootClientId, prioritizePatterns } = useSelect(
( select ) => {
- const { getBlockRootClientId } = select( blockEditorStore );
+ const { getBlockRootClientId, getSettings } =
+ select( blockEditorStore );
- return (
- rootClientId || getBlockRootClientId( clientId ) || undefined
- );
+ const _rootClientId =
+ rootClientId || getBlockRootClientId( clientId ) || undefined;
+ return {
+ destinationRootClientId: _rootClientId,
+ prioritizePatterns:
+ getSettings().__experimentalPreferPatternsOnRoot,
+ };
},
[ clientId, rootClientId ]
);
@@ -48,6 +53,7 @@ function InserterLibrary(
__experimentalInsertionIndex={ __experimentalInsertionIndex }
__experimentalFilterValue={ __experimentalFilterValue }
shouldFocusBlock={ shouldFocusBlock }
+ prioritizePatterns={ prioritizePatterns }
ref={ ref }
/>
);
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 5c33cf5dd4604..5a10d07dd1caa 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
@@ -37,6 +42,7 @@ function InserterMenu(
showMostUsedBlocks,
__experimentalFilterValue = '',
shouldFocusBlock = true,
+ prioritizePatterns,
},
ref
) {
@@ -180,23 +186,28 @@ function InserterMenu(
},
} ) );
+ const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks );
+
return (
+
+
+`;
diff --git a/packages/block-editor/src/components/block-icon/test/index.js b/packages/block-editor/src/components/block-icon/test/index.js
index 83774a63dbc03..28d82660c54df 100644
--- a/packages/block-editor/src/components/block-icon/test/index.js
+++ b/packages/block-editor/src/components/block-icon/test/index.js
@@ -1,12 +1,11 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
/**
* WordPress dependencies
*/
-import { Icon } from '@wordpress/components';
import { image } from '@wordpress/icons';
/**
@@ -16,42 +15,58 @@ import BlockIcon from '../';
describe( 'BlockIcon', () => {
it( 'renders a Icon', () => {
- const wrapper = shallow(
+
+
+
+ );
+}
const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
const {
count,
- hasBlockStyles,
selectedBlockName,
selectedBlockClientId,
blockType,
+ topLevelLockedBlock,
} = useSelect( ( select ) => {
const {
getSelectedBlockClientId,
getSelectedBlockCount,
getBlockName,
+ __unstableGetContentLockingParent,
+ getTemplateLock,
} = select( blockEditorStore );
- const { getBlockStyles } = select( blocksStore );
const _selectedBlockClientId = getSelectedBlockClientId();
const _selectedBlockName =
_selectedBlockClientId && getBlockName( _selectedBlockClientId );
const _blockType =
_selectedBlockName && getBlockType( _selectedBlockName );
- const blockStyles =
- _selectedBlockName && getBlockStyles( _selectedBlockName );
return {
count: getSelectedBlockCount(),
selectedBlockClientId: _selectedBlockClientId,
selectedBlockName: _selectedBlockName,
blockType: _blockType,
- hasBlockStyles: blockStyles && blockStyles.length > 0,
+ topLevelLockedBlock:
+ getTemplateLock( _selectedBlockClientId ) === 'noContent'
+ ? _selectedBlockClientId
+ : __unstableGetContentLockingParent(
+ _selectedBlockClientId
+ ),
};
}, [] );
@@ -109,20 +213,30 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
}
return null;
}
+ if ( topLevelLockedBlock ) {
+ return (
+ + { __( 'Content' ) } +
+ { contentBlocks.map( ( contentBlock ) => ( +
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index 393121ce4d8bd..b7cfdcf46333a 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -1,5 +1,5 @@
.block-editor-block-inspector {
- p {
+ p:not(.components-base-control__help) {
margin-top: 0;
}
@@ -34,3 +34,9 @@
padding: ($grid-unit-20 * 2) $grid-unit-20;
text-align: center;
}
+
+
+.block-editor-block-inspector__block-buttons-container {
+ border-top: $border-width solid $gray-200;
+ padding: $grid-unit-20;
+}
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index e671d59401d03..cb20d64cf80dc 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
import { getDefaultBlockName } from '@wordpress/blocks';
/**
@@ -18,14 +18,35 @@ import { store as blockEditorStore } from '../../store';
function BlockListAppender( {
rootClientId,
- canInsertDefaultBlock,
- isLocked,
renderAppender: CustomAppender,
className,
- selectedBlockClientId,
tagName: TagName = 'div',
} ) {
- if ( isLocked || CustomAppender === false ) {
+ const { hideInserter, canInsertDefaultBlock, selectedBlockClientId } =
+ useSelect(
+ ( select ) => {
+ const {
+ canInsertBlockType,
+ getTemplateLock,
+ getSelectedBlockClientId,
+ __unstableGetEditorMode,
+ } = select( blockEditorStore );
+
+ return {
+ hideInserter:
+ !! getTemplateLock( rootClientId ) ||
+ __unstableGetEditorMode() === 'zoom-out',
+ canInsertDefaultBlock: canInsertBlockType(
+ getDefaultBlockName(),
+ rootClientId
+ ),
+ selectedBlockClientId: getSelectedBlockClientId(),
+ };
+ },
+ [ rootClientId ]
+ );
+
+ if ( hideInserter || CustomAppender === false ) {
return null;
}
@@ -92,16 +113,4 @@ function BlockListAppender( {
);
}
-export default withSelect( ( select, { rootClientId } ) => {
- const { canInsertBlockType, getTemplateLock, getSelectedBlockClientId } =
- select( blockEditorStore );
-
- return {
- isLocked: !! getTemplateLock( rootClientId ),
- canInsertDefaultBlock: canInsertBlockType(
- getDefaultBlockName(),
- rootClientId
- ),
- selectedBlockClientId: getSelectedBlockClientId(),
- };
-} )( BlockListAppender );
+export default BlockListAppender;
diff --git a/packages/block-editor/src/components/block-list-appender/index.native.js b/packages/block-editor/src/components/block-list-appender/index.native.js
index 18b46d04e817e..913bfb01732dd 100644
--- a/packages/block-editor/src/components/block-list-appender/index.native.js
+++ b/packages/block-editor/src/components/block-list-appender/index.native.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { last } from 'lodash';
-
/**
* WordPress dependencies
*/
@@ -36,7 +31,9 @@ function BlockListAppender( {
return (
0 ? '' : null }
showSeparator={ showSeparator }
diff --git a/packages/block-editor/src/components/block-list/block-list-compact.native.js b/packages/block-editor/src/components/block-list/block-list-compact.native.js
new file mode 100644
index 0000000000000..1b2740d5bd45d
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/block-list-compact.native.js
@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import BlockListBlock from './block';
+
+/**
+ * NOTE: This is a component currently used by the List block (V2)
+ * It only passes the needed props for this block, if other blocks will use it
+ * make sure you pass other props that might be required coming from:
+ * components/inner-blocks/index.native.js
+ */
+
+function BlockListCompact( props ) {
+ const {
+ marginHorizontal = styles.defaultBlock.marginLeft,
+ marginVertical = styles.defaultBlock.marginTop,
+ rootClientId,
+ } = props;
+ const { blockClientIds } = useSelect(
+ ( select ) => {
+ const { getBlockOrder } = select( blockEditorStore );
+ const blockOrder = getBlockOrder( rootClientId );
+
+ return {
+ blockClientIds: blockOrder,
+ };
+ },
+ [ rootClientId ]
+ );
+
+ const containerStyle = {
+ marginVertical: -marginVertical,
+ marginHorizontal: -marginHorizontal,
+ };
+
+ return (
+
+ { blockClientIds.map( ( currentClientId ) => (
+
+ );
+}
+
+export default BlockListCompact;
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 1516dbf8bd63a..a554069d97bb6 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -2,7 +2,6 @@
* External dependencies
*/
import classnames from 'classnames';
-import { omit } from 'lodash';
/**
* WordPress dependencies
@@ -19,6 +18,7 @@ import {
isUnmodifiedDefaultBlock,
serializeRawBlock,
switchToBlockType,
+ store as blocksStore,
} from '@wordpress/blocks';
import { withFilters } from '@wordpress/components';
import {
@@ -94,10 +94,38 @@ function BlockListBlock( {
onMerge,
toggleSelection,
} ) {
- const themeSupportsLayout = useSelect( ( select ) => {
- const { getSettings } = select( blockEditorStore );
- return getSettings().supportsLayout;
- }, [] );
+ const {
+ themeSupportsLayout,
+ hasContentLockedParent,
+ isContentBlock,
+ isContentLocking,
+ isTemporarilyEditingAsBlocks,
+ } = useSelect(
+ ( select ) => {
+ const {
+ getSettings,
+ __unstableGetContentLockingParent,
+ getTemplateLock,
+ __unstableGetTemporarilyEditingAsBlocks,
+ } = select( blockEditorStore );
+ const _hasContentLockedParent =
+ !! __unstableGetContentLockingParent( clientId );
+ return {
+ themeSupportsLayout: getSettings().supportsLayout,
+ isContentBlock:
+ select( blocksStore ).__experimentalHasContentRoleAttribute(
+ name
+ ),
+ hasContentLockedParent: _hasContentLockedParent,
+ isContentLocking:
+ getTemplateLock( clientId ) === 'noContent' &&
+ ! _hasContentLockedParent,
+ isTemporarilyEditingAsBlocks:
+ __unstableGetTemporarilyEditingAsBlocks() === clientId,
+ };
+ },
+ [ name, clientId ]
+ );
const { removeBlock } = useDispatch( blockEditorStore );
const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
@@ -123,6 +151,12 @@ function BlockListBlock( {
const blockType = getBlockType( name );
+ if ( hasContentLockedParent && ! isContentBlock ) {
+ wrapperProps = {
+ ...wrapperProps,
+ tabIndex: -1,
+ };
+ }
// Determine whether the block has props to apply to the wrapper.
if ( blockType?.getEditWrapperProps ) {
wrapperProps = mergeWrapperProps(
@@ -185,18 +219,24 @@ function BlockListBlock( {
block = { blockEdit } ;
}
+ const { 'data-align': dataAlign, ...restWrapperProps } = wrapperProps ?? {};
+
const value = {
clientId,
- className:
- wrapperProps?.[ 'data-align' ] && themeSupportsLayout
- ? classnames(
- className,
- `align${ wrapperProps[ 'data-align' ] }`
- )
- : className,
- wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
+ className: classnames(
+ {
+ 'is-content-locked': isContentLocking,
+ 'is-content-locked-temporarily-editing-as-blocks':
+ isTemporarilyEditingAsBlocks,
+ 'is-content-block': hasContentLockedParent && isContentBlock,
+ },
+ dataAlign && themeSupportsLayout && `align${ dataAlign }`,
+ className
+ ),
+ wrapperProps: restWrapperProps,
isAligned,
};
+
const memoizedValue = useMemo( () => value, Object.values( value ) );
return (
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index d853f2529e5ae..8157709b40b76 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -34,15 +34,15 @@ export const IntersectionObserver = createContext();
function Root( { className, ...settings } ) {
const [ element, setElement ] = useState();
const isLargeViewport = useViewportMatch( 'medium' );
- const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect(
+ const { isOutlineMode, isFocusMode, editorMode } = useSelect(
( select ) => {
- const { getSettings, isNavigationMode: _isNavigationMode } =
+ const { getSettings, __unstableGetEditorMode } =
select( blockEditorStore );
const { outlineMode, focusMode } = getSettings();
return {
isOutlineMode: outlineMode,
isFocusMode: focusMode,
- isNavigationMode: _isNavigationMode(),
+ editorMode: __unstableGetEditorMode(),
};
},
[]
@@ -74,7 +74,7 @@ function Root( { className, ...settings } ) {
className: classnames( 'is-root-container', className, {
'is-outline-mode': isOutlineMode,
'is-focus-mode': isFocusMode && isLargeViewport,
- 'is-navigate-mode': isNavigationMode,
+ 'is-navigate-mode': editorMode === 'navigation',
} ),
},
settings
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 616864b7b5a84..f368a8428ca94 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -4,10 +4,6 @@
margin: 0;
}
-/**
- * Notices & Block Selected/Hover Styles.
- */
-
/**
* Cross-Block Selection
*/
@@ -17,15 +13,8 @@
.block-editor-block-list__layout {
position: relative;
- // Select tool/navigation mode shows the default cursor until an additional click edits.
- &.is-navigate-mode {
- cursor: default;
- }
-
// The primary indicator of selection in text is the native selection marker.
// When selecting multiple blocks, we provide an additional selection indicator.
- &.is-navigate-mode .block-editor-block-list__block.is-selected,
- &.is-navigate-mode .block-editor-block-list__block.is-hovered,
.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
.block-editor-block-list__block.is-highlighted,
.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
@@ -54,17 +43,14 @@
}
// Provide exceptions for placeholders.
- .components-placeholder {
+ .components-placeholder,
+ .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
::selection {
background: transparent;
}
}
}
- &.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
- box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
- }
-
.block-editor-block-list__block.is-highlighted::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
outline: $border-width solid transparent;
@@ -104,8 +90,20 @@
border-color: var(--wp-admin-theme-color);
}
}
-}
+ // Ensure an accurate partial text selection.
+ // To do this, we disable text selection on the main container, then re-enable it only on the
+ // elements that actually get selected.
+ // To keep in mind: user-select is currently inherited to all nodes inside.
+ .has-multi-selection & {
+ user-select: none;
+ }
+
+ // Re-enable it on components inside.
+ [class^="components-"] {
+ user-select: text;
+ }
+}
.is-block-moving-mode.block-editor-block-list__block-selection-button {
// Should be invisible but not unfocusable.
@@ -115,9 +113,31 @@
padding: 0;
}
+.is-content-locked {
+ .block-editor-block-list__block {
+ pointer-events: none;
+ }
+ .is-content-block {
+ pointer-events: initial;
+ }
+}
+
.block-editor-block-list__layout .block-editor-block-list__block {
position: relative;
+ // Re-enable text-selection on editable blocks.
+ user-select: text;
+
+ // Hide the select style pseudo element as it interferes with the style.
+ &.is-partially-selected::after {
+ height: 0;
+ }
+
+ &.is-highlighted::after,
+ &.is-highlighted ~ .is-multi-selected::after {
+ height: auto;
+ }
+
// Break long strings of text without spaces so they don't overflow the block.
overflow-wrap: break-word;
@@ -192,7 +212,9 @@
bottom: 0;
left: 0;
border-radius: $radius-block-ui;
- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
+ box-shadow: 0 0 0 0 transparent;
+ transition: box-shadow 0.1s linear;
+ @include reduce-motion("transition");
}
// Warnings
@@ -308,6 +330,14 @@
}
}
+.is-focus-mode .block-editor-block-list__block.is-content-locked.has-child-selected,
+.is-focus-mode .block-editor-block-list__block.is-content-locked-temporarily-editing-as-blocks.has-child-selected {
+ &,
+ & .block-editor-block-list__block {
+ opacity: 1;
+ }
+}
+
.wp-block[data-align="left"] > *,
.wp-block[data-align="right"] > *,
.wp-block.alignleft,
@@ -408,3 +438,23 @@
margin-bottom: auto;
}
}
+
+/** Zoom Out mode styles **/
+.block-editor-iframe__body {
+ transition: all 0.3s;
+ transform-origin: top center;
+
+ &.is-zoomed-out {
+ margin: 100px 0;
+ transform: scale(0.45);
+
+ // Add a bit more space between the top level blocks.
+ .wp-site-blocks > * + * {
+ margin-block-start: 2.5rem;
+ }
+
+ > .block-list-appender {
+ display: none;
+ }
+ }
+}
diff --git a/packages/block-editor/src/components/block-list/test/block-list-context.native.js b/packages/block-editor/src/components/block-list/test/block-list-context.native.js
index e968a54662d06..e4e1911fa3237 100644
--- a/packages/block-editor/src/components/block-list/test/block-list-context.native.js
+++ b/packages/block-editor/src/components/block-list/test/block-list-context.native.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { cloneDeep } from 'lodash';
-
/**
* Internal dependencies
*/
@@ -19,6 +14,9 @@ import {
ROOT_LEVEL_ID,
} from './fixtures/block-list-context.native';
+// Deep clone an object to avoid mutating it later.
+const cloneObject = ( obj ) => JSON.parse( JSON.stringify( obj ) );
+
describe( 'findBlockLayoutByClientId', () => {
it( "finds a block's layout data at root level", () => {
const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
@@ -66,7 +64,7 @@ describe( 'findBlockLayoutByClientId', () => {
describe( 'deleteBlockLayoutByClientId', () => {
it( "deletes a block's layout data at root level", () => {
const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
- const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+ const defaultBlockLayouts = cloneObject( BLOCKS_LAYOUTS_DATA );
const currentBlockLayouts = deleteBlockLayoutByClientId(
defaultBlockLayouts,
ROOT_LEVEL_ID
@@ -82,7 +80,7 @@ describe( 'deleteBlockLayoutByClientId', () => {
it( "deletes a nested block's layout data with inner blocks", () => {
const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
- const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+ const defaultBlockLayouts = cloneObject( BLOCKS_LAYOUTS_DATA );
const currentBlockLayouts = deleteBlockLayoutByClientId(
defaultBlockLayouts,
NESTED_WITH_INNER_BLOCKS_ID
@@ -98,7 +96,7 @@ describe( 'deleteBlockLayoutByClientId', () => {
it( "deletes a deep nested block's layout data", () => {
const { findBlockLayoutByClientId } = DEFAULT_BLOCK_LIST_CONTEXT;
- const defaultBlockLayouts = cloneDeep( BLOCKS_LAYOUTS_DATA );
+ const defaultBlockLayouts = cloneObject( BLOCKS_LAYOUTS_DATA );
const currentBlockLayouts = deleteBlockLayoutByClientId(
defaultBlockLayouts,
DEEP_NESTED_ID
@@ -120,7 +118,7 @@ describe( 'updateBlocksLayouts', () => {
findBlockLayoutByClientId,
updateBlocksLayouts,
} = DEFAULT_BLOCK_LIST_CONTEXT;
- const currentBlockLayouts = cloneDeep( blocksLayouts );
+ const currentBlockLayouts = cloneObject( blocksLayouts );
const BLOCK_CLIENT_ID = PARAGRAPH_BLOCK_LAYOUT_DATA.clientId;
updateBlocksLayouts( currentBlockLayouts, PARAGRAPH_BLOCK_LAYOUT_DATA );
@@ -142,7 +140,7 @@ describe( 'updateBlocksLayouts', () => {
const { findBlockLayoutByClientId, updateBlocksLayouts } =
DEFAULT_BLOCK_LIST_CONTEXT;
const currentBlockLayouts = {
- current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+ current: cloneObject( BLOCKS_LAYOUTS_DATA ),
};
const PARENT_BLOCK_CLIENT_ID = GROUP_BLOCK_LAYOUT_DATA.clientId;
@@ -181,7 +179,7 @@ describe( 'updateBlocksLayouts', () => {
const { findBlockLayoutByClientId, updateBlocksLayouts } =
DEFAULT_BLOCK_LIST_CONTEXT;
const currentBlockLayouts = {
- current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+ current: cloneObject( BLOCKS_LAYOUTS_DATA ),
};
// Add block layout data to it's parents inner blocks
@@ -207,7 +205,7 @@ describe( 'updateBlocksLayouts', () => {
const { findBlockLayoutByClientId, updateBlocksLayouts } =
DEFAULT_BLOCK_LIST_CONTEXT;
const currentBlockLayouts = {
- current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+ current: cloneObject( BLOCKS_LAYOUTS_DATA ),
};
updateBlocksLayouts( currentBlockLayouts, {
@@ -227,7 +225,7 @@ describe( 'updateBlocksLayouts', () => {
const { findBlockLayoutByClientId, updateBlocksLayouts } =
DEFAULT_BLOCK_LIST_CONTEXT;
const currentBlockLayouts = {
- current: cloneDeep( BLOCKS_LAYOUTS_DATA ),
+ current: cloneObject( BLOCKS_LAYOUTS_DATA ),
};
updateBlocksLayouts( currentBlockLayouts, {
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index 24a25d41d8b36..3a02a400b9951 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -34,6 +34,7 @@ import { useNavModeExit } from './use-nav-mode-exit';
import { useBlockRefProvider } from './use-block-refs';
import { useIntersectionObserver } from './use-intersection-observer';
import { store as blockEditorStore } from '../../../store';
+import useBlockOverlayActive from '../../block-content-overlay';
/**
* If the block count exceeds the threshold, we disable the reordering animation
@@ -50,18 +51,14 @@ const BLOCK_ANIMATION_THRESHOLD = 200;
* also pass any other props through this hook, and they will be merged and
* returned.
*
- * @param {Object} props Optional. Props to pass to the element. Must contain
- * the ref if one is defined.
- * @param {Object} options Options for internal use only.
+ * @param {Object} props Optional. Props to pass to the element. Must contain
+ * the ref if one is defined.
+ * @param {Object} options Options for internal use only.
* @param {boolean} options.__unstableIsHtml
- * @param {boolean} options.__unstableIsDisabled Whether the block should be disabled.
*
* @return {Object} Props to pass to the element to mark as a block.
*/
-export function useBlockProps(
- props = {},
- { __unstableIsHtml, __unstableIsDisabled = false } = {}
-) {
+export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
const {
clientId,
className,
@@ -114,6 +111,8 @@ export function useBlockProps(
[ clientId ]
);
+ const hasOverlay = useBlockOverlayActive( clientId );
+
// translators: %s: Type of block (i.e. Text, Image etc)
const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
@@ -132,7 +131,7 @@ export function useBlockProps(
enableAnimation,
triggerAnimationOnChange: index,
} ),
- useDisabled( { isDisabled: ! __unstableIsDisabled } ),
+ useDisabled( { isDisabled: ! hasOverlay } ),
] );
const blockEditContext = useBlockEditContext();
@@ -144,11 +143,11 @@ export function useBlockProps(
}
return {
+ tabIndex: 0,
...wrapperProps,
...props,
ref: mergedRefs,
id: `block-${ clientId }${ htmlSuffix }`,
- tabIndex: 0,
role: 'document',
'aria-label': blockLabel,
'data-block': clientId,
@@ -158,6 +157,7 @@ export function useBlockProps(
// The wp-block className is important for editor styles.
classnames( 'block-editor-block-list__block', {
'wp-block': ! isAligned,
+ 'has-block-overlay': hasOverlay,
} ),
className,
props.className,
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js b/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
index be112f6dc0744..fce94b85f9119 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
@@ -34,6 +34,7 @@ export function useBlockClassNames( clientId ) {
hasSelectedInnerBlock,
isTyping,
__unstableIsFullySelected,
+ __unstableSelectionHasUnmergeableBlock,
} = select( blockEditorStore );
const { outlineMode } = getSettings();
const isDragging = isBlockBeingDragged( clientId );
@@ -51,7 +52,9 @@ export function useBlockClassNames( clientId ) {
'is-highlighted': isBlockHighlighted( clientId ),
'is-multi-selected': isMultiSelected,
'is-partially-selected':
- isMultiSelected && ! __unstableIsFullySelected(),
+ isMultiSelected &&
+ ! __unstableIsFullySelected() &&
+ ! __unstableSelectionHasUnmergeableBlock(),
'is-reusable': isReusableBlock( getBlockType( name ) ),
'is-dragging': isDragging,
'has-child-selected': isAncestorOfSelectedBlock,
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
index 8b95f19f3c9ff..21515d74b2ecd 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
/**
* WordPress dependencies
*/
@@ -36,7 +31,7 @@ function useInitialPosition( clientId ) {
( select ) => {
const {
getSelectedBlocksInitialCaretPosition,
- isNavigationMode,
+ __unstableGetEditorMode,
isBlockSelected,
} = select( blockEditorStore );
@@ -44,7 +39,7 @@ function useInitialPosition( clientId ) {
return;
}
- if ( isNavigationMode() ) {
+ if ( __unstableGetEditorMode() !== 'edit' ) {
return;
}
@@ -85,7 +80,7 @@ export function useFocusFirstElement( clientId ) {
const { ownerDocument } = ref.current;
// Do not focus the block if it already contains the active element.
- if ( ref.current.contains( ownerDocument.activeElement ) ) {
+ if ( isInsideRootBlock( ref.current, ownerDocument.activeElement ) ) {
return;
}
@@ -98,7 +93,7 @@ export function useFocusFirstElement( clientId ) {
// tabbables.
const isReverse = -1 === initialPosition;
const target =
- ( isReverse ? last : first )( textInputs ) || ref.current;
+ textInputs[ isReverse ? textInputs.length - 1 : 0 ] || ref.current;
if ( ! isInsideRootBlock( ref.current, target ) ) {
ref.current.focus();
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
index 26fc68c21ce2f..653ef3049b124 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
@@ -26,8 +26,8 @@ function listener( event ) {
*/
export function useIsHovered() {
const isEnabled = useSelect( ( select ) => {
- const { isNavigationMode, getSettings } = select( blockEditorStore );
- return isNavigationMode() || getSettings().outlineMode;
+ const { getSettings } = select( blockEditorStore );
+ return getSettings().outlineMode;
}, [] );
return useRefEffect(
diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
index 47c90eb5cd575..dac535e74c37f 100644
--- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js
+++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
@@ -14,8 +14,10 @@ import { InsertionPointOpenRef } from '../block-tools/insertion-point';
export function useInBetweenInserter() {
const openRef = useContext( InsertionPointOpenRef );
- const hasReducedUI = useSelect(
- ( select ) => select( blockEditorStore ).getSettings().hasReducedUI,
+ const isInBetweenInserterDisabled = useSelect(
+ ( select ) =>
+ select( blockEditorStore ).getSettings().hasReducedUI ||
+ select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
[]
);
const {
@@ -26,13 +28,14 @@ export function useInBetweenInserter() {
isMultiSelecting,
getSelectedBlockClientIds,
getTemplateLock,
+ __unstableIsWithinBlockOverlay,
} = useSelect( blockEditorStore );
const { showInsertionPoint, hideInsertionPoint } =
useDispatch( blockEditorStore );
return useRefEffect(
( node ) => {
- if ( hasReducedUI ) {
+ if ( isInBetweenInserterDisabled ) {
return;
}
@@ -108,16 +111,11 @@ export function useInBetweenInserter() {
// Don't show the insertion point if a parent block has an "overlay"
// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
- const parentOverlay = element.parentElement?.closest(
- '.block-editor-block-content-overlay'
- );
- if ( parentOverlay ) {
- return;
- }
-
const clientId = element.id.slice( 'block-'.length );
-
- if ( ! clientId ) {
+ if (
+ ! clientId ||
+ __unstableIsWithinBlockOverlay( clientId )
+ ) {
return;
}
@@ -126,7 +124,6 @@ export function useInBetweenInserter() {
if ( getSelectedBlockClientIds().includes( clientId ) ) {
return;
}
-
const elementRect = element.getBoundingClientRect();
if (
@@ -175,6 +172,7 @@ export function useInBetweenInserter() {
showInsertionPoint,
hideInsertionPoint,
getSelectedBlockClientIds,
+ isInBetweenInserterDisabled,
]
);
}
diff --git a/packages/block-editor/src/components/block-lock/use-block-lock.js b/packages/block-editor/src/components/block-lock/use-block-lock.js
index ced310ebf5404..d225557a5813a 100644
--- a/packages/block-editor/src/components/block-lock/use-block-lock.js
+++ b/packages/block-editor/src/components/block-lock/use-block-lock.js
@@ -25,6 +25,7 @@ export default function useBlockLock( clientId ) {
canLockBlockType,
getBlockName,
getBlockRootClientId,
+ getTemplateLock,
} = select( blockEditorStore );
const rootClientId = getBlockRootClientId( clientId );
@@ -37,6 +38,7 @@ export default function useBlockLock( clientId ) {
canMove,
canRemove,
canLock: canLockBlockType( getBlockName( clientId ) ),
+ isContentLocked: getTemplateLock( clientId ) === 'noContent',
isLocked: ! canEdit || ! canMove || ! canRemove,
};
},
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
index d1081cfa2d39c..538f67fe23c40 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
+++ b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
@@ -2,7 +2,7 @@
* External dependencies
*/
import { Platform, findNodeHandle } from 'react-native';
-import { partial, first, castArray, last, every } from 'lodash';
+
/**
* WordPress dependencies
*/
@@ -307,21 +307,25 @@ export default compose(
canInsertBlockType,
getTemplateLock,
} = select( blockEditorStore );
- const normalizedClientIds = castArray( clientIds );
+ const normalizedClientIds = Array.isArray( clientIds )
+ ? clientIds
+ : [ clientIds ];
const block = getBlock( normalizedClientIds );
const blockName = getBlockName( normalizedClientIds );
const blockType = getBlockType( blockName );
const blockTitle = blockType?.title;
- const firstClientId = first( normalizedClientIds );
+ const firstClientId = normalizedClientIds[ 0 ];
const rootClientId = getBlockRootClientId( firstClientId );
const blockOrder = getBlockOrder( rootClientId );
const firstIndex = getBlockIndex( firstClientId );
- const lastIndex = getBlockIndex( last( normalizedClientIds ) );
+ const lastIndex = getBlockIndex(
+ normalizedClientIds[ normalizedClientIds.length - 1 ]
+ );
const innerBlocks = getBlocksByClientId( clientIds );
- const canDuplicate = every( innerBlocks, ( innerBlock ) => {
+ const canDuplicate = innerBlocks.every( ( innerBlock ) => {
return (
!! innerBlock &&
hasBlockSupport( innerBlock.name, 'multiple', true ) &&
@@ -336,9 +340,9 @@ export default compose(
isExactlyOneBlock && isDefaultBlock && isEmptyContent;
const isLocked = !! getTemplateLock( rootClientId );
- const selectedBlockClientId = first( getSelectedBlockClientIds() );
+ const selectedBlockClientId = getSelectedBlockClientIds()[ 0 ];
const selectedBlock = selectedBlockClientId
- ? first( getBlocksByClientId( selectedBlockClientId ) )
+ ? getBlocksByClientId( selectedBlockClientId )[ 0 ]
: undefined;
const selectedBlockPossibleTransformations = selectedBlock
? getBlockTransformItems( [ selectedBlock ], rootClientId )
@@ -406,8 +410,10 @@ export default compose(
duplicateBlock() {
return duplicateBlocks( clientIds );
},
- onMoveDown: partial( moveBlocksDown, clientIds, rootClientId ),
- onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),
+ onMoveDown: ( ...args ) =>
+ moveBlocksDown( clientIds, rootClientId, ...args ),
+ onMoveUp: ( ...args ) =>
+ moveBlocksUp( clientIds, rootClientId, ...args ),
openGeneralSidebar: () =>
openGeneralSidebar( 'edit-post/block' ),
pasteBlock: ( clipboardBlock ) => {
diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js
index 6713d5d273d86..2b820a481b583 100644
--- a/packages/block-editor/src/components/block-mover/button.js
+++ b/packages/block-editor/src/components/block-mover/button.js
@@ -2,7 +2,6 @@
* External dependencies
*/
import classnames from 'classnames';
-import { castArray, first, last } from 'lodash';
/**
* WordPress dependencies
@@ -62,7 +61,10 @@ const BlockMoverButton = forwardRef(
ref
) => {
const instanceId = useInstanceId( BlockMoverButton );
- const blocksCount = castArray( clientIds ).length;
+ const normalizedClientIds = Array.isArray( clientIds )
+ ? clientIds
+ : [ clientIds ];
+ const blocksCount = normalizedClientIds.length;
const {
blockType,
@@ -81,12 +83,11 @@ const BlockMoverButton = forwardRef(
getBlock,
getBlockListSettings,
} = select( blockEditorStore );
- const normalizedClientIds = castArray( clientIds );
- const firstClientId = first( normalizedClientIds );
+ const firstClientId = normalizedClientIds[ 0 ];
const blockRootClientId = getBlockRootClientId( firstClientId );
const firstBlockIndex = getBlockIndex( firstClientId );
const lastBlockIndex = getBlockIndex(
- last( normalizedClientIds )
+ normalizedClientIds[ normalizedClientIds.length - 1 ]
);
const blockOrder = getBlockOrder( blockRootClientId );
const block = getBlock( firstClientId );
diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js
index 9087cada5c02a..9b9f32457561e 100644
--- a/packages/block-editor/src/components/block-mover/index.js
+++ b/packages/block-editor/src/components/block-mover/index.js
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
-import { first, last, castArray } from 'lodash';
import classnames from 'classnames';
/**
@@ -30,13 +29,15 @@ function BlockMover( { clientIds, hideDragHandle } ) {
getBlockOrder,
getBlockRootClientId,
} = select( blockEditorStore );
- const normalizedClientIds = castArray( clientIds );
- const firstClientId = first( normalizedClientIds );
- const _rootClientId = getBlockRootClientId(
- first( normalizedClientIds )
- );
+ const normalizedClientIds = Array.isArray( clientIds )
+ ? clientIds
+ : [ clientIds ];
+ const firstClientId = normalizedClientIds[ 0 ];
+ const _rootClientId = getBlockRootClientId( firstClientId );
const firstIndex = getBlockIndex( firstClientId );
- const lastIndex = getBlockIndex( last( normalizedClientIds ) );
+ const lastIndex = getBlockIndex(
+ normalizedClientIds[ normalizedClientIds.length - 1 ]
+ );
const blockOrder = getBlockOrder( _rootClientId );
return {
diff --git a/packages/block-editor/src/components/block-mover/index.native.js b/packages/block-editor/src/components/block-mover/index.native.js
index 0734b304cdbf6..852515a343821 100644
--- a/packages/block-editor/src/components/block-mover/index.native.js
+++ b/packages/block-editor/src/components/block-mover/index.native.js
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
-import { first, last, partial, castArray } from 'lodash';
import { Platform } from 'react-native';
/**
@@ -149,12 +148,16 @@ export default compose(
getBlockRootClientId,
getBlockOrder,
} = select( blockEditorStore );
- const normalizedClientIds = castArray( clientIds );
- const firstClientId = first( normalizedClientIds );
+ const normalizedClientIds = Array.isArray( clientIds )
+ ? clientIds
+ : [ clientIds ];
+ const firstClientId = normalizedClientIds[ 0 ];
const rootClientId = getBlockRootClientId( firstClientId );
const blockOrder = getBlockOrder( rootClientId );
const firstIndex = getBlockIndex( firstClientId );
- const lastIndex = getBlockIndex( last( normalizedClientIds ) );
+ const lastIndex = getBlockIndex(
+ normalizedClientIds[ normalizedClientIds.length - 1 ]
+ );
return {
firstIndex,
@@ -169,15 +172,19 @@ export default compose(
const { moveBlocksDown, moveBlocksUp, moveBlocksToPosition } =
dispatch( blockEditorStore );
return {
- onMoveDown: partial( moveBlocksDown, clientIds, rootClientId ),
- onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),
- onLongMove: ( targetIndex ) =>
- partial(
- moveBlocksToPosition,
- clientIds,
- rootClientId,
- targetIndex
- ),
+ onMoveDown: ( ...args ) =>
+ moveBlocksDown( clientIds, rootClientId, ...args ),
+ onMoveUp: ( ...args ) =>
+ moveBlocksUp( clientIds, rootClientId, ...args ),
+ onLongMove:
+ ( targetIndex ) =>
+ ( ...args ) =>
+ moveBlocksToPosition(
+ clientIds,
+ rootClientId,
+ targetIndex,
+ ...args
+ ),
};
} ),
withInstanceId
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
index 37fb597d790b9..cf76527f4910a 100644
--- a/packages/block-editor/src/components/block-popover/inbetween.js
+++ b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -7,7 +7,13 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
-import { useCallback, useMemo, createContext } from '@wordpress/element';
+import {
+ useCallback,
+ useMemo,
+ createContext,
+ useReducer,
+ useLayoutEffect,
+} from '@wordpress/element';
import { Popover } from '@wordpress/components';
import { isRTL } from '@wordpress/i18n';
@@ -28,6 +34,12 @@ function BlockPopoverInbetween( {
__unstableContentRef,
...props
} ) {
+ // This is a temporary hack to get the inbetween inserter to recompute properly.
+ const [ positionRecompute, forceRecompute ] = useReducer(
+ ( s ) => s + 1,
+ 0
+ );
+
const { orientation, rootClientId, isVisible } = useSelect(
( select ) => {
const {
@@ -36,7 +48,9 @@ function BlockPopoverInbetween( {
isBlockVisible,
} = select( blockEditorStore );
- const _rootClientId = getBlockRootClientId( previousClientId );
+ const _rootClientId = getBlockRootClientId(
+ previousClientId ?? nextClientId
+ );
return {
orientation:
getBlockListSettings( _rootClientId )?.orientation ||
@@ -47,7 +61,7 @@ function BlockPopoverInbetween( {
isBlockVisible( nextClientId ),
};
},
- [ previousClientId ]
+ [ previousClientId, nextClientId ]
);
const previousElement = useBlockElement( previousClientId );
const nextElement = useBlockElement( nextClientId );
@@ -66,9 +80,7 @@ function BlockPopoverInbetween( {
if ( isVertical ) {
return {
- width: previousElement
- ? previousElement.offsetWidth
- : nextElement.offsetWidth,
+ width: previousRect ? previousRect.width : nextRect.width,
height:
nextRect && previousRect
? nextRect.top - previousRect.bottom
@@ -85,11 +97,15 @@ function BlockPopoverInbetween( {
return {
width,
- height: previousElement
- ? previousElement.offsetHeight
- : nextElement.offsetHeight,
+ height: previousRect ? previousRect.height : nextRect.height,
};
- }, [ previousElement, nextElement, isVertical ] );
+ }, [
+ previousElement,
+ nextElement,
+ isVertical,
+ positionRecompute,
+ isVisible,
+ ] );
const getAnchorRect = useCallback( () => {
if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
@@ -110,8 +126,8 @@ function BlockPopoverInbetween( {
return {
top: previousRect ? previousRect.bottom : nextRect.top,
left: previousRect ? previousRect.right : nextRect.right,
- right: previousRect ? previousRect.left : nextRect.left,
- bottom: nextRect ? nextRect.top : previousRect.bottom,
+ right: previousRect ? previousRect.right : nextRect.right,
+ bottom: previousRect ? previousRect.bottom : nextRect.top,
height: 0,
width: 0,
ownerDocument,
@@ -121,8 +137,8 @@ function BlockPopoverInbetween( {
return {
top: previousRect ? previousRect.bottom : nextRect.top,
left: previousRect ? previousRect.left : nextRect.left,
- right: previousRect ? previousRect.right : nextRect.right,
- bottom: nextRect ? nextRect.top : previousRect.bottom,
+ right: previousRect ? previousRect.left : nextRect.left,
+ bottom: previousRect ? previousRect.bottom : nextRect.top,
height: 0,
width: 0,
ownerDocument,
@@ -133,8 +149,8 @@ function BlockPopoverInbetween( {
return {
top: previousRect ? previousRect.top : nextRect.top,
left: previousRect ? previousRect.left : nextRect.right,
- right: nextRect ? nextRect.right : previousRect.left,
- bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+ right: previousRect ? previousRect.left : nextRect.right,
+ bottom: previousRect ? previousRect.top : nextRect.top,
height: 0,
width: 0,
ownerDocument,
@@ -144,16 +160,57 @@ function BlockPopoverInbetween( {
return {
top: previousRect ? previousRect.top : nextRect.top,
left: previousRect ? previousRect.right : nextRect.left,
- right: nextRect ? nextRect.left : previousRect.right,
- bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+ right: previousRect ? previousRect.right : nextRect.left,
+ bottom: previousRect ? previousRect.left : nextRect.right,
height: 0,
width: 0,
ownerDocument,
};
- }, [ previousElement, nextElement ] );
+ }, [ previousElement, nextElement, positionRecompute, isVisible ] );
const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+ // This is only needed for a smooth transition when moving blocks.
+ useLayoutEffect( () => {
+ if ( ! previousElement ) {
+ return;
+ }
+ const observer = new window.MutationObserver( forceRecompute );
+ observer.observe( previousElement, { attributes: true } );
+
+ return () => {
+ observer.disconnect();
+ };
+ }, [ previousElement ] );
+
+ useLayoutEffect( () => {
+ if ( ! nextElement ) {
+ return;
+ }
+ const observer = new window.MutationObserver( forceRecompute );
+ observer.observe( nextElement, { attributes: true } );
+
+ return () => {
+ observer.disconnect();
+ };
+ }, [ nextElement ] );
+
+ useLayoutEffect( () => {
+ if ( ! previousElement ) {
+ return;
+ }
+ previousElement.ownerDocument.defaultView.addEventListener(
+ 'resize',
+ forceRecompute
+ );
+ return () => {
+ previousElement.ownerDocument.defaultView.removeEventListener(
+ 'resize',
+ forceRecompute
+ );
+ };
+ }, [ previousElement ] );
+
// If there's either a previous or a next element, show the inbetween popover.
// Note that drag and drop uses the inbetween popover to show the drop indicator
// before the first block and after the last block.
@@ -186,9 +243,16 @@ function BlockPopoverInbetween( {
'block-editor-block-popover__inbetween',
props.className
) }
- __unstableForcePosition
+ resize={ false }
+ flip={ false }
+ placement="bottom-start"
>
-
+
{ ( fills ) => {
if (
! fills?.length > 0 &&
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index 2d0571397a8ea..02bd9ef252d0f 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -51,6 +51,7 @@ export function BlockSettingsDropdown( {
clientIds,
__experimentalSelectBlock,
children,
+ __unstableDisplayLocation,
...props
} ) {
const blockClientIds = castArray( clientIds );
@@ -289,6 +290,9 @@ export function BlockSettingsDropdown( {
} The grouped block transformations.
+ */
+function useGroupedTransforms( possibleBlockTransformations ) {
+ const priorityContentTranformationBlocks = {
+ 'core/paragraph': 1,
+ 'core/heading': 2,
+ 'core/list': 3,
+ 'core/quote': 4,
+ };
+ const transformations = useMemo( () => {
+ const priorityTextTranformsNames = Object.keys(
+ priorityContentTranformationBlocks
+ );
+ return possibleBlockTransformations.reduce(
+ ( accumulator, item ) => {
+ const { name } = item;
+ if ( priorityTextTranformsNames.includes( name ) ) {
+ accumulator.priorityTextTransformations.push( item );
+ } else {
+ accumulator.restTransformations.push( item );
+ }
+ return accumulator;
+ },
+ { priorityTextTransformations: [], restTransformations: [] }
+ );
+ }, [ possibleBlockTransformations ] );
+
+ // Order the priority text transformations.
+ transformations.priorityTextTransformations.sort(
+ ( { name: currentName }, { name: nextName } ) => {
+ return priorityContentTranformationBlocks[ currentName ] <
+ priorityContentTranformationBlocks[ nextName ]
+ ? -1
+ : 1;
+ }
+ );
+ return transformations;
+}
+
const BlockTransformationsMenu = ( {
className,
possibleBlockTransformations,
@@ -23,41 +70,88 @@ const BlockTransformationsMenu = ( {
} ) => {
const [ hoveredTransformItemName, setHoveredTransformItemName ] =
useState();
+
+ const { priorityTextTransformations, restTransformations } =
+ useGroupedTransforms( possibleBlockTransformations );
+ // We have to check if both content transformations(priority and rest) are set
+ // in order to create a separate MenuGroup for them.
+ const hasBothContentTransformations =
+ priorityTextTransformations.length && restTransformations.length;
+ const restTransformItems = !! restTransformations.length && (
+
- { hoveredTransformItemName && (
-
+ />
+ ) ) }
+ { ! hasBothContentTransformations && restTransformItems }
+
+ { !! hasBothContentTransformations && (
+
+ { restTransformItems }
+
+ ) }
+
);
};
+function RestTransformationItems( {
+ restTransformations,
+ onSelect,
+ setHoveredTransformItemName,
+} ) {
+ return restTransformations.map( ( item ) => (
+
-
- { ( draggableProps ) => (
-
- ) }
-
+ { editorMode === 'zoom-out' && (
+
+ { ( draggableProps ) => (
+
+ ) }
+
+ ) }
+`;
+
+exports[`BlockVerticalAlignmentUI should match snapshot when controls are visible 1`] = `
+{ children }
+
+ { children }
+
);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index 597f61eb94910..2a66623e2fbd6 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -66,10 +66,9 @@ function BlockPopover(
// Render in the old slot if needed for backward compatibility,
// otherwise render in place (not in the default popover slot).
__unstableSlotName={ __unstablePopoverSlot || null }
- // Observe movement for block animations (especially horizontal).
- __unstableObserveElement={ selectedElement }
- __unstableForcePosition
- __unstableShift
+ resize={ false }
+ flip={ false }
+ shift
{ ...props }
className={ classnames(
'block-editor-block-popover',
diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss
index dc983dbbf4f89..1ed4774a56c01 100644
--- a/packages/block-editor/src/components/block-popover/style.scss
+++ b/packages/block-editor/src/components/block-popover/style.scss
@@ -6,6 +6,9 @@
// like the popover is impacted by the block gap margin.
margin: 0 !important;
+ // Allow clicking through the toolbar holder.
+ pointer-events: none;
+
.components-popover__content {
margin: 0 !important;
min-width: auto;
@@ -15,9 +18,6 @@
outline: none;
box-shadow: none;
overflow-y: visible;
-
- // Allow clicking through the toolbar holder.
- pointer-events: none;
}
// Enable pointer events for the toolbar's content.
@@ -39,7 +39,6 @@
}
// Re-enable pointer events when the inbetween inserter has a '+' button.
- //
// Needs specificity, do not simplify.
.is-with-inserter {
pointer-events: all;
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index 5a78e7abeb3b4..53ba2bed51254 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -91,8 +91,10 @@ function AutoBlockPreview( {
bodyElement.style.padding =
__experimentalPadding + 'px';
- // necessary for contentResizeListener to work.
- bodyElement.style.position = 'relative';
+ // Necessary for contentResizeListener to work.
+ bodyElement.style.boxSizing = 'border-box';
+ bodyElement.style.position = 'absolute';
+ bodyElement.style.width = '100%';
}, [] ) }
aria-hidden
tabIndex={ -1 }
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/README.md b/packages/block-editor/src/components/block-settings-menu-controls/README.md
index 84c3cc5e44ed2..4537f4de987a5 100644
--- a/packages/block-editor/src/components/block-settings-menu-controls/README.md
+++ b/packages/block-editor/src/components/block-settings-menu-controls/README.md
@@ -16,3 +16,12 @@ function ReusableBlocksMenuItems() {
);
}
```
+
+## Props
+
+### `__unstableDisplayLocation`
+
+- **Type:** `String`
+- **Default:** `undefined`
+
+A string representing the location where the component is being displayed within the UI. This can be used to conditionalize certain behaviors including the display of associated components. This behaviour will likely be refactored to a React.Context implementation.
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
index 28bfbb27066b1..35aab859d2f73 100644
--- a/packages/block-editor/src/components/block-settings-menu-controls/index.js
+++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -25,7 +25,11 @@ import { store as blockEditorStore } from '../../store';
const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
-const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
+const BlockSettingsMenuControlsSlot = ( {
+ fillProps,
+ clientIds = null,
+ __unstableDisplayLocation,
+} ) => {
const { selectedBlocks, selectedClientIds, canRemove } = useSelect(
( select ) => {
const {
@@ -58,7 +62,14 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
( isGroupable || isUngroupable ) && canRemove;
return (
-
- { ! isMultiToolbar && ! displayHeaderToolbar && (
-
);
};
diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
index bd7a3547e1374..ba31043ada2dd 100644
--- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
@@ -20,8 +20,12 @@ import { store as blockEditorStore } from '../../store';
function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
const { blockType, hasParents, showParentSelector } = useSelect(
( select ) => {
- const { getBlockName, getBlockParents, getSelectedBlockClientIds } =
- select( blockEditorStore );
+ const {
+ getBlockName,
+ getBlockParents,
+ getSelectedBlockClientIds,
+ __unstableGetContentLockingParent,
+ } = select( blockEditorStore );
const { getBlockType } = select( blocksStore );
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -42,7 +46,10 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
'__experimentalParentSelector',
true
) &&
- selectedBlockClientIds.length <= 1,
+ selectedBlockClientIds.length <= 1 &&
+ ! __unstableGetContentLockingParent(
+ selectedBlockClientId
+ ),
};
},
[]
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
index 9dfb7ce9772ab..195ab92985b84 100644
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -39,6 +39,7 @@ import { store as blockEditorStore } from '../../store';
import BlockDraggable from '../block-draggable';
import useBlockDisplayInformation from '../use-block-display-information';
import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockMover from '../block-mover';
/**
* Block selection button component, displaying the label of the block. If the block
@@ -59,6 +60,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
getBlockIndex,
hasBlockMovingClientId,
getBlockListSettings,
+ __unstableGetEditorMode,
} = select( blockEditorStore );
const index = getBlockIndex( clientId );
const { name, attributes } = getBlock( clientId );
@@ -69,11 +71,19 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
attributes,
blockMovingMode,
orientation: getBlockListSettings( rootClientId )?.orientation,
+ editorMode: __unstableGetEditorMode(),
};
},
[ clientId, rootClientId ]
);
- const { index, name, attributes, blockMovingMode, orientation } = selected;
+ const {
+ index,
+ name,
+ attributes,
+ blockMovingMode,
+ orientation,
+ editorMode,
+ } = selected;
const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
const ref = useRef();
@@ -236,25 +246,34 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
- { ( shouldShowVisualToolbar || isMultiToolbar ) && (
-
-
+
- ) }
+
+ ) }
{ shouldShowVisualToolbar && isMultiToolbar && (
+
+
`;
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
index 70cb8caf952fa..2e54ee9026854 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/test/index.js
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* Internal dependencies
@@ -12,44 +13,112 @@ describe( 'BlockVerticalAlignmentUI', () => {
const alignment = 'top';
const onChange = jest.fn();
- const wrapper = shallow(
-
-
`;
exports[`DefaultBlockAppender should match snapshot 1`] = `
-+
- Type / to choose a block
-
-
+ Type / to choose a block +
+
-
`;
exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
-+
- Type / to choose a block
-
-
+ Type / to choose a block +
+
-
`;
diff --git a/packages/block-editor/src/components/default-block-appender/test/index.js b/packages/block-editor/src/components/default-block-appender/test/index.js
index b14463d335163..0a00a00d5d881 100644
--- a/packages/block-editor/src/components/default-block-appender/test/index.js
+++ b/packages/block-editor/src/components/default-block-appender/test/index.js
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* Internal dependencies
@@ -9,42 +10,55 @@ import { shallow } from 'enzyme';
import { DefaultBlockAppender, ZWNBSP } from '../';
describe( 'DefaultBlockAppender', () => {
- const expectOnAppendCalled = ( onAppend ) => {
- expect( onAppend ).toHaveBeenCalledTimes( 1 );
- expect( onAppend ).toHaveBeenCalledWith();
- };
-
it( 'should match snapshot', () => {
const onAppend = jest.fn();
- const wrapper = shallow(
+
+ const { container } = render(
+
-
-
-
+ +
+
-
- { /* The following div is necessary to fix the sticky position of the search form. */ }
-
+
+ );
+};
+
+export const libraryWithPatterns = () => {
+ const wrapperStyle = {
+ margin: '24px',
+ height: 400,
+ border: '1px solid #f3f3f3',
+ display: 'inline-block',
+ };
+ return (
+
+
+ );
+};
+
+export const libraryWithPatternsAndReusableBlocks = () => {
+ const wrapperStyle = {
+ margin: '24px',
+ height: 400,
+ border: '1px solid #f3f3f3',
+ display: 'inline-block',
+ };
+ return (
+
+
+ );
+};
+
+export const quickInserter = () => {
+ const wrapperStyle = {
+ margin: '24px',
+ height: 400,
+ border: '1px solid #f3f3f3',
+ display: 'inline-block',
+ };
+ return (
+
+
+ );
+};
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 0328771de3abd..32e5093233209 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -16,8 +16,20 @@ $block-inserter-tabs-height: 44px;
}
}
-.block-editor-inserter__content {
+.block-editor-inserter__main-area {
position: relative;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ gap: $grid-unit-20;
+ width: auto;
+ @include break-medium {
+ width: $block-inserter-width;
+ }
+
+ &.show-as-tabs {
+ gap: 0;
+ }
}
.block-editor-inserter__popover.is-quick {
@@ -78,15 +90,6 @@ $block-inserter-tabs-height: 44px;
overflow: visible;
}
-.block-editor-inserter__main-area {
- width: auto;
- overflow-y: auto;
- height: 100%;
- @include break-medium {
- width: $block-inserter-width;
- }
-}
-
.block-editor-inserter__inline-elements {
margin-top: -1px;
}
@@ -100,11 +103,7 @@ $block-inserter-tabs-height: 44px;
}
.block-editor-inserter__search {
- background: $white;
padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
- position: sticky;
- top: 0;
- z-index: z-index(".block-editor-inserter__search");
.components-search-control__icon {
right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
@@ -116,15 +115,12 @@ $block-inserter-tabs-height: 44px;
}
.block-editor-inserter__tabs {
+ flex-grow: 1;
display: flex;
flex-direction: column;
+ overflow: hidden;
.components-tab-panel__tabs {
- position: sticky;
- // Computed based off the search input height and paddings
- top: $grid-unit-20 + $grid-unit-60;
- background: $white;
- z-index: z-index(".block-editor-inserter__tabs .components-tab-panel__tabs");
border-bottom: $border-width solid $gray-300;
.components-tab-panel__tabs-item {
@@ -137,12 +133,15 @@ $block-inserter-tabs-height: 44px;
display: flex;
flex-grow: 1;
flex-direction: column;
- // Make a stacking context that keeps all descendents behind the sticky tabs
- position: relative;
- z-index: z-index(".block-editor-inserter__tabs .components-tab-panel__tab-content");
+ overflow-y: auto;
}
}
+.block-editor-inserter__no-tab-container {
+ overflow-y: auto;
+ flex-grow: 1;
+}
+
.block-editor-inserter__panel-header {
display: inline-flex;
align-items: center;
@@ -175,11 +174,6 @@ $block-inserter-tabs-height: 44px;
border: none;
}
-.block-editor-inserter__block-list {
- flex-grow: 1;
- position: relative;
-}
-
.block-editor-inserter__reusable-blocks-panel {
position: relative;
text-align: right;
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index 3c04b53062581..afc1c74e0a280 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -26,20 +26,24 @@ function InserterTabs( {
showPatterns = false,
showReusableBlocks = false,
onSelect,
+ prioritizePatterns,
} ) {
const tabs = useMemo( () => {
- const tempTabs = [ blocksTab ];
-
- if ( showPatterns ) {
+ const tempTabs = [];
+ if ( prioritizePatterns && showPatterns ) {
+ tempTabs.push( patternsTab );
+ }
+ tempTabs.push( blocksTab );
+ if ( ! prioritizePatterns && showPatterns ) {
tempTabs.push( patternsTab );
}
-
if ( showReusableBlocks ) {
tempTabs.push( reusableBlocksTab );
}
return tempTabs;
}, [
+ prioritizePatterns,
blocksTab,
showPatterns,
patternsTab,
diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js
index c6e2ca298f8df..71e3cd464ada1 100644
--- a/packages/block-editor/src/components/link-control/link-preview.js
+++ b/packages/block-editor/src/components/link-control/link-preview.js
@@ -123,9 +123,11 @@ export default function LinkPreview( {
- { ( ( hasRichData &&
- ( richData?.image || richData?.description ) ) ||
- isFetching ) && (
+ { !! (
+ ( hasRichData &&
+ ( richData?.image || richData?.description ) ) ||
+ isFetching
+ ) && (
- {
- if ( hoveredItem ) setHoveredItem( null );
- setFilterValue( value );
- } }
- value={ filterValue }
- label={ __( 'Search for blocks and patterns' ) }
- placeholder={ __( 'Search' ) }
- ref={ searchRef }
- />
- { !! filterValue && (
+
+ { getCurrentTab }
+
+ ) }
+ { ! filterValue && ! showAsTabs && (
+
{ showInserterHelpPanel && hoveredItem && (
+ {
+ if ( hoveredItem ) setHoveredItem( null );
+ setFilterValue( value );
+ } }
+ value={ filterValue }
+ label={ __( 'Search for blocks and patterns' ) }
+ placeholder={ __( 'Search' ) }
+ ref={ searchRef }
+ />
+ { !! filterValue && (
+
- { getCurrentTab }
-
- ) }
- { ! filterValue &&
- ! showPatterns &&
- ! hasReusableBlocks &&
- blocksTab }
-
+
+ ) }
+ { showAsTabs && (
+
+ { blocksTab }
+
+ ) }
We\'re a studio in Berlin with an international practice in architecture, urban planning and interior design. We believe in sharing knowledge and promoting dialogue to increase the creative potential of collaboration.
\n', + description: 'Heading text', + keywords: [ 'large text', 'title' ], + name: 'heading', + title: 'Heading', + }, +]; + +export const patternCategories = [ + { + name: 'featured', + label: 'Featured', + }, + { + name: 'text', + label: 'Text', + }, +]; + +export const reusableBlocks = [ + { + content: { + raw: '\x3C!-- wp:paragraph -->\nThis is reusable
\n\x3C!-- /wp:paragraph -->', + protected: false, + block_version: 1, + }, + date: '2022-09-12T13:28:06', + date_gmt: '2022-09-12T13:28:06', + id: 70, + link: 'http://localhost:8888/?p=70', + modified: '2022-09-12T13:28:06', + modified_gmt: '2022-09-12T13:28:06', + password: '', + slug: 'simple-paragraph', + status: 'publish', + template: '', + title: { raw: 'Simple paragraph' }, + type: 'wp_block', + }, +]; diff --git a/packages/block-editor/src/components/inserter/stories/index.js b/packages/block-editor/src/components/inserter/stories/index.js new file mode 100644 index 0000000000000..c74ca5fe79ee1 --- /dev/null +++ b/packages/block-editor/src/components/inserter/stories/index.js @@ -0,0 +1,90 @@ +/** + * Internal dependencies + */ +import BlockLibrary from '../library'; +import BlockEditorProvider from '../../provider'; +import { patternCategories, patterns, reusableBlocks } from './fixtures'; +import Inserter from '../'; + +export default { title: 'BlockEditor/Inserter' }; + +export const libraryWithoutPatterns = () => { + const wrapperStyle = { + margin: '24px', + height: 400, + border: '1px solid #f3f3f3', + display: 'inline-block', + }; + return ( +
+
+
+
+
+
+
+
+
{ ( richData?.image || isFetching ) && (
initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/button/init.js b/packages/block-library/src/button/init.js
new file mode 100644
index 0000000000000..79f0492c2cb2f
--- /dev/null
+++ b/packages/block-library/src/button/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 984027ddbd93a..cc553625f8ea3 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -4,20 +4,12 @@ $blocks-block__margin: 0.5em;
// Prefer the link selector instead of the regular button classname
// to support the previous markup in addition to the new one.
.wp-block-button__link {
- box-shadow: none;
cursor: pointer;
display: inline-block;
text-align: center;
word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
box-sizing: border-box;
- &:hover,
- &:focus,
- &:active,
- &:visited {
- color: $white;
- }
-
&.aligncenter {
text-align: center;
}
@@ -32,6 +24,7 @@ $blocks-block__margin: 0.5em;
// They are needed for backwards compatibility.
:where(.wp-block-button__link) {
// This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
+ box-shadow: none;
text-decoration: none;
// 100% causes an oval, but any explicit but really high value retains the pill shape.
@@ -41,6 +34,10 @@ $blocks-block__margin: 0.5em;
padding: calc(0.667em + 2px) calc(1.333em + 2px);
}
+.wp-block-button[style*="text-decoration"] .wp-block-button__link {
+ text-decoration: inherit;
+}
+
// Increased specificity needed to override margins.
.wp-block-buttons > .wp-block-button {
&.has-custom-width {
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
index d72cb426890a8..266646d96bcee 100644
--- a/packages/block-library/src/buttons/block.json
+++ b/packages/block-library/src/buttons/block.json
@@ -18,6 +18,19 @@
"blockGap": true
}
},
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalFontFamily": true,
+ "__experimentalFontWeight": true,
+ "__experimentalFontStyle": true,
+ "__experimentalTextTransform": true,
+ "__experimentalTextDecoration": true,
+ "__experimentalLetterSpacing": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true
+ }
+ },
"__experimentalLayout": {
"allowSwitching": false,
"allowInheriting": false,
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 37291f430024f..f60f65b372214 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
@@ -30,8 +35,13 @@ const DEFAULT_BLOCK = {
],
};
-function ButtonsEdit( { attributes: { layout = {} } } ) {
- const blockProps = useBlockProps();
+function ButtonsEdit( { attributes, className } ) {
+ const { fontSize, layout = {}, style } = attributes;
+ const blockProps = useBlockProps( {
+ className: classnames( className, {
+ 'has-custom-font-size': fontSize || style?.typography?.fontSize,
+ } ),
+ } );
const preferredStyle = useSelect( ( select ) => {
const preferredStyleVariations =
select( blockEditorStore ).getSettings()
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index 1f964c32fa940..018ca3b7e2f8e 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -54,6 +54,12 @@ $blocks-block__margin: 0.5em;
margin-bottom: 0;
}
}
+
+ .editor-styles-wrapper &.has-custom-font-size {
+ .wp-block-button__link {
+ font-size: inherit;
+ }
+ }
}
.wp-block[data-align="center"] > .wp-block-buttons {
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
index 52d406e0ca976..810922fbcb839 100644
--- a/packages/block-library/src/buttons/index.js
+++ b/packages/block-library/src/buttons/index.js
@@ -7,6 +7,7 @@ import { buttons as icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
+import initBlock from '../utils/init-block';
import deprecated from './deprecated';
import transforms from './transforms';
import edit from './edit';
@@ -36,3 +37,5 @@ export const settings = {
edit,
save,
};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/buttons/init.js b/packages/block-library/src/buttons/init.js
new file mode 100644
index 0000000000000..79f0492c2cb2f
--- /dev/null
+++ b/packages/block-library/src/buttons/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js
index 6ed6c218d6769..77431ef98829c 100644
--- a/packages/block-library/src/buttons/save.js
+++ b/packages/block-library/src/buttons/save.js
@@ -1,9 +1,20 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-export default function save() {
- const innerBlocksProps = useInnerBlocksProps.save( useBlockProps.save() );
+export default function save( { attributes, className } ) {
+ const { fontSize, style } = attributes;
+ const blockProps = useBlockProps.save( {
+ className: classnames( className, {
+ 'has-custom-font-size': fontSize || style?.typography?.fontSize,
+ } ),
+ } );
+ const innerBlocksProps = useInnerBlocksProps.save( blockProps );
return ;
}
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 6ba301ea7e25c..0f15bdab46fcf 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -69,6 +69,19 @@ $blocks-block__margin: 0.5em;
margin-right: auto;
width: 100%;
}
+
+ &[style*="text-decoration"] {
+ .wp-block-button,
+ .wp-block-button__link {
+ text-decoration: inherit;
+ }
+ }
+
+ &.has-custom-font-size {
+ .wp-block-button__link {
+ font-size: inherit;
+ }
+ }
}
// Legacy buttons that did not come in a wrapping container.
diff --git a/packages/block-library/src/buttons/transforms.native.js b/packages/block-library/src/buttons/transforms.native.js
index 0816b765fee29..c497af10c918f 100644
--- a/packages/block-library/src/buttons/transforms.native.js
+++ b/packages/block-library/src/buttons/transforms.native.js
@@ -2,7 +2,7 @@
* Internal dependencies
*/
import webTransforms from './transforms.js';
-import transformationCategories from '../transformationCategories';
+import transformationCategories from '../utils/transformation-categories';
const transforms = {
...webTransforms,
diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json
index 6f498ed585cd0..fad97e0a9efc7 100644
--- a/packages/block-library/src/calendar/block.json
+++ b/packages/block-library/src/calendar/block.json
@@ -16,7 +16,19 @@
}
},
"supports": {
- "align": true
+ "align": true,
+ "typography": {
+ "fontSize": true,
+ "lineHeight": true,
+ "__experimentalFontFamily": true,
+ "__experimentalFontWeight": true,
+ "__experimentalFontStyle": true,
+ "__experimentalTextTransform": true,
+ "__experimentalLetterSpacing": true,
+ "__experimentalDefaultControls": {
+ "fontSize": true
+ }
+ }
},
"style": "wp-block-calendar"
}
diff --git a/packages/block-library/src/calendar/index.js b/packages/block-library/src/calendar/index.js
index a8fed300b171e..7fff20826e271 100644
--- a/packages/block-library/src/calendar/index.js
+++ b/packages/block-library/src/calendar/index.js
@@ -6,6 +6,7 @@ import { calendar as icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
+import initBlock from '../utils/init-block';
import metadata from './block.json';
import edit from './edit';
import transforms from './transforms';
@@ -20,3 +21,5 @@ export const settings = {
edit,
transforms,
};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/calendar/init.js b/packages/block-library/src/calendar/init.js
new file mode 100644
index 0000000000000..79f0492c2cb2f
--- /dev/null
+++ b/packages/block-library/src/calendar/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json
index c24641655899a..adf28dc42b4f0 100644
--- a/packages/block-library/src/categories/block.json
+++ b/packages/block-library/src/categories/block.json
@@ -31,6 +31,10 @@
"supports": {
"align": true,
"html": false,
+ "spacing": {
+ "margin": true,
+ "padding": true
+ },
"typography": {
"fontSize": true,
"lineHeight": true,
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index f6e70618a84cd..db014bac0fd15 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -2,6 +2,7 @@
* External dependencies
*/
import { unescape } from 'lodash';
+import classnames from 'classnames';
/**
* WordPress dependencies
@@ -28,17 +29,20 @@ export default function CategoriesEdit( {
showEmpty,
},
setAttributes,
+ className,
} ) {
const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
const query = { per_page: -1, hide_empty: ! showEmpty, context: 'view' };
if ( showOnlyTopLevel ) {
query.parent = 0;
}
+
const { records: categories, isResolving } = useEntityRecords(
'taxonomy',
'category',
query
);
+
const getCategoriesList = ( parentId ) => {
if ( ! categories?.length ) {
return [];
@@ -48,48 +52,41 @@ export default function CategoriesEdit( {
}
return categories.filter( ( { parent } ) => parent === parentId );
};
- const getCategoryListClassName = ( level ) => {
- return `wp-block-categories__list wp-block-categories__list-level-${ level }`;
- };
+
const toggleAttribute = ( attributeName ) => ( newValue ) =>
setAttributes( { [ attributeName ]: newValue } );
+
const renderCategoryName = ( name ) =>
! name ? __( '(Untitled)' ) : unescape( name ).trim();
const renderCategoryList = () => {
const parentId = showHierarchy ? 0 : null;
const categoriesList = getCategoriesList( parentId );
- return (
-
+
{ renderCategoryName( name ) }
- { showPostCounts && (
-
- { ` (${ count })` }
-
- ) }
+ { showPostCounts && ` (${ count })` }
{ showHierarchy && !! childCategories.length && (
-
);
};
+
const renderCategoryDropdown = () => {
const parentId = showHierarchy ? 0 : null;
const categoriesList = getCategoriesList( parentId );
@@ -98,10 +95,8 @@ export default function CategoriesEdit( {
{ __( 'Categories' ) }
-
= 1 )
) {
+ const { id, url, ...restLinkProps } = currentLink;
onSelect(
// Some direct entries don't have types or IDs, and we still need to clear the previous ones.
- { ...omit( currentLink, 'id', 'url' ), ...suggestion },
+ { ...restLinkProps, ...suggestion },
suggestion
);
}
diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js
index 62dcf6f61fd84..a1ef09d2fc361 100644
--- a/packages/block-editor/src/components/link-control/search-item.js
+++ b/packages/block-editor/src/components/link-control/search-item.js
@@ -9,7 +9,44 @@ import classnames from 'classnames';
import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
import { __ } from '@wordpress/i18n';
import { Button, TextHighlight } from '@wordpress/components';
-import { Icon, globe } from '@wordpress/icons';
+import {
+ Icon,
+ globe,
+ page,
+ tag,
+ postList,
+ category,
+ file,
+} from '@wordpress/icons';
+
+const ICONS_MAP = {
+ post: postList,
+ page,
+ post_tag: tag,
+ category,
+ attachment: file,
+};
+
+function SearchItemIcon( { isURL, suggestion } ) {
+ let icon = null;
+
+ if ( isURL ) {
+ icon = globe;
+ } else if ( suggestion.type in ICONS_MAP ) {
+ icon = ICONS_MAP[ suggestion.type ];
+ }
+
+ if ( icon ) {
+ return (
+
{ ( { ref, tabIndex, onFocus } ) => (
@@ -283,7 +302,7 @@ function ListViewBlock( {
{ showBlockActions && (
{ ( { ref, tabIndex, onFocus } ) => (
{
+ return !! (
+ parentId &&
+ select( blockEditorStore ).getTemplateLock( parentId ) ===
+ 'noContent'
+ );
+ },
+ [ parentId ]
+ );
+
const { expandedState, draggedClientIds } = useListViewContext();
+ if ( isContentLocked ) {
+ return null;
+ }
+
const filteredBlocks = blocks.filter( Boolean );
const blockCount = filteredBlocks.length;
let nextPosition = listPosition;
@@ -118,9 +139,10 @@ function ListViewBranch( props ) {
: `${ position }`;
const hasNestedBlocks = !! innerBlocks?.length;
- const shouldExpand = hasNestedBlocks
- ? expandedState[ clientId ] ?? isExpanded
- : undefined;
+ const shouldExpand =
+ hasNestedBlocks && shouldShowInnerBlocks
+ ? expandedState[ clientId ] ?? isExpanded
+ : undefined;
const isDragged = !! draggedClientIds?.includes( clientId );
@@ -161,6 +183,7 @@ function ListViewBranch( props ) {
) }
{ hasNestedBlocks && shouldExpand && ! isDragged && (
{
- const { getGlobalBlockCount, getClientIdsOfDescendants } =
- select( blockEditorStore );
+ const {
+ getGlobalBlockCount,
+ getClientIdsOfDescendants,
+ __unstableGetEditorMode,
+ } = select( blockEditorStore );
const draggedBlockCount =
draggedClientIds?.length > 0
? getClientIdsOfDescendants( draggedClientIds ).length + 1
: 0;
return {
visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
+ shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
};
},
[ draggedClientIds ]
@@ -193,6 +197,7 @@ function ListView(
fixedListWindow={ fixedListWindow }
selectedClientIds={ selectedClientIds }
isExpanded={ isExpanded }
+ shouldShowInnerBlocks={ shouldShowInnerBlocks }
/>
diff --git a/packages/block-editor/src/components/list-view/use-block-selection.js b/packages/block-editor/src/components/list-view/use-block-selection.js
index 417fb43621231..59aaaeacb01d4 100644
--- a/packages/block-editor/src/components/list-view/use-block-selection.js
+++ b/packages/block-editor/src/components/list-view/use-block-selection.js
@@ -32,7 +32,6 @@ export default function useBlockSelection() {
const updateBlockSelection = useCallback(
async ( event, clientId, destinationClientId ) => {
if ( ! event?.shiftKey ) {
- await clearSelectedBlock();
selectBlock( clientId );
return;
}
diff --git a/packages/block-editor/src/components/media-placeholder/test/index.js b/packages/block-editor/src/components/media-placeholder/test/index.js
index 5dacf563e56d7..dc567b107fa00 100644
--- a/packages/block-editor/src/components/media-placeholder/test/index.js
+++ b/packages/block-editor/src/components/media-placeholder/test/index.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
/**
* Internal dependencies
@@ -13,6 +13,6 @@ jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {} ) );
describe( 'MediaPlaceholder', () => {
it( 'renders successfully when allowedTypes property is not specified', () => {
- expect( () => mount(
@@ -414,19 +424,6 @@ function RichTextWrapper(
/>
);
-
- if ( ! wrapperClassName ) {
- return content;
- }
-
- deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
- since: '5.4',
- alternative: 'className prop or create your own wrapper div',
- version: '6.2',
- } );
-
- const className = classnames( 'block-editor-rich-text', wrapperClassName );
- return { value } ;
if ( Tag ) {
- return { content } ;
+ const { format, ...restProps } = props;
+ return { content } ;
}
return content;
diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
index 2c21f63ee8c27..45826129017a8 100644
--- a/packages/block-editor/src/components/rich-text/index.native.js
+++ b/packages/block-editor/src/components/rich-text/index.native.js
@@ -2,7 +2,6 @@
* External dependencies
*/
import classnames from 'classnames';
-import { omit } from 'lodash';
/**
* WordPress dependencies
@@ -37,7 +36,6 @@ import {
toHTMLString,
slice,
} from '@wordpress/rich-text';
-import deprecated from '@wordpress/deprecated';
import { isURL } from '@wordpress/url';
/**
@@ -59,7 +57,6 @@ import {
} from './utils';
import EmbedHandlerPicker from './embed-handler-picker';
-const wrapperClasses = 'block-editor-rich-text';
const classes = 'block-editor-rich-text__editable';
function RichTextWrapper(
@@ -114,6 +111,7 @@ function RichTextWrapper(
disableSuggestions,
disableAutocorrection,
containerWidth,
+ onEnter: onCustomEnter,
...props
},
forwardedRef
@@ -345,6 +343,10 @@ function RichTextWrapper(
}
}
+ if ( onCustomEnter ) {
+ onCustomEnter();
+ }
+
if ( multiline ) {
if ( shiftKey ) {
if ( ! disableLineBreaks ) {
@@ -578,7 +580,7 @@ function RichTextWrapper(
const mergedRef = useMergeRefs( [ forwardedRef, fallbackRef ] );
- const content = (
+ return (
);
-
- if ( ! wrapperClassName ) {
- return content;
- }
-
- deprecated( 'wp.blockEditor.RichText wrapperClassName prop', {
- since: '5.4',
- alternative: 'className prop or create your own wrapper div',
- version: '6.2',
- } );
-
- return (
- { value } ;
if ( Tag ) {
- return { content } ;
+ const { format, ...restProps } = props;
+ return { content } ;
}
return content;
diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
index 2a9ed938e043c..c0d2573b42e80 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
@@ -30,6 +30,7 @@ import {
LABELS,
getSliderValueFromPreset,
getCustomValueFromPreset,
+ getPresetValueFromCustomValue,
isValueSpacingPreset,
} from './utils';
@@ -42,6 +43,9 @@ export default function SpacingInputControl( {
type,
minimumCustomValue,
} ) {
+ // Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
+ value = getPresetValueFromCustomValue( value, spacingSizes );
+
let selectListSizes = spacingSizes;
const showRangeControl = spacingSizes.length <= 8;
@@ -216,6 +220,7 @@ export default function SpacingInputControl( {
label={ ariaLabel }
hideLabelFromVision={ true }
className="components-spacing-sizes-control__custom-value-input"
+ style={ { gridColumn: '1' } }
/>
{
} );
} );
+describe( 'getPresetValueFromCustomValue', () => {
+ const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+ it( 'should return original value if a string in spacing presets var format', () => {
+ expect(
+ getPresetValueFromCustomValue(
+ 'var:preset|spacing|80',
+ spacingSizes
+ )
+ ).toBe( 'var:preset|spacing|80' );
+ } );
+ it( 'should return value constructed from matching spacingSizes array entry if value matches sizes', () => {
+ expect( getPresetValueFromCustomValue( '8px', spacingSizes ) ).toBe(
+ 'var:preset|spacing|20'
+ );
+ } );
+ it( 'should return values as-is if no matching preset in spacingSizes array', () => {
+ expect(
+ getPresetValueFromCustomValue( '1.125rem', spacingSizes )
+ ).toBe( '1.125rem' );
+ } );
+} );
+
describe( 'getSpacingPresetCssVar', () => {
it( 'should return original value if not a string in spacing presets var format', () => {
expect( getSpacingPresetCssVar( '20px' ) ).toBe( '20px' );
@@ -144,6 +167,9 @@ describe( 'isValuesDefined', () => {
it( 'should return false if values are not defined', () => {
expect( isValuesDefined( undefinedValues ) ).toBe( false );
} );
+ it( 'should return false if values is passed in as null', () => {
+ expect( isValuesDefined( null ) ).toBe( false );
+ } );
const definedValues = {
top: 'var:preset|spacing|30',
bottom: 'var:preset|spacing|20',
diff --git a/packages/block-editor/src/components/spacing-sizes-control/utils.js b/packages/block-editor/src/components/spacing-sizes-control/utils.js
index 2f824e25cacf6..8236d743ab32f 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/utils.js
@@ -43,6 +43,33 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
return spacingSize?.size;
}
+/**
+ * Converts a custom value to preset value if one can be found.
+ *
+ * Returns value as-is if no match is found.
+ *
+ * @param {string} value Value to convert
+ * @param {Array} spacingSizes Array of the current spacing preset objects
+ *
+ * @return {string} The preset value if it can be found.
+ */
+export function getPresetValueFromCustomValue( value, spacingSizes ) {
+ // Return value as-is if it is already a preset;
+ if ( isValueSpacingPreset( value ) ) {
+ return value;
+ }
+
+ const spacingMatch = spacingSizes.find(
+ ( size ) => String( size.size ) === String( value )
+ );
+
+ if ( spacingMatch?.slug ) {
+ return `var:preset|spacing|${ spacingMatch.slug }`;
+ }
+
+ return value;
+}
+
/**
* Converts a spacing preset into a custom value.
*
@@ -181,15 +208,15 @@ export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
* @return {boolean} Whether values are defined.
*/
export function isValuesDefined( values ) {
- return (
- values !== undefined &&
- ! isEmpty(
- Object.values( values ).filter(
- // Switching units when input is empty causes values only
- // containing units. This gives false positive on mixed values
- // unless filtered.
- ( value ) => !! value && /\d/.test( value )
- )
+ if ( values === undefined || values === null ) {
+ return false;
+ }
+ return ! isEmpty(
+ Object.values( values ).filter(
+ // Switching units when input is empty causes values only
+ // containing units. This gives false positive on mixed values
+ // unless filtered.
+ ( value ) => !! value && /\d/.test( value )
)
);
}
diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
index 9edfb9b4a0195..05f92a8b8e0f6 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -1,7 +1,15 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
-import { BaseControl, Button } from '@wordpress/components';
+import {
+ __experimentalToggleGroupControl as ToggleGroupControl,
+ __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
@@ -21,38 +29,41 @@ const TEXT_DECORATIONS = [
/**
* Control to facilitate text decoration selections.
*
- * @param {Object} props Component props.
- * @param {string} props.value Currently selected text decoration.
- * @param {Function} props.onChange Handles change in text decoration selection.
+ * @param {Object} props Component props.
+ * @param {string} props.value Currently selected text decoration.
+ * @param {Function} props.onChange Handles change in text decoration selection.
+ * @param {string} [props.className] Additional class name to apply.
*
* @return {WPElement} Text decoration control.
*/
-export default function TextDecorationControl( { value, onChange } ) {
+export default function TextDecorationControl( {
+ value,
+ onChange,
+ className,
+ ...props
+} ) {
return (
-
+
+ { TEXT_DECORATIONS.map( ( textDecoration ) => {
+ return (
+
);
}
diff --git a/packages/block-editor/src/components/text-decoration-control/stories/index.js b/packages/block-editor/src/components/text-decoration-control/stories/index.js
new file mode 100644
index 0000000000000..cb50e4cd6c6f7
--- /dev/null
+++ b/packages/block-editor/src/components/text-decoration-control/stories/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextDecorationControl from '../';
+
+export default {
+ title: 'BlockEditor/TextDecorationControl',
+ component: TextDecorationControl,
+ argTypes: {
+ onChange: { action: 'onChange' },
+ size: {
+ options: [ 'default', '__unstable-large' ],
+ control: { type: 'radio' },
+ },
+ },
+};
+
+const Template = ( { onChange, ...args } ) => {
+ const [ value, setValue ] = useState();
+ return (
+ {
+ onChange( ...changeArgs );
+ setValue( ...changeArgs );
+ } }
+ value={ value }
+ />
+ );
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-decoration-control/style.scss b/packages/block-editor/src/components/text-decoration-control/style.scss
deleted file mode 100644
index f5d5848d3d303..0000000000000
--- a/packages/block-editor/src/components/text-decoration-control/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.block-editor-text-decoration-control {
- flex: 0 0 50%;
-
- legend {
- margin-bottom: 8px;
- }
-
- .block-editor-text-decoration-control__buttons {
- display: inline-flex;
- margin-bottom: 24px;
-
- .components-button.has-icon {
- min-width: 24px;
- padding: 0;
- margin-right: 4px;
- }
- }
-}
diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js
index 6d85ae7b421b7..f9411f4717d46 100644
--- a/packages/block-editor/src/components/text-transform-control/index.js
+++ b/packages/block-editor/src/components/text-transform-control/index.js
@@ -1,7 +1,13 @@
+/**
+ * External dependencies
+ */
/**
* WordPress dependencies
*/
-import { BaseControl, Button } from '@wordpress/components';
+import {
+ __experimentalToggleGroupControl as ToggleGroupControl,
+ __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
formatCapitalize,
@@ -36,32 +42,26 @@ const TEXT_TRANSFORMS = [
*
* @return {WPElement} Text transform control.
*/
-export default function TextTransformControl( { value, onChange } ) {
+export default function TextTransformControl( { value, onChange, ...props } ) {
return (
-
+
+ { TEXT_TRANSFORMS.map( ( textTransform ) => {
+ return (
+
);
}
diff --git a/packages/block-editor/src/components/text-transform-control/stories/index.js b/packages/block-editor/src/components/text-transform-control/stories/index.js
new file mode 100644
index 0000000000000..3219d714257e8
--- /dev/null
+++ b/packages/block-editor/src/components/text-transform-control/stories/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextTransformControl from '../';
+
+export default {
+ title: 'BlockEditor/TextTransformControl',
+ component: TextTransformControl,
+ argTypes: {
+ onChange: { action: 'onChange' },
+ size: {
+ options: [ 'default', '__unstable-large' ],
+ control: { type: 'radio' },
+ },
+ },
+};
+
+const Template = ( { onChange, ...args } ) => {
+ const [ value, setValue ] = useState();
+ return (
+ {
+ onChange( ...changeArgs );
+ setValue( ...changeArgs );
+ } }
+ value={ value }
+ />
+ );
+};
+
+export const Default = Template.bind( {} );
diff --git a/packages/block-editor/src/components/text-transform-control/style.scss b/packages/block-editor/src/components/text-transform-control/style.scss
deleted file mode 100644
index 09280029a971a..0000000000000
--- a/packages/block-editor/src/components/text-transform-control/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.block-editor-text-transform-control {
- flex: 0 0 50%;
-
- legend {
- margin-bottom: 8px;
- }
-
- .block-editor-text-transform-control__buttons {
- display: inline-flex;
- margin-bottom: 24px;
-
- .components-button.has-icon {
- min-width: 24px;
- padding: 0;
- margin-right: 4px;
- }
- }
-}
diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js
index df43a5e172e28..3da6ebc5a9c46 100644
--- a/packages/block-editor/src/components/tool-selector/index.js
+++ b/packages/block-editor/src/components/tool-selector/index.js
@@ -31,15 +31,11 @@ const selectIcon = (
);
function ToolSelector( props, ref ) {
- const isNavigationTool = useSelect(
- ( select ) => select( blockEditorStore ).isNavigationMode(),
+ const mode = useSelect(
+ ( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
[]
);
- const { setNavigationMode } = useDispatch( blockEditorStore );
-
- const onSwitchMode = ( mode ) => {
- setNavigationMode( mode === 'edit' ? false : true );
- };
+ const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
return (
{ selectIcon }
diff --git a/packages/block-editor/src/components/url-input/test/button.js b/packages/block-editor/src/components/url-input/test/button.js
index 04601dfea51c4..b0288cd8b2766 100644
--- a/packages/block-editor/src/components/url-input/test/button.js
+++ b/packages/block-editor/src/components/url-input/test/button.js
@@ -1,91 +1,165 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
-import TestUtils from 'react-dom/test-utils';
-import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* Internal dependencies
*/
-import URLInput from '../';
import URLInputButton from '../button';
-import '../../../store';
-
describe( 'URLInputButton', () => {
- const clickEditLink = ( wrapper ) =>
- wrapper
- .find( 'ForwardRef(Button).components-toolbar__control' )
- .simulate( 'click' );
-
- it( 'should have a valid class name in the wrapper tag', () => {
- const wrapper = shallow(
-
-
+ { justificationOptions.map( ( { value, icon, label } ) => {
+ return (
+
);
},
@@ -116,17 +146,25 @@ export default {
hasBlockGapSupport,
layoutDefinitions,
} ) {
- const { contentSize, wideSize } = layout;
- const blockGapStyleValue = getGapBoxControlValueFromStyle(
- style?.spacing?.blockGap
- );
+ const { contentSize, wideSize, justifyContent } = layout;
+ const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+
// If a block's block.json skips serialization for spacing or
// spacing.blockGap, don't apply the user-defined value to the styles.
- const blockGapValue =
- blockGapStyleValue?.top &&
- ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
- ? blockGapStyleValue?.top
- : '';
+ let blockGapValue = '';
+ if ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {
+ // If an object is provided only use the 'top' value for this kind of gap.
+ if ( blockGapStyleValue?.top ) {
+ blockGapValue = getGapCSSValue( blockGapStyleValue?.top );
+ } else if ( typeof blockGapStyleValue === 'string' ) {
+ blockGapValue = getGapCSSValue( blockGapStyleValue );
+ }
+ }
+
+ const marginLeft =
+ justifyContent === 'left' ? '0 !important' : 'auto !important';
+ const marginRight =
+ justifyContent === 'right' ? '0 !important' : 'auto !important';
let output =
!! contentSize || !! wideSize
@@ -136,8 +174,8 @@ export default {
'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
) } {
max-width: ${ contentSize ?? wideSize };
- margin-left: auto !important;
- margin-right: auto !important;
+ margin-left: ${ marginLeft };
+ margin-right: ${ marginRight }t;
}
${ appendSelectors( selector, '> .alignwide' ) } {
max-width: ${ wideSize ?? contentSize };
@@ -148,6 +186,20 @@ export default {
`
: '';
+ if ( justifyContent === 'left' ) {
+ output += `${ appendSelectors(
+ selector,
+ '> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
+ ) }
+ { margin-left: ${ marginLeft }; }`;
+ } else if ( justifyContent === 'right' ) {
+ output += `${ appendSelectors(
+ selector,
+ '> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
+ ) }
+ { margin-right: ${ marginRight }; }`;
+ }
+
// If there is custom padding, add negative margins for alignfull blocks.
if ( style?.spacing?.padding ) {
// The style object might be storing a preset so we need to make sure we get a usable value.
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index fb0eb5ecde093..ecc6779b9128d 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -6,9 +6,8 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-
import { getBlockGapCSS, getAlignmentsInfo } from './utils';
-import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getGapCSSValue } from '../hooks/gap';
import { shouldSkipSerialization } from '../hooks/utils';
export default {
@@ -27,16 +26,19 @@ export default {
hasBlockGapSupport,
layoutDefinitions,
} ) {
- const blockGapStyleValue = getGapBoxControlValueFromStyle(
- style?.spacing?.blockGap
- );
+ const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+
// If a block's block.json skips serialization for spacing or
// spacing.blockGap, don't apply the user-defined value to the styles.
- const blockGapValue =
- blockGapStyleValue?.top &&
- ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
- ? blockGapStyleValue?.top
- : '';
+ let blockGapValue = '';
+ if ( ! shouldSkipSerialization( blockName, 'spacing', 'blockGap' ) ) {
+ // If an object is provided only use the 'top' value for this kind of gap.
+ if ( blockGapStyleValue?.top ) {
+ blockGapValue = getGapCSSValue( blockGapStyleValue?.top );
+ } else if ( typeof blockGapStyleValue === 'string' ) {
+ blockGapValue = getGapCSSValue( blockGapStyleValue );
+ }
+ }
let output = '';
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index b292bf6437c38..52202d05ad81d 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1474,25 +1474,52 @@ export const __unstableMarkAutomaticChange =
/**
* Action that enables or disables the navigation mode.
*
- * @param {string} isNavigationMode Enable/Disable navigation mode.
+ * @param {boolean} isNavigationMode Enable/Disable navigation mode.
*/
export const setNavigationMode =
( isNavigationMode = true ) =>
( { dispatch } ) => {
- dispatch( { type: 'SET_NAVIGATION_MODE', isNavigationMode } );
+ dispatch.__unstableSetEditorMode(
+ isNavigationMode ? 'navigation' : 'edit'
+ );
+ };
+
+/**
+ * Action that sets the editor mode
+ *
+ * @param {string} mode Editor mode
+ */
+export const __unstableSetEditorMode =
+ ( mode ) =>
+ ( { dispatch, select } ) => {
+ // When switching to zoom-out mode, we need to select the root block
+ if ( mode === 'zoom-out' ) {
+ const firstSelectedClientId = select.getBlockSelectionStart();
+ if ( firstSelectedClientId ) {
+ dispatch.selectBlock(
+ select.getBlockHierarchyRootClientId(
+ firstSelectedClientId
+ )
+ );
+ }
+ }
- if ( isNavigationMode ) {
+ dispatch( { type: 'SET_EDITOR_MODE', mode } );
+
+ if ( mode === 'navigation' ) {
speak(
__(
'You are currently in navigation mode. Navigate blocks using the Tab key and Arrow keys. Use Left and Right Arrow keys to move between nesting levels. To exit navigation mode and edit the selected block, press Enter.'
)
);
- } else {
+ } else if ( mode === 'edit' ) {
speak(
__(
'You are currently in edit mode. To return to the navigation mode, press Escape.'
)
);
+ } else if ( mode === 'zoom-out' ) {
+ speak( __( 'You are currently in zoom-out mode.' ) );
}
};
@@ -1673,3 +1700,17 @@ export function setBlockVisibility( updates ) {
updates,
};
}
+
+/**
+ * Action that sets whether a block is being temporaritly edited as blocks.
+ *
+ * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporaritly edited as blocks.
+ */
+export function __unstableSetTemporarilyEditingAsBlocks(
+ temporarilyEditingAsBlocks
+) {
+ return {
+ type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
+ temporarilyEditingAsBlocks,
+ };
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index 534a69c67f138..2bdecc15d2a07 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -4,8 +4,6 @@
import {
flow,
reduce,
- first,
- last,
omit,
without,
mapValues,
@@ -1004,13 +1002,10 @@ export const blocks = flow(
case 'MOVE_BLOCKS_UP': {
const { clientIds, rootClientId = '' } = action;
- const firstClientId = first( clientIds );
+ const firstClientId = clientIds[ 0 ];
const subState = state[ rootClientId ];
- if (
- ! subState.length ||
- firstClientId === first( subState )
- ) {
+ if ( ! subState.length || firstClientId === subState[ 0 ] ) {
return state;
}
@@ -1029,11 +1024,14 @@ export const blocks = flow(
case 'MOVE_BLOCKS_DOWN': {
const { clientIds, rootClientId = '' } = action;
- const firstClientId = first( clientIds );
- const lastClientId = last( clientIds );
+ const firstClientId = clientIds[ 0 ];
+ const lastClientId = clientIds[ clientIds.length - 1 ];
const subState = state[ rootClientId ];
- if ( ! subState.length || lastClientId === last( subState ) ) {
+ if (
+ ! subState.length ||
+ lastClientId === subState[ subState.length - 1 ]
+ ) {
return state;
}
@@ -1610,21 +1608,21 @@ export const blockListSettings = ( state = {}, action ) => {
};
/**
- * Reducer returning whether the navigation mode is enabled or not.
+ * Reducer returning which mode is enabled.
*
* @param {string} state Current state.
* @param {Object} action Dispatched action.
*
* @return {string} Updated state.
*/
-export function isNavigationMode( state = false, action ) {
- // Let inserting block always trigger Edit mode.
- if ( action.type === 'INSERT_BLOCKS' ) {
- return false;
+export function editorMode( state = 'edit', action ) {
+ // Let inserting block in navigation mode always trigger Edit mode.
+ if ( action.type === 'INSERT_BLOCKS' && state === 'navigation' ) {
+ return 'edit';
}
- if ( action.type === 'SET_NAVIGATION_MODE' ) {
- return action.isNavigationMode;
+ if ( action.type === 'SET_EDITOR_MODE' ) {
+ return action.mode;
}
return state;
@@ -1639,13 +1637,11 @@ export function isNavigationMode( state = false, action ) {
* @return {string|null} Updated state.
*/
export function hasBlockMovingClientId( state = null, action ) {
- // Let inserting block always trigger Edit mode.
-
if ( action.type === 'SET_BLOCK_MOVING_MODE' ) {
return action.hasBlockMovingClientId;
}
- if ( action.type === 'SET_NAVIGATION_MODE' ) {
+ if ( action.type === 'SET_EDITOR_MODE' ) {
return null;
}
@@ -1778,6 +1774,21 @@ export function lastBlockInserted( state = {}, action ) {
return state;
}
+/**
+ * Reducer returning the block that is eding temporarily edited as blocks.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function temporarilyEditingAsBlocks( state = '', action ) {
+ if ( action.type === 'SET_TEMPORARILY_EDITING_AS_BLOCKS' ) {
+ return action.temporarilyEditingAsBlocks;
+ }
+ return state;
+}
+
export default combineReducers( {
blocks,
isTyping,
@@ -1793,9 +1804,10 @@ export default combineReducers( {
settings,
preferences,
lastBlockAttributesChange,
- isNavigationMode,
+ editorMode,
hasBlockMovingClientId,
automaticChangeStatus,
highlightedBlock,
lastBlockInserted,
+ temporarilyEditingAsBlocks,
} );
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 030977812dcd4..07ffcc53bed39 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1,17 +1,7 @@
/**
* External dependencies
*/
-import {
- castArray,
- first,
- last,
- map,
- reduce,
- some,
- find,
- filter,
- orderBy,
-} from 'lodash';
+import { castArray, map, reduce, some, find, filter, orderBy } from 'lodash';
import createSelector from 'rememo';
/**
@@ -798,7 +788,7 @@ export const getMultiSelectedBlocks = createSelector(
* @return {?string} First block client ID in the multi-selection set.
*/
export function getFirstMultiSelectedBlockClientId( state ) {
- return first( getMultiSelectedBlockClientIds( state ) ) || null;
+ return getMultiSelectedBlockClientIds( state )[ 0 ] || null;
}
/**
@@ -810,7 +800,8 @@ export function getFirstMultiSelectedBlockClientId( state ) {
* @return {?string} Last block client ID in the multi-selection set.
*/
export function getLastMultiSelectedBlockClientId( state ) {
- return last( getMultiSelectedBlockClientIds( state ) ) || null;
+ const selectedClientIds = getMultiSelectedBlockClientIds( state );
+ return selectedClientIds[ selectedClientIds.length - 1 ] || null;
}
/**
@@ -948,6 +939,14 @@ export function __unstableIsSelectionCollapsed( state ) {
);
}
+export function __unstableSelectionHasUnmergeableBlock( state ) {
+ return getSelectedBlockClientIds( state ).some( ( clientId ) => {
+ const blockName = getBlockName( state, clientId );
+ const blockType = getBlockType( blockName );
+ return ! blockType.merge;
+ } );
+}
+
/**
* Check whether the selection is mergeable.
*
@@ -1009,19 +1008,19 @@ export function __unstableIsSelectionMergeable( state, isForward ) {
? selectionStart.clientId
: selectionEnd.clientId;
- const targetBlock = getBlock( state, targetBlockClientId );
- const targetBlockType = getBlockType( targetBlock.name );
+ const targetBlockName = getBlockName( state, targetBlockClientId );
+ const targetBlockType = getBlockType( targetBlockName );
if ( ! targetBlockType.merge ) return false;
const blockToMerge = getBlock( state, blockToMergeClientId );
// It's mergeable if the blocks are of the same type.
- if ( blockToMerge.name === targetBlock.name ) return true;
+ if ( blockToMerge.name === targetBlockName ) return true;
// If the blocks are of a different type, try to transform the block being
// merged into the same type of block.
- const blocksToMerge = switchToBlockType( blockToMerge, targetBlock.name );
+ const blocksToMerge = switchToBlockType( blockToMerge, targetBlockName );
return blocksToMerge && blocksToMerge.length;
}
@@ -2542,7 +2541,18 @@ function getReusableBlocks( state ) {
* @return {boolean} Is navigation mode enabled.
*/
export function isNavigationMode( state ) {
- return state.isNavigationMode;
+ return state.editorMode === 'navigation';
+}
+
+/**
+ * Returns the current editor mode.
+ *
+ * @param {Object} state Editor state.
+ *
+ * @return {string} the editor mode.
+ */
+export function __unstableGetEditorMode( state ) {
+ return state.editorMode;
}
/**
@@ -2625,7 +2635,7 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector(
);
if ( entityAreaParents ) {
// Last parent closest/most interior.
- return last( entityAreaParents );
+ return entityAreaParents[ entityAreaParents.length - 1 ];
}
return null;
},
@@ -2679,3 +2689,72 @@ export const __unstableGetVisibleBlocks = createSelector(
},
( state ) => [ state.blocks.visibility ]
);
+
+export const __unstableGetContentLockingParent = createSelector(
+ ( state, clientId ) => {
+ let current = clientId;
+ let result;
+ while ( !! state.blocks.parents[ current ] ) {
+ current = state.blocks.parents[ current ];
+ if ( getTemplateLock( state, current ) === 'noContent' ) {
+ result = current;
+ }
+ }
+ return result;
+ },
+ ( state ) => [ state.blocks.parents, state.blockListSettings ]
+);
+
+export function __unstableGetTemporarilyEditingAsBlocks( state ) {
+ return state.temporarilyEditingAsBlocks;
+}
+
+export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
+ // If the block editing is locked, the block overlay is always active.
+ if ( ! canEditBlock( state, clientId ) ) {
+ return true;
+ }
+
+ const editorMode = __unstableGetEditorMode( state );
+
+ // In zoom-out mode, the block overlay is always active for top level blocks.
+ if (
+ editorMode === 'zoom-out' &&
+ ! getBlockRootClientId( state, clientId )
+ ) {
+ return true;
+ }
+
+ // In navigation mode, the block overlay is active when the block is not
+ // selected (and doesn't contain a selected child). The same behavior is
+ // also enabled in all modes for blocks that have controlled children
+ // (reusable block, template part, navigation), unless explicitly disabled
+ // with `supports.__experimentalDisableBlockOverlay`.
+ const blockSupportDisable = hasBlockSupport(
+ getBlockName( state, clientId ),
+ '__experimentalDisableBlockOverlay',
+ false
+ );
+ const shouldEnableIfUnselected =
+ editorMode === 'navigation' ||
+ ( blockSupportDisable
+ ? false
+ : areInnerBlocksControlled( state, clientId ) );
+
+ return (
+ shouldEnableIfUnselected &&
+ ! isBlockSelected( state, clientId ) &&
+ ! hasSelectedInnerBlock( state, clientId, true )
+ );
+}
+
+export function __unstableIsWithinBlockOverlay( state, clientId ) {
+ let parent = state.blocks.parents[ clientId ];
+ while ( !! parent ) {
+ if ( __unstableHasActiveBlockOverlayActive( state, parent ) ) {
+ return true;
+ }
+ parent = state.blocks.parents[ parent ];
+ }
+ return false;
+}
diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js
index a16d77d838b6a..8100048b3dc09 100644
--- a/packages/block-editor/src/store/test/reducer.js
+++ b/packages/block-editor/src/store/test/reducer.js
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
-import { omit } from 'lodash';
import deepFreeze from 'deep-freeze';
/**
@@ -260,7 +259,8 @@ describe( 'state', () => {
const state = blocks( existingState, action );
- expect( omit( state, [ 'tree' ] ) ).toEqual( {
+ const { tree, ...restState } = state;
+ expect( restState ).toEqual( {
isPersistentChange: true,
isIgnoredChange: false,
byClientId: {
@@ -342,7 +342,8 @@ describe( 'state', () => {
const state = blocks( existingState, action );
- expect( omit( state, [ 'tree' ] ) ).toEqual( {
+ const { tree, ...restState } = state;
+ expect( restState ).toEqual( {
isPersistentChange: true,
isIgnoredChange: false,
byClientId: {
@@ -466,7 +467,8 @@ describe( 'state', () => {
const state = blocks( existingState, action );
- expect( omit( state, [ 'tree' ] ) ).toEqual( {
+ const { tree, ...restState } = state;
+ expect( restState ).toEqual( {
isPersistentChange: true,
isIgnoredChange: false,
byClientId: {
@@ -603,7 +605,8 @@ describe( 'state', () => {
const state = blocks( existingState, action );
- expect( omit( state, [ 'tree' ] ) ).toEqual( {
+ const { tree, ...restState } = state;
+ expect( restState ).toEqual( {
isPersistentChange: true,
isIgnoredChange: false,
byClientId: {
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 614f611cec2af..b2c08654ebea6 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -46,8 +46,6 @@
@import "./components/responsive-block-control/style.scss";
@import "./components/rich-text/style.scss";
@import "./components/skip-to-selected-block/style.scss";
-@import "./components/text-transform-control/style.scss";
-@import "./components/text-decoration-control/style.scss";
@import "./components/tool-selector/style.scss";
@import "./components/url-input/style.scss";
@import "./components/url-popover/style.scss";
diff --git a/packages/block-editor/src/utils/parse-css-unit-to-px.js b/packages/block-editor/src/utils/parse-css-unit-to-px.js
index 31975592484c2..134e19b06c839 100644
--- a/packages/block-editor/src/utils/parse-css-unit-to-px.js
+++ b/packages/block-editor/src/utils/parse-css-unit-to-px.js
@@ -221,7 +221,7 @@ export function getPxFromCssUnit( cssUnit, options = {} ) {
let parsedUnit = parseUnit( cssUnit );
if ( ! parsedUnit.unit ) {
- parsedUnit = parseUnitFunction( cssUnit, options );
+ parsedUnit = parseUnitFunction( cssUnit );
}
if ( isMathExpression( cssUnit ) && ! parsedUnit.unit ) {
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 13d42304fbc8e..0c30aa8b6bdad 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,10 @@
## Unreleased
+### New Feature
+
+- Made it possible to import individual blocks ([#42258](https://github.com/WordPress/gutenberg/pull/42258)). Check [README](./README.md#loading-individual-blocks) for more information.
+
## 7.13.0 (2022-08-24)
### Bug Fix
diff --git a/packages/block-library/README.md b/packages/block-library/README.md
index ffe7f81f9f080..96ec2d8963b3c 100644
--- a/packages/block-library/README.md
+++ b/packages/block-library/README.md
@@ -12,62 +12,6 @@ npm install @wordpress/block-library --save
_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
-## Building JavaScript for the browser
-
-If a `view.js` file (or a file prefixed with `view`, e.g. `view-example.js`) is present in the block's directory, this file will be built along other assets, making it available to load from the browser.
-
-This enables us to, for instance, load this file when the block is present on the page in two ways:
-
-1. Using the block's `render_callback`:
-
-```php
-function render_block_my_block() {
- $script_path = __DIR__ . '/my-block/view.js';
-
- if ( file_exists( $script_path ) ) {
- wp_enqueue_script(
- 'wp-block-my-block-view',
- plugins_url( 'view.js', $script_path ),
- array(),
- false,
- true
- );
- }
-}
-
-function register_block_my_block() {
- register_block_type(
- __DIR__ . '/my-block',
- array(
- 'render_callback' => 'render_block_my_block',
- )
- );
-}
-
-
-add_action( 'init', 'register_block_my_block' );
-```
-
-2. Using the `render_block` filter:
-
-```php
-function render_block_my_block() {
- $script_path = __DIR__ . '/my-block/view.js';
-
- if ( file_exists( $script_path ) ) {
- wp_enqueue_script(
- 'wp-block-my-block-view',
- plugins_url( 'view.js', $script_path ),
- array(),
- false,
- true
- );
- }
-}
-
-apply_filter( 'render_block', 'render_block_my_block' );
-```
-
## API
@@ -90,6 +34,28 @@ _Parameters_
+## Registering individual blocks
+
+1. When you only care about registering the block when file gets imported:
+
+ ```js
+ import '@wordpress/block-library/build-module/verse/init';
+ ```
+
+2. When you want to use the reference to the block after it gets automatically registered:
+
+ ```js
+ import verseBlock from '@wordpress/block-library/build-module/verse/init';
+ ```
+
+3. When you need a full control over when the block gets registered:
+
+ ```js
+ import { init } from '@wordpress/block-library/build-module/verse';
+
+ const verseBlock = init();
+ ```
+
## Contributing to this package
This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
@@ -100,17 +66,57 @@ To find out more about contributing to this package or Gutenberg as a whole, ple
⚠️ Adding new blocks to this package **requires** additional steps!
-1. Do not forget to register your new block in the [`index.js`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/index.js) file of this package. For example, if you were to add a new core block called `core/blinking-paragraph`, you would have to add something like:
+1. Do not forget to register a new core block in the [`index.js`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/index.js) file of this package. For example, if you were to add the new core block called `core/blinking-paragraph`, you would have to add something like:
```js
// packages/block-library/src/index.js
import * as blinkingParagraph from './blinking-paragraph';
+ ```
+
+ Then add `blinkingParagraph` to the list in the `getAllBlocks()` function.
+
+ If it's experimental, add the following property to `block.json`:
+
+ ```json
+ {
+ "__experimental": "true"
+ }
+ ```
- // Then add `blinkingParagraph` to `getAllBlocks()`
- // If it's experimental, add the following property to block.json:
- __experimental: 'true';
+2. Register the block in the `gutenberg_reregister_core_block_types()` function of the [`lib/blocks.php`](https://github.com/WordPress/gutenberg/blob/trunk/lib/blocks.php) file. Add it to the `block_folders` array if it's a [static block](https://developer.wordpress.org/block-editor/explanations/glossary/#static-block) or to the `block_names` array if it's a [dynamic block](https://developer.wordpress.org/block-editor/explanations/glossary/#dynamic-block).
+
+3. Add `init.js` file to the directory of the new block:
+
+ ```js
+ /**
+ * Internal dependencies
+ */
+ import { init } from './';
+
+ export default init();
```
-2. Register your block in the `gutenberg_reregister_core_block_types()` function of the [`lib/blocks.php`](https://github.com/WordPress/gutenberg/blob/trunk/lib/blocks.php) file. Add it to the `block_folders` array if it's a [static block](https://developer.wordpress.org/block-editor/explanations/glossary/#static-block) or to the `block_names` array if it's a [dynamic block](https://developer.wordpress.org/block-editor/explanations/glossary/#dynamic-block).
+ This file is used when using the option to register individual block from the `@wordpress/block-library` package.
+
+4. If a `view.js` file (or a file prefixed with `view`, e.g. `view-example.js`) is present in the block's directory, this file will be built along other assets, making it available to load from the browser. You only need to reference a `view.min.js` (notice the different file extension) file in the `block.json` file as follows:
+
+ ```json
+ {
+ "viewScript": "file:./view.min.js"
+ }
+ ```
+
+ This file will get automatically loaded when the static block is present on the front end. For dynamic block, you need to manually enqueue the view script in `render_callback` of the block, example:
+
+ ```php
+ function render_block_core_blinking_paragraph( $attributes, $content ) {
+ $should_load_view_script = ! empty( $attributes['isInteractive'] ) && ! wp_script_is( 'wp-block-blinking-paragraph-view' );
+ if ( $should_load_view_script ) {
+ wp_enqueue_script( 'wp-block-blinking-paragraph-view' );
+ }
+
+ return $content;
+ }
+ ```
@@ -222,4 +219,5 @@ function AudioEdit( {
);
}
-export default withNotices( AudioEdit );
+
+export default AudioEdit;
diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
index d3047dd5af445..0d3d05936ef90 100644
--- a/packages/block-library/src/audio/index.js
+++ b/packages/block-library/src/audio/index.js
@@ -6,6 +6,7 @@ import { audio as icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
+import initBlock from '../utils/init-block';
import deprecated from './deprecated';
import edit from './edit';
import metadata from './block.json';
@@ -28,3 +29,5 @@ export const settings = {
edit,
save,
};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/audio/init.js b/packages/block-library/src/audio/init.js
new file mode 100644
index 0000000000000..79f0492c2cb2f
--- /dev/null
+++ b/packages/block-library/src/audio/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/audio/theme.scss b/packages/block-library/src/audio/theme.scss
index 03e2b5e04333a..2744d36e74ca6 100644
--- a/packages/block-library/src/audio/theme.scss
+++ b/packages/block-library/src/audio/theme.scss
@@ -1,3 +1,7 @@
.wp-block-audio figcaption {
@include caption-style-theme();
}
+
+.wp-block-audio {
+ margin: 0 0 1em 0;
+}
diff --git a/packages/block-library/src/audio/transforms.native.js b/packages/block-library/src/audio/transforms.native.js
index 839cdfe3c9381..a9bf418541e88 100644
--- a/packages/block-library/src/audio/transforms.native.js
+++ b/packages/block-library/src/audio/transforms.native.js
@@ -2,7 +2,7 @@
* Internal dependencies
*/
import webTransforms from './transforms.js';
-import transformationCategories from '../transformationCategories';
+import transformationCategories from '../utils/transformation-categories';
const transforms = {
...webTransforms,
diff --git a/packages/block-library/src/avatar/block.json b/packages/block-library/src/avatar/block.json
index 6bde47a82201b..bceef63ad6fb9 100644
--- a/packages/block-library/src/avatar/block.json
+++ b/packages/block-library/src/avatar/block.json
@@ -29,7 +29,8 @@
"align": true,
"alignWide": false,
"spacing": {
- "margin": true
+ "margin": true,
+ "padding": true
},
"__experimentalBorder": {
"__experimentalSkipSerialization": true,
diff --git a/packages/block-library/src/avatar/index.js b/packages/block-library/src/avatar/index.js
index ef71f2751459a..d318450aec390 100644
--- a/packages/block-library/src/avatar/index.js
+++ b/packages/block-library/src/avatar/index.js
@@ -6,6 +6,7 @@ import { commentAuthorAvatar as icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
+import initBlock from '../utils/init-block';
import metadata from './block.json';
import edit from './edit';
@@ -16,3 +17,5 @@ export const settings = {
icon,
edit,
};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/avatar/init.js b/packages/block-library/src/avatar/init.js
new file mode 100644
index 0000000000000..79f0492c2cb2f
--- /dev/null
+++ b/packages/block-library/src/avatar/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/avatar/style.scss b/packages/block-library/src/avatar/style.scss
index 7305553cfc46b..1939b86b52d16 100644
--- a/packages/block-library/src/avatar/style.scss
+++ b/packages/block-library/src/avatar/style.scss
@@ -1,4 +1,7 @@
.wp-block-avatar {
+ // This block has customizable padding, border-box makes that more predictable.
+ box-sizing: border-box;
+
&.aligncenter {
text-align: center;
}
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 2e9eefedbc19b..5ac0b96336727 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -20,7 +20,6 @@ import {
useInnerBlocksProps,
__experimentalRecursionProvider as RecursionProvider,
__experimentalUseHasRecursion as useHasRecursion,
- __experimentalUseBlockOverlayActive as useBlockOverlayActive,
InnerBlocks,
BlockControls,
InspectorControls,
@@ -60,15 +59,9 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
ref
);
- const hasBlockOverlay = useBlockOverlayActive( clientId );
- const blockProps = useBlockProps(
- {
- className: hasBlockOverlay
- ? 'block-library-block__reusable-block-container block-editor-block-content-overlay'
- : 'block-library-block__reusable-block-container',
- },
- { __unstableIsDisabled: hasBlockOverlay }
- );
+ const blockProps = useBlockProps( {
+ className: 'block-library-block__reusable-block-container',
+ } );
const innerBlocksProps = useInnerBlocksProps( blockProps, {
value: blocks,
diff --git a/packages/block-library/src/block/index.js b/packages/block-library/src/block/index.js
index fff0109a543ac..95e090f0afd6a 100644
--- a/packages/block-library/src/block/index.js
+++ b/packages/block-library/src/block/index.js
@@ -6,6 +6,7 @@ import { symbol as icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
+import initBlock from '../utils/init-block';
import metadata from './block.json';
import edit from './edit';
@@ -17,3 +18,5 @@ export const settings = {
edit,
icon,
};
+
+export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/block/init.js b/packages/block-library/src/block/init.js
new file mode 100644
index 0000000000000..79f0492c2cb2f
--- /dev/null
+++ b/packages/block-library/src/block/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/block/test/edit.native.js b/packages/block-library/src/block/test/edit.native.js
index 5f591eb33db13..a8c4e28fcc6f4 100644
--- a/packages/block-library/src/block/test/edit.native.js
+++ b/packages/block-library/src/block/test/edit.native.js
@@ -70,6 +70,10 @@ describe( 'Reusable block', () => {
response = [ reusableBlockMock1, reusableBlockMock2 ];
} else if ( path.startsWith( '/wp/v2/blocks/1' ) ) {
response = reusableBlockMock1;
+ } else if (
+ path.startsWith( '/wp/v2/block-patterns/categories' )
+ ) {
+ response = [];
}
return Promise.resolve( response );
} );
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index d4a4f308721f8..6076db9b8feec 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -68,8 +68,13 @@
},
"typography": {
"fontSize": true,
+ "lineHeight": true,
"__experimentalFontFamily": true,
+ "__experimentalFontWeight": true,
+ "__experimentalFontStyle": true,
"__experimentalTextTransform": true,
+ "__experimentalTextDecoration": true,
+ "__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true
}
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 61e3bfa557e81..97775bc0bcd10 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -221,7 +221,7 @@ function ButtonEdit( props ) {
anchorRef={ ref?.current }
focusOnMount={ isEditingURL ? 'firstElement' : false }
__unstableSlotName={ '__unstable-block-tools-after' }
- __unstableShift
+ shift
>
{ content }
;
}
const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
@@ -451,7 +448,8 @@ ForwardedRichTextContainer.Content = ( {
const content =
- { content }
-
- );
}
const ForwardedRichTextContainer = forwardRef( RichTextWrapper );
@@ -746,7 +732,8 @@ ForwardedRichTextContainer.Content = ( {
const content =
diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
index f957ca01f4163..3011c99d73f8d 100644
--- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
@@ -1,103 +1,131 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`URLPopover matches the snapshot in its default state 1`] = `
-
-
+
+
`;
exports[`URLPopover matches the snapshot when the settings are toggled open 1`] = `
-
+
-
+
-
-
+
- Editor
-
-
+
+
-
+
+ Editor
+
+
+
+
`;
exports[`URLPopover matches the snapshot when there are no settings 1`] = `
-
+
-
+
+
-
+
-
- Editor
-
-
+
-
-
-
- Settings
+
+
+ Editor
+
+
+
+
+
+ Settings
+
+
+
);
- expect( wrapper ).toMatchSnapshot();
+ expect( container ).toMatchSnapshot();
} );
- it( 'matches the snapshot when the settings are toggled open', () => {
- const wrapper = shallow(
+ it( 'matches the snapshot when the settings are toggled open', async () => {
+ const user = userEvent.setup( {
+ advanceTimers: jest.advanceTimersByTime,
+ } );
+ const { container } = render(
);
- const toggleButton = wrapper.find(
- '.block-editor-url-popover__settings-toggle'
+ await user.click(
+ screen.getByRole( 'button', { name: 'Link settings' } )
);
- expect( toggleButton ).toHaveLength( 1 );
- toggleButton.simulate( 'click' );
- expect( wrapper ).toMatchSnapshot();
+ expect( container ).toMatchSnapshot();
} );
it( 'matches the snapshot when there are no settings', () => {
- const wrapper = shallow(
+ const { container } = render(
);
- expect( wrapper ).toMatchSnapshot();
+ expect( container ).toMatchSnapshot();
} );
} );
diff --git a/packages/block-editor/src/components/use-block-drop-zone/index.js b/packages/block-editor/src/components/use-block-drop-zone/index.js
index 427dfcbb56ad5..a8de937f7c960 100644
--- a/packages/block-editor/src/components/use-block-drop-zone/index.js
+++ b/packages/block-editor/src/components/use-block-drop-zone/index.js
@@ -92,10 +92,21 @@ export default function useBlockDropZone( {
} = {} ) {
const [ targetBlockIndex, setTargetBlockIndex ] = useState( null );
- const isLockedAll = useSelect(
+ const isDisabled = useSelect(
( select ) => {
- const { getTemplateLock } = select( blockEditorStore );
- return getTemplateLock( targetRootClientId ) === 'all';
+ const {
+ getTemplateLock,
+ __unstableIsWithinBlockOverlay,
+ __unstableHasActiveBlockOverlayActive,
+ } = select( blockEditorStore );
+ const templateLock = getTemplateLock( targetRootClientId );
+ return (
+ [ 'all', 'noContent' ].some(
+ ( lock ) => lock === templateLock
+ ) ||
+ __unstableHasActiveBlockOverlayActive( targetRootClientId ) ||
+ __unstableIsWithinBlockOverlay( targetRootClientId )
+ );
},
[ targetRootClientId ]
);
@@ -127,7 +138,7 @@ export default function useBlockDropZone( {
);
return useDropZone( {
- isDisabled: isLockedAll,
+ isDisabled,
onDrop: onBlockDrop,
onDragOver( event ) {
// `currentTarget` is only available while the event is being
diff --git a/packages/block-editor/src/components/use-moving-animation/index.js b/packages/block-editor/src/components/use-moving-animation/index.js
index 30994990acd83..bf49a480bc6b4 100644
--- a/packages/block-editor/src/components/use-moving-animation/index.js
+++ b/packages/block-editor/src/components/use-moving-animation/index.js
@@ -109,7 +109,7 @@ function useMovingAnimation( {
return;
}
- ref.current.style.transform = '';
+ ref.current.style.transform = undefined;
const destination = getAbsolutePosition( ref.current );
triggerAnimation();
@@ -119,38 +119,23 @@ function useMovingAnimation( {
} );
}, [ triggerAnimationOnChange ] );
- // Only called when either the x or y value changes.
- function onFrameChange( { x, y } ) {
+ function onChange( { value } ) {
if ( ! ref.current ) {
return;
}
-
- const isMoving = x === 0 && y === 0;
- ref.current.style.transformOrigin = isMoving ? '' : 'center';
- ref.current.style.transform = isMoving
- ? ''
- : `translate3d(${ x }px,${ y }px,0)`;
- ref.current.style.zIndex = ! isSelected || isMoving ? '' : '1';
-
- preserveScrollPosition();
- }
-
- // Called for every frame computed by useSpring.
- function onChange( { value } ) {
let { x, y } = value;
x = Math.round( x );
y = Math.round( y );
+ const finishedMoving = x === 0 && y === 0;
+ ref.current.style.transformOrigin = 'center center';
+ ref.current.style.transform = finishedMoving
+ ? undefined
+ : `translate3d(${ x }px,${ y }px,0)`;
+ ref.current.style.zIndex = isSelected ? '1' : '';
- if ( x !== onChange.x || y !== onChange.y ) {
- onFrameChange( { x, y } );
- onChange.x = x;
- onChange.y = y;
- }
+ preserveScrollPosition();
}
- onChange.x = 0;
- onChange.y = 0;
-
useSpring( {
from: {
x: transform.x,
diff --git a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
index dae4cd686b3c6..dbaba10e18efe 100644
--- a/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/warning/test/__snapshots__/index.js.snap
@@ -1,25 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Warning should match snapshot 1`] = `
-error );
+ const { container } = render( error );
- expect( wrapper ).toMatchSnapshot();
+ expect( container ).toMatchSnapshot();
} );
- it( 'should have valid class', () => {
- const wrapper = shallow( Click me }>Message
);
- const actions = wrapper.find( '.block-editor-warning__actions' );
- const action = actions.childAt( 0 );
+ expect(
+ screen.getByRole( 'button', { name: 'Click me' } )
+ ).toBeVisible();
- expect( actions ).toHaveLength( 1 );
- expect( action.hasClass( 'block-editor-warning__action' ) ).toBe(
- true
- );
- expect( action.childAt( 0 ).type() ).toBe( 'button' );
+ expect(
+ screen.queryByRole( 'button', { name: 'More options' } )
+ ).not.toBeInTheDocument();
} );
- it( 'should show hidden actions', () => {
- const wrapper = shallow(
+ it( 'should show hidden secondary actions', async () => {
+ const user = userEvent.setup( {
+ advanceTimers: jest.advanceTimersByTime,
+ } );
+
+ render(
Message
);
- const actions = wrapper.find( '.block-editor-warning__secondary' );
+ const secondaryActionsBtn = screen.getByRole( 'button', {
+ name: 'More options',
+ } );
+
+ expect( secondaryActionsBtn ).toBeVisible();
+ expect(
+ screen.queryByRole( 'menuitem', { name: 'test' } )
+ ).not.toBeInTheDocument();
+
+ await user.click( secondaryActionsBtn );
- expect( actions ).toHaveLength( 1 );
+ expect(
+ screen.getByRole( 'menuitem', { name: 'test' } )
+ ).toBeInTheDocument();
} );
} );
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index dfd44e828c7f8..b28f065c559c5 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -51,12 +51,14 @@ export function useWritingFlow() {
return;
}
+ node.classList.add( 'has-multi-selection' );
node.setAttribute(
'aria-label',
__( 'Multiple selected blocks' )
);
return () => {
+ node.classList.remove( 'has-multi-selection' );
node.removeAttribute( 'aria-label' );
};
},
diff --git a/packages/block-editor/src/components/writing-flow/use-select-all.js b/packages/block-editor/src/components/writing-flow/use-select-all.js
index 15473e3a201c7..c56549acf54ad 100644
--- a/packages/block-editor/src/components/writing-flow/use-select-all.js
+++ b/packages/block-editor/src/components/writing-flow/use-select-all.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
/**
* WordPress dependencies
*/
@@ -37,28 +32,28 @@ export default function useSelectAll() {
return;
}
+ event.preventDefault();
+
const [ firstSelectedClientId ] = selectedClientIds;
const rootClientId = getBlockRootClientId( firstSelectedClientId );
- let blockClientIds = getBlockOrder( rootClientId );
+ const blockClientIds = getBlockOrder( rootClientId );
// If we have selected all sibling nested blocks, try selecting up a
// level. See: https://github.com/WordPress/gutenberg/pull/31859/
if ( selectedClientIds.length === blockClientIds.length ) {
- blockClientIds = getBlockOrder(
- getBlockRootClientId( rootClientId )
- );
- }
-
- const firstClientId = first( blockClientIds );
- const lastClientId = last( blockClientIds );
-
- if ( firstClientId === lastClientId ) {
- selectBlock( firstClientId );
+ if ( rootClientId ) {
+ node.ownerDocument.defaultView
+ .getSelection()
+ .removeAllRanges();
+ selectBlock( rootClientId );
+ }
return;
}
- multiSelect( firstClientId, lastClientId );
- event.preventDefault();
+ multiSelect(
+ blockClientIds[ 0 ],
+ blockClientIds[ blockClientIds.length - 1 ]
+ );
}
node.addEventListener( 'keydown', onKeyDown );
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index c790a1cce20e0..d559d5d8ea585 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
-import { has, without } from 'lodash';
+import { without } from 'lodash';
/**
* WordPress dependencies
@@ -14,12 +14,14 @@ import {
getBlockType,
hasBlockSupport,
} from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import { BlockControls, BlockAlignmentControl } from '../components';
import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
+import { store as blockEditorStore } from '../store';
/**
* An array which includes all possible valid alignments,
@@ -87,7 +89,7 @@ export function getValidAlignments(
*/
export function addAttribute( settings ) {
// Allow blocks to specify their own attribute definition with default values if needed.
- if ( has( settings.attributes, [ 'align', 'type' ] ) ) {
+ if ( 'type' in ( settings.attributes?.align ?? {} ) ) {
return settings;
}
if ( hasBlockSupport( settings, 'align' ) ) {
@@ -116,6 +118,7 @@ export function addAttribute( settings ) {
*/
export const withToolbarControls = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
+ const blockEdit =
-
- ) }
-
+
+ { blockEdit }
);
},
diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
index 4be1719ec9092..804375da6e2d0 100644
--- a/packages/block-editor/src/hooks/anchor.js
+++ b/packages/block-editor/src/hooks/anchor.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { has } from 'lodash';
-
/**
* WordPress dependencies
*/
@@ -42,7 +37,7 @@ const ANCHOR_SCHEMA = {
*/
export function addAttribute( settings ) {
// Allow blocks to specify their own attribute definition with default values if needed.
- if ( has( settings.attributes, [ 'anchor', 'type' ] ) ) {
+ if ( 'type' in ( settings.attributes?.anchor ?? {} ) ) {
return settings;
}
if ( hasBlockSupport( settings, 'anchor' ) ) {
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index 58d7a6916ff97..b1bf5b8206a79 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -26,9 +26,10 @@ export default function ColorPanel( {
const [ detectedColor, setDetectedColor ] = useState();
const [ detectedLinkColor, setDetectedLinkColor ] = useState();
const ref = useBlockRef( clientId );
+ const definedColors = settings.filter( ( setting ) => setting?.colorValue );
useEffect( () => {
- if ( ! enableContrastChecking ) {
+ if ( ! enableContrastChecking || ! definedColors.length ) {
return;
}
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
new file mode 100644
index 0000000000000..98098cf583361
--- /dev/null
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -0,0 +1,161 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { BlockControls } from '../components';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+function StopEditingAsBlocksOnOutsideSelect( {
+ clientId,
+ stopEditingAsBlock,
+} ) {
+ const isBlockOrDescendantSelected = useSelect(
+ ( select ) => {
+ const { isBlockSelected, hasSelectedInnerBlock } =
+ select( blockEditorStore );
+ return (
+ isBlockSelected( clientId ) ||
+ hasSelectedInnerBlock( clientId, true )
+ );
+ },
+ [ clientId ]
+ );
+ useEffect( () => {
+ if ( ! isBlockOrDescendantSelected ) {
+ stopEditingAsBlock();
+ }
+ }, [ isBlockOrDescendantSelected ] );
+ return null;
+}
+
+export const withBlockControls = createHigherOrderComponent(
+ ( BlockEdit ) => ( props ) => {
+ const { getBlockListSettings, getSettings } =
+ useSelect( blockEditorStore );
+ const focusModeToRevert = useRef();
+ const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
+ ( select ) => {
+ const {
+ __unstableGetContentLockingParent,
+ getTemplateLock,
+ __unstableGetTemporarilyEditingAsBlocks,
+ } = select( blockEditorStore );
+ return {
+ templateLock: getTemplateLock( props.clientId ),
+ isLockedByParent: !! __unstableGetContentLockingParent(
+ props.clientId
+ ),
+ isEditingAsBlocks:
+ __unstableGetTemporarilyEditingAsBlocks() ===
+ props.clientId,
+ };
+ },
+ [ props.clientId ]
+ );
+
+ const {
+ updateSettings,
+ updateBlockListSettings,
+ __unstableSetTemporarilyEditingAsBlocks,
+ } = useDispatch( blockEditorStore );
+ const isContentLocked =
+ ! isLockedByParent && templateLock === 'noContent';
+ const {
+ __unstableMarkNextChangeAsNotPersistent,
+ updateBlockAttributes,
+ } = useDispatch( blockEditorStore );
+
+ const stopEditingAsBlock = useCallback( () => {
+ __unstableMarkNextChangeAsNotPersistent();
+ updateBlockAttributes( props.clientId, {
+ templateLock: 'noContent',
+ } );
+ updateBlockListSettings( props.clientId, {
+ ...getBlockListSettings( props.clientId ),
+ templateLock: 'noContent',
+ } );
+ updateSettings( { focusMode: focusModeToRevert.current } );
+ __unstableSetTemporarilyEditingAsBlocks();
+ }, [
+ props.clientId,
+ focusModeToRevert,
+ updateSettings,
+ updateBlockListSettings,
+ getBlockListSettings,
+ __unstableMarkNextChangeAsNotPersistent,
+ updateBlockAttributes,
+ __unstableSetTemporarilyEditingAsBlocks,
+ ] );
+
+ if ( ! isContentLocked && ! isEditingAsBlocks ) {
+ return
+ {
+ if ( isEditingAsBlocks && ! isContentLocked ) {
+ stopEditingAsBlock();
+ } else {
+ __unstableMarkNextChangeAsNotPersistent();
+ updateBlockAttributes( props.clientId, {
+ templateLock: undefined,
+ } );
+ updateBlockListSettings( props.clientId, {
+ ...getBlockListSettings( props.clientId ),
+ templateLock: false,
+ } );
+ focusModeToRevert.current =
+ getSettings().focusMode;
+ updateSettings( { focusMode: true } );
+ __unstableSetTemporarilyEditingAsBlocks(
+ props.clientId
+ );
+ }
+ } }
+ >
+ { isEditingAsBlocks && ! isContentLocked
+ ? __( 'Done' )
+ : __( 'Modify' ) }
+
+
+
{ ! isPaddingDisabled && (
0,
- } ) }
+ className={ spacingClassnames }
hasValue={ () => hasPaddingValue( props ) }
label={ __( 'Padding' ) }
onDeselect={ () => resetPadding( props ) }
@@ -100,10 +101,7 @@ export function DimensionsPanel( props ) {
) }
{ ! isMarginDisabled && (
0,
- } ) }
+ className={ spacingClassnames }
hasValue={ () => hasMarginValue( props ) }
label={ __( 'Margin' ) }
onDeselect={ () => resetMargin( props ) }
@@ -116,6 +114,7 @@ export function DimensionsPanel( props ) {
) }
{ ! isGapDisabled && (
hasGapValue( props ) }
label={ __( 'Block spacing' ) }
onDeselect={ () => resetGap( props ) }
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 9970484584409..a33ad059cb665 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -12,6 +12,7 @@ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
import { useMemo, useContext, createPortal } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
@@ -27,6 +28,7 @@ import {
__unstableDuotoneStylesheet as DuotoneStylesheet,
__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
} from '../components/duotone';
+import { store as blockEditorStore } from '../store';
const EMPTY_ARRAY = [];
@@ -157,11 +159,21 @@ const withDuotoneControls = createHigherOrderComponent(
props.name,
'color.__experimentalDuotone'
);
+ const isContentLocked = useSelect(
+ ( select ) => {
+ return select(
+ blockEditorStore
+ ).__unstableGetContentLockingParent( props.clientId );
+ },
+ [ props.clientId ]
+ );
return (
<>
setAttributes( {
layout: {
type:
layoutType?.name ===
- 'constrained'
+ 'constrained' ||
+ hasContentSizeOrLegacySettings
? 'default'
: 'constrained',
},
} )
}
+ help={
+ layoutType?.name === 'constrained' ||
+ hasContentSizeOrLegacySettings
+ ? __(
+ 'Nested blocks use content width with options for full and wide widths.'
+ )
+ : __(
+ 'Nested blocks will fill the width of this container. Toggle to constrain.'
+ )
+ }
/>
-
-
+
`;
diff --git a/packages/block-editor/src/components/url-popover/test/index.js b/packages/block-editor/src/components/url-popover/test/index.js
index af15793510435..1d84ad5643b82 100644
--- a/packages/block-editor/src/components/url-popover/test/index.js
+++ b/packages/block-editor/src/components/url-popover/test/index.js
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* Internal dependencies
@@ -10,38 +11,39 @@ import URLPopover from '../';
describe( 'URLPopover', () => {
it( 'matches the snapshot in its default state', () => {
- const wrapper = shallow(
+ const { container } = render(
-
-
+
+
- Editor
+
-
+
+
+
+
+ Editor
+
+ Settings
}>
Editor
Settings
}>
Editor
Editor
+
diff --git a/packages/block-editor/src/components/warning/test/index.js b/packages/block-editor/src/components/warning/test/index.js
index d829a5b931fad..88c9006b8ace9 100644
--- a/packages/block-editor/src/components/warning/test/index.js
+++ b/packages/block-editor/src/components/warning/test/index.js
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
/**
* Internal dependencies
@@ -10,47 +11,49 @@ import Warning from '../index';
describe( 'Warning', () => {
it( 'should match snapshot', () => {
- const wrapper = shallow(
-
- error -
+ +- { !! inherit || - layoutType?.name === 'constrained' - ? __( - 'Nested blocks use theme content width with options for full and wide widths.' - ) - : __( - 'Nested blocks will fill the width of this container.' - ) } -
) } @@ -200,7 +206,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { layoutBlockSupport={ layoutBlockSupport } /> ) } - { constrainedType && !! contentSize && ( + { constrainedType && displayControlsForLegacyLayouts && (
@@ -80,28 +110,28 @@ export default {
-
-
-
{ __( 'Customize the width for all elements that are assigned to the center or wide columns.' ) }
+
-
- { categoriesList.map( ( category ) =>
- renderCategoryListItem( category, 0 )
- ) }
-
-
+
-
{ childCategories.map( ( childCategory ) =>
- renderCategoryListItem( childCategory, level + 1 )
+ renderCategoryListItem( childCategory )
) }