Skip to content

Commit

Permalink
Display wide widgets as popovers in Customizer (#31736)
Browse files Browse the repository at this point in the history
  • Loading branch information
tellthemachines authored and youknowriad committed Jun 7, 2021
1 parent 892d49c commit 1a8057b
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 9 deletions.
46 changes: 44 additions & 2 deletions packages/block-library/src/legacy-widget/edit/form.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useRef, useEffect } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { __ } from '@wordpress/i18n';

import { Popover } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
/**
* Internal dependencies
*/
Expand All @@ -17,11 +22,14 @@ export default function Form( {
id,
idBase,
instance,
isWide,
onChangeInstance,
onChangeHasPreview,
} ) {
const ref = useRef();

const isMediumLargeViewport = useViewportMatch( 'small' );

// We only want to remount the control when the instance changes
// *externally*. For example, if the user performs an undo. To do this, we
// keep track of changes made to instance by the control itself and then
Expand Down Expand Up @@ -68,7 +76,41 @@ export default function Form( {

control.destroy();
};
}, [ id, idBase, instance, onChangeInstance, onChangeHasPreview ] );
}, [
id,
idBase,
instance,
onChangeInstance,
onChangeHasPreview,
isMediumLargeViewport,
] );

if ( isWide && isMediumLargeViewport ) {
return (
<div
className={ classnames( {
'wp-block-legacy-widget__container': isVisible,
} ) }
>
{ isVisible && (
<h3 className="wp-block-legacy-widget__edit-form-title">
{ title }
</h3>
) }
<Popover
focusOnMount={ false }
position="middle right"
__unstableForceXAlignment
>
<div
ref={ ref }
className="wp-block-legacy-widget__edit-form"
hidden={ ! isVisible }
></div>
</Popover>
</div>
);
}

return (
<div
Expand Down
17 changes: 16 additions & 1 deletion packages/block-library/src/legacy-widget/edit/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -27,8 +32,16 @@ import ConvertToBlocksButton from './convert-to-blocks-button';

export default function Edit( props ) {
const { id, idBase } = props.attributes;
const { isWide = false } = props;

const blockProps = useBlockProps( {
className: classnames( {
'is-wide-widget': isWide,
} ),
} );

return (
<div { ...useBlockProps() }>
<div { ...blockProps }>
{ ! id && ! idBase ? (
<Empty { ...props } />
) : (
Expand Down Expand Up @@ -77,6 +90,7 @@ function NotEmpty( {
setAttributes,
clientId,
isSelected,
isWide = false,
} ) {
const [ hasPreview, setHasPreview ] = useState( null );

Expand Down Expand Up @@ -168,6 +182,7 @@ function NotEmpty( {
id={ id }
idBase={ idBase }
instance={ instance }
isWide={ isWide }
onChangeInstance={ setInstance }
onChangeHasPreview={ setHasPreview }
/>
Expand Down
8 changes: 8 additions & 0 deletions packages/block-library/src/legacy-widget/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,3 +86,11 @@
margin: 0 0 5px;
font-weight: 500;
}

// When wide widget is selected it opens in a popover but its container should still have a bit of height.
.is-selected {
.wp-block-legacy-widget__container {
padding: $grid-unit-10 $grid-unit-15;
min-height: 50px;
}
}
4 changes: 3 additions & 1 deletion packages/components/src/popover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,7 @@ const Popover = (
__unstableObserveElement,
__unstableBoundaryParent,
__unstableForcePosition,
__unstableForceXAlignment,
/* eslint-enable no-unused-vars */
...contentProps
},
Expand Down Expand Up @@ -354,7 +355,8 @@ const Popover = (
containerRef.current,
relativeOffsetTop,
boundaryElement,
__unstableForcePosition
__unstableForcePosition,
__unstableForceXAlignment
);

if (
Expand Down
15 changes: 10 additions & 5 deletions packages/components/src/popover/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const HEIGHT_OFFSET = 10; // used by the arrow and a bit of empty space
* @param {string} chosenYAxis yAxis to be used.
* @param {Element} boundaryElement Boundary element.
* @param {boolean} forcePosition Don't adjust position based on anchor.
* @param {boolean} forceXAlignment Don't adjust alignment based on YAxis
*
* @return {Object} Popover xAxis position and constraints.
*/
Expand All @@ -32,7 +33,8 @@ export function computePopoverXAxisPosition(
stickyBoundaryElement,
chosenYAxis,
boundaryElement,
forcePosition
forcePosition,
forceXAlignment
) {
const { width } = contentSize;

Expand Down Expand Up @@ -64,15 +66,15 @@ export function computePopoverXAxisPosition(

if ( corner === 'right' ) {
leftAlignmentX = anchorRect.right;
} else if ( chosenYAxis !== 'middle' ) {
} else if ( chosenYAxis !== 'middle' && ! forceXAlignment ) {
leftAlignmentX = anchorMidPoint;
}

let rightAlignmentX = anchorRect.right;

if ( corner === 'left' ) {
rightAlignmentX = anchorRect.left;
} else if ( chosenYAxis !== 'middle' ) {
} else if ( chosenYAxis !== 'middle' && ! forceXAlignment ) {
rightAlignmentX = anchorMidPoint;
}

Expand Down Expand Up @@ -285,6 +287,7 @@ export function computePopoverYAxisPosition(
* relative positioned parent container.
* @param {Element} boundaryElement Boundary element.
* @param {boolean} forcePosition Don't adjust position based on anchor.
* @param {boolean} forceXAlignment Don't adjust alignment based on YAxis
*
* @return {Object} Popover position and constraints.
*/
Expand All @@ -296,7 +299,8 @@ export function computePopoverPosition(
anchorRef,
relativeOffsetTop,
boundaryElement,
forcePosition
forcePosition,
forceXAlignment
) {
const [ yAxis, xAxis = 'center', corner ] = position.split( ' ' );

Expand All @@ -318,7 +322,8 @@ export function computePopoverPosition(
stickyBoundaryElement,
yAxisPosition.yAxis,
boundaryElement,
forcePosition
forcePosition,
forceXAlignment
);

return {
Expand Down
1 change: 1 addition & 0 deletions packages/customize-widgets/src/filters/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@
*/
import './move-to-sidebar';
import './replace-media-upload';
import './wide-widget-display';
26 changes: 26 additions & 0 deletions packages/customize-widgets/src/filters/wide-widget-display.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* WordPress dependencies
*/
import { createHigherOrderComponent } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';

const { wp } = window;

const withWideWidgetDisplay = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
const { idBase } = props.attributes;
const isWide =
wp.customize.Widgets.data.availableWidgets.find(
( widget ) => widget.id_base === idBase
)?.is_wide ?? false;

return <BlockEdit { ...props } isWide={ isWide } />;
},
'withWideWidgetDisplay'
);

addFilter(
'editor.BlockEdit',
'core/customize-widgets/wide-widget-display',
withWideWidgetDisplay
);

0 comments on commit 1a8057b

Please sign in to comment.