ToggleGroupControl: rewrite backdrop animation with framer-motion's shared layout animations #40276
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ciampo
changed the title
|
Size Change: +180 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
|
For some reason, it looks like the new approach doesn't work in the block inspector controls: togglegroucontrol-block-inspector.mp4While it seems to work just fine in the Site editor: togglegroupcontrol-site-editor.mp4I wonder if the problem is related @aaronrobertshaw maybe you could you help here? I'm not really knowledgeable about this part of the codebase |
|
Awesome @ciampo! This was actually the first approach I tried and I ran into the same issue. I spent plenty of time trying to work around it and didn't find a solution that worked in every situation. I didn't realize it worked fine inside of Site Editor or outside of that slot so maybe that can lead the investigation somewhere more fruitful. If we can figure out what is going on in this inspector slot it might help fix other issues. It's great that you've isolated it. |
We can probably narrow the investigation further to just the block editor's I created an extra storybook example rendering the ToggleGroupControl SlotFill Examplediff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js
index d56541974d..9cbb82a84f 100644
--- a/packages/components/src/toggle-group-control/stories/index.js
+++ b/packages/components/src/toggle-group-control/stories/index.js
@@ -18,6 +18,7 @@ import {
ToggleGroupControlOptionIcon,
} from '../index';
import { View } from '../../view';
+import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
import Button from '../../button';
export default {
@@ -232,3 +233,38 @@ export const DoubleToggles = () => {
</View>
);
};
+
+const { Fill: InspectorControls, Slot } = createSlotFill( 'InspectorControls' );
+InspectorControls.Slot = Slot;
+
+// TODO: Remove before merging as well.
+export const RenderViaSlot = () => {
+ const [ alignState, setAlignState ] = useState();
+ const aligns = [ 'Left', 'Center', 'Right' ];
+
+ return (
+ <SlotFillProvider>
+ <InspectorControls>
+ <ToggleGroupControl
+ onChange={ setAlignState }
+ value={ alignState }
+ label={ 'Pick an alignment option' }
+ >
+ { aligns.map( ( key ) => (
+ <ToggleGroupControlOption
+ key={ key }
+ value={ key }
+ label={ key }
+ />
+ ) ) }
+ </ToggleGroupControl>
+ </InspectorControls>
+ <View>
+ <InspectorControls.Slot bubblesVirtually />
+ <Button onClick={ () => setAlignState( undefined ) } isTertiary>
+ Reset
+ </Button>
+ </View>
+ </SlotFillProvider>
+ );
+};
Screen.Recording.2022-04-13.at.4.23.31.pm.mp4 |
|
Alright, I spent the past couple of days looking into it until I found the cause of the issue: basically, the This mismatch causes some issues (which I haven't pinpointed exactly yet) in This can be verified by:
I'm not sure yet if there's a solution here that will fix this incompatibility between |
|
I spent some more time investigating the issue and I managed to reproduce it even more in isolation:
You can see the little demo I built on CodeSandbox here. As for the next steps, I'm a bit out of ideas — |
ciampo
added
[Type] Enhancement
…ggleGroupControl` have separate backdrop animations
ciampo
force-pushed
the
feat/toggle-group-control-backdrop-animation-framer-motion
branch
from
6234828
to
7d113e0
Compare
|
Update: following a piece of advice shared in framer/motion#1524 (comment), I managed to get shared layout animations in There's still one final issue left: somehow, when selecting a block that has an assigned font-size, the selected option animates down unexpectedly: Kapture.2022-10-17.at.20.48.40.mp4I haven't managed to isolate the cause yet, but it seems related to the block editor specifically (both post editor and site editor) — I haven't been able to reproduce it in Storybook for the Has anyone got any ideas on what could cause this animation glitch? |
|
Update: in an effort to isolate the cause of the glitch, I experimented with:
See code diffdiff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 379d8806f2..37c37ae3c4 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -35,6 +35,7 @@ import BlockVariationTransforms from '../block-variation-transforms';
import useBlockDisplayInformation from '../use-block-display-information';
import { store as blockEditorStore } from '../../store';
import BlockIcon from '../block-icon';
+import { FontSizeEdit } from '../../hooks/font-size';
function useContentBlocks( blockTypes, block ) {
const contenBlocksObjectAux = useMemo( () => {
@@ -260,6 +261,8 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
+
+ <FontSizeEdit />
<InspectorControls.Slot
__experimentalGroup="typography"
label={ __( 'Typography' ) }
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index f8fa94538f..0c8b5fcb33 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -114,41 +114,10 @@ function addEditProps( settings ) {
*
* @return {WPElement} Font size edit element.
*/
-export function FontSizeEdit( props ) {
- const {
- attributes: { fontSize, style },
- setAttributes,
- } = props;
- const fontSizes = useSetting( 'typography.fontSizes' );
-
- const onChange = ( value ) => {
- const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
-
- setAttributes( {
- style: cleanEmptyObject( {
- ...style,
- typography: {
- ...style?.typography,
- fontSize: fontSizeSlug ? undefined : value,
- },
- } ),
- fontSize: fontSizeSlug,
- } );
- };
-
- const fontSizeObject = getFontSize(
- fontSizes,
- fontSize,
- style?.typography?.fontSize
- );
-
- const fontSizeValue =
- fontSizeObject?.size || style?.typography?.fontSize || fontSize;
-
+export function FontSizeEdit() {
return (
<FontSizePicker
- onChange={ onChange }
- value={ fontSizeValue }
+ value={ '2.25rem' }
withReset={ false }
size="__unstable-large"
__nextHasNoMarginBottom
Kapture.2022-10-17.at.21.34.44.mp4In my tests, the I then tested this theory in this CodeSandbox, and it looks like wrapping the component in Kapture.2022-10-17.at.21.42.01.mp4@youknowriad , this is not high priority, but it would be great if you could take a look at this. Also happy to pair on this issue together! |
|
@ciampo At this point, I admit I was not able to understand why this is happening. Do you know any wild guesses? |
|
After the update to a more recent framer motion version, I wanted to test and see if the situation improved. I tried rebasing but Going to close this PR, we can continue the conversation there. |
youknowriad
deleted the
feat/toggle-group-control-backdrop-animation-framer-motion
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Completely rewrite the
ToggleGroupControl's animated backdrop usingframer-motion's shared layout animations.Supersedes #40107
Fixes #37506
Why?
Current implementation is complex, difficult to read, imperative (based off arbitrary timeouts), and buggy.
How?
Main changes are:
ToggleGroupControlBackdrop, and the imperative logic that came with itframer-motion's shared layout animations:layoutIdattribute to tag the components that participate to the same shared layout animationToggleGroupControlalso defines its own "namespace" for the shared layout animations via theLayoutGroupcomponent, in order to avoid conflicts between different instances of the componentTesting Instructions
Make sure that the backdrop animation works as expected:
ToggleGroupControl)Screenshots or screencast
toggle-group-control-backdrop-shared-layout-animation-storybook.mp4