Skip to content

Fixed Random Collapse of Colors Setting Section#32388

Merged
youknowriad merged 1 commit intoWordPress:trunkfrom
thisissandip:fix/random-collapse-of-color-settings-section
Jun 3, 2021
Merged

Fixed Random Collapse of Colors Setting Section#32388
youknowriad merged 1 commit intoWordPress:trunkfrom
thisissandip:fix/random-collapse-of-color-settings-section

Conversation

@thisissandip
Copy link
Copy Markdown
Contributor

@thisissandip thisissandip commented Jun 2, 2021 •
edited
Loading

Fixes #32295

Description

Fixed Random Collapse of Colors Setting Section on various selection.

The collapse used to occur when the link color is:

  1. selected for the first time
  2. removed/cleared and text/Background color settings are selected right after that.

This was happening because the withElementsStyles HOC returned different components when the link color is set and when it's not. Instead, withElementsStyles HOC should return a single component with different props based on the link color using conditional rendering.

How has this been tested?

  1. Select Block which supports color settings (eg. paragraph block)
  2. Open sidebar settings.
  3. Open Colors and select a custom color from one of the options.
  4. The color settings panel should not collapse like it used to before.

Screenshots

Color.Collapse.Fix.Test.mov

Types of changes

Bug fix

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.

``

@thisissandip thisissandip requested a review from ellatrix as a code owner June 2, 2021 08:02
@paaljoachim paaljoachim mentioned this pull request Jun 2, 2021
Closed
youknowriad
youknowriad reviewed Jun 2, 2021
View reviewed changes
packages/block-editor/src/hooks/style.js
( BlockListBlock ) => ( props ) => {
const elements = props.attributes.style?.elements;
if ( ! elements ) {
return <BlockListBlock { ...props } />;
Copy link
Copy Markdown
Contributor

@youknowriad youknowriad Jun 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this causes a remount which is not great for BlockEdit components. We had similar issues in other hooks in the past. So yeah the fix here is looking good to me.

youknowriad
youknowriad reviewed Jun 2, 2021
View reviewed changes
packages/block-editor/src/hooks/style.js
} }
/>
{ elements && (
<style
Copy link
Copy Markdown
Contributor

@youknowriad youknowriad Jun 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside: (something for other PRs) Also noting that inline styles like that (which we do in layout as well), can cause CSS issues due to the new elements breaking :first-child selectors and things like that in editor styles.

@jorgefilipecosta @nosolosw @ellatrix We may need a dedicated way to inject these styles in the editor (and maybe even in the frontend) that doesn't suffer from these issues.

@youknowriad youknowriad added [Type] Bug An existing feature does not function as intended Backport to WP Beta/RC labels Jun 2, 2021
youknowriad
youknowriad approved these changes Jun 3, 2021
View reviewed changes
Copy link
Copy Markdown
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's get this in. We can address the "style elements" issue separately.

@youknowriad youknowriad merged commit 696d64b into WordPress:trunk Jun 3, 2021
@github-actions github-actions bot added this to the Gutenberg 10.9 milestone Jun 3, 2021
@thisissandip
Copy link
Copy Markdown
Contributor Author

thisissandip commented Jun 3, 2021

@youknowriad Thank you for reviewing and merging this PR! 😄

youknowriad pushed a commit that referenced this pull request Jun 7, 2021
@thisissandip @youknowriad
Fixed random collapse of the color settings section (#32388)
bbc0041
@youknowriad youknowriad mentioned this pull request Jun 7, 2021
Merged
youknowriad pushed a commit that referenced this pull request Jun 7, 2021
@thisissandip @youknowriad
Fixed random collapse of the color settings section (#32388)
cd25dc4
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Jun 8, 2021
@youknowriad
Block Editor: Package updates for 5.8 beta 1.
377c88d 
This includes the following fixes:


Widgets Editor:
  - Load widgets.php WordPress/gutenberg#32299
 - Fix Legacy Widget Preview WordPress/gutenberg#32300
 - Fix error when saving empty Legacy Widget block WordPress/gutenberg#32359

Widget blocks in the customizer: 
 - Fix deselection blocks when the inspector is open WordPress/gutenberg#32361
 - Display wide widgets as popovers WordPress/gutenberg#31736

Global Styles:
 - Align classNames generation between client and server WordPress/gutenberg#32352
 - Group typography block supports WordPress/gutenberg#32252 WordPress/gutenberg#32444 WordPress/gutenberg#32459
 - Make theme.json syntax errors more visible to the users WordPress/gutenberg#32404


Template Editor:
  - Update the appearance of the template details WordPress/gutenberg#32042
  - Fix layout definition WordPress/gutenberg#32425
  - Fix grouping post content block WordPress/gutenberg#32453

Miscellaneous:
 - Prevent saving when the post is locked WordPress/gutenberg#32341
 - Fix allowed block patterns selector WordPress/gutenberg#32376
 - Fix wrong results in the Post Author picker WordPress/gutenberg#32344
 - Fix notices position in top toolbar mode WordPress/gutenberg#32238
 - Allow non-latin characters in post slugs WordPress/gutenberg#32232
 - Fix Random collapse of the color settings panel WordPress/gutenberg#32388
 - Fix theme logo theme mode not being removed on theme removal WordPress/gutenberg#32370
 - Fix block alignment styles in the editor WordPress/gutenberg#32454
 - Fix some block toolbar overlaps WordPress/gutenberg#32424
 - Fix content loss when switching list types WordPress/gutenberg#32432


Performance:
 - Improve the performance of buttons block WordPress/gutenberg#32356
 - Improve the performance of the container blocks WordPress/gutenberg#32380

Props noisysocks, nosolosw, jorgefilipecosta.
See #52991.


git-svn-id: https://develop.svn.wordpress.org/trunk@51089 602fd350-edb4-49c9-b593-d223f7449a82
nylen pushed a commit to nylen/wordpress-develop-svn that referenced this pull request Jun 8, 2021
Block Editor: Package updates for 5.8 beta 1.
f4b811c 
This includes the following fixes:


Widgets Editor:
  - Load widgets.php WordPress/gutenberg#32299
 - Fix Legacy Widget Preview WordPress/gutenberg#32300
 - Fix error when saving empty Legacy Widget block WordPress/gutenberg#32359

Widget blocks in the customizer: 
 - Fix deselection blocks when the inspector is open WordPress/gutenberg#32361
 - Display wide widgets as popovers WordPress/gutenberg#31736

Global Styles:
 - Align classNames generation between client and server WordPress/gutenberg#32352
 - Group typography block supports WordPress/gutenberg#32252 WordPress/gutenberg#32444 WordPress/gutenberg#32459
 - Make theme.json syntax errors more visible to the users WordPress/gutenberg#32404


Template Editor:
  - Update the appearance of the template details WordPress/gutenberg#32042
  - Fix layout definition WordPress/gutenberg#32425
  - Fix grouping post content block WordPress/gutenberg#32453

Miscellaneous:
 - Prevent saving when the post is locked WordPress/gutenberg#32341
 - Fix allowed block patterns selector WordPress/gutenberg#32376
 - Fix wrong results in the Post Author picker WordPress/gutenberg#32344
 - Fix notices position in top toolbar mode WordPress/gutenberg#32238
 - Allow non-latin characters in post slugs WordPress/gutenberg#32232
 - Fix Random collapse of the color settings panel WordPress/gutenberg#32388
 - Fix theme logo theme mode not being removed on theme removal WordPress/gutenberg#32370
 - Fix block alignment styles in the editor WordPress/gutenberg#32454
 - Fix some block toolbar overlaps WordPress/gutenberg#32424
 - Fix content loss when switching list types WordPress/gutenberg#32432


Performance:
 - Improve the performance of buttons block WordPress/gutenberg#32356
 - Improve the performance of the container blocks WordPress/gutenberg#32380

Props noisysocks, nosolosw, jorgefilipecosta.
See #52991.


git-svn-id: https://develop.svn.wordpress.org/trunk@51089 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Jun 8, 2021
@youknowriad
Block Editor: Package updates for 5.8 beta 1.
1516d05 
This includes the following fixes:


Widgets Editor:
  - Load widgets.php WordPress/gutenberg#32299
 - Fix Legacy Widget Preview WordPress/gutenberg#32300
 - Fix error when saving empty Legacy Widget block WordPress/gutenberg#32359

Widget blocks in the customizer: 
 - Fix deselection blocks when the inspector is open WordPress/gutenberg#32361
 - Display wide widgets as popovers WordPress/gutenberg#31736

Global Styles:
 - Align classNames generation between client and server WordPress/gutenberg#32352
 - Group typography block supports WordPress/gutenberg#32252 WordPress/gutenberg#32444 WordPress/gutenberg#32459
 - Make theme.json syntax errors more visible to the users WordPress/gutenberg#32404


Template Editor:
  - Update the appearance of the template details WordPress/gutenberg#32042
  - Fix layout definition WordPress/gutenberg#32425
  - Fix grouping post content block WordPress/gutenberg#32453

Miscellaneous:
 - Prevent saving when the post is locked WordPress/gutenberg#32341
 - Fix allowed block patterns selector WordPress/gutenberg#32376
 - Fix wrong results in the Post Author picker WordPress/gutenberg#32344
 - Fix notices position in top toolbar mode WordPress/gutenberg#32238
 - Allow non-latin characters in post slugs WordPress/gutenberg#32232
 - Fix Random collapse of the color settings panel WordPress/gutenberg#32388
 - Fix theme logo theme mode not being removed on theme removal WordPress/gutenberg#32370
 - Fix block alignment styles in the editor WordPress/gutenberg#32454
 - Fix some block toolbar overlaps WordPress/gutenberg#32424
 - Fix content loss when switching list types WordPress/gutenberg#32432


Performance:
 - Improve the performance of buttons block WordPress/gutenberg#32356
 - Improve the performance of the container blocks WordPress/gutenberg#32380

Props noisysocks, nosolosw, jorgefilipecosta.
See #52991.

Built from https://develop.svn.wordpress.org/trunk@51089


git-svn-id: http://core.svn.wordpress.org/trunk@50698 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott pushed a commit to gMagicScott/core.wordpress-mirror that referenced this pull request Jun 8, 2021
@youknowriad
Block Editor: Package updates for 5.8 beta 1.
b914570 
This includes the following fixes:


Widgets Editor:
  - Load widgets.php WordPress/gutenberg#32299
 - Fix Legacy Widget Preview WordPress/gutenberg#32300
 - Fix error when saving empty Legacy Widget block WordPress/gutenberg#32359

Widget blocks in the customizer: 
 - Fix deselection blocks when the inspector is open WordPress/gutenberg#32361
 - Display wide widgets as popovers WordPress/gutenberg#31736

Global Styles:
 - Align classNames generation between client and server WordPress/gutenberg#32352
 - Group typography block supports WordPress/gutenberg#32252 WordPress/gutenberg#32444 WordPress/gutenberg#32459
 - Make theme.json syntax errors more visible to the users WordPress/gutenberg#32404


Template Editor:
  - Update the appearance of the template details WordPress/gutenberg#32042
  - Fix layout definition WordPress/gutenberg#32425
  - Fix grouping post content block WordPress/gutenberg#32453

Miscellaneous:
 - Prevent saving when the post is locked WordPress/gutenberg#32341
 - Fix allowed block patterns selector WordPress/gutenberg#32376
 - Fix wrong results in the Post Author picker WordPress/gutenberg#32344
 - Fix notices position in top toolbar mode WordPress/gutenberg#32238
 - Allow non-latin characters in post slugs WordPress/gutenberg#32232
 - Fix Random collapse of the color settings panel WordPress/gutenberg#32388
 - Fix theme logo theme mode not being removed on theme removal WordPress/gutenberg#32370
 - Fix block alignment styles in the editor WordPress/gutenberg#32454
 - Fix some block toolbar overlaps WordPress/gutenberg#32424
 - Fix content loss when switching list types WordPress/gutenberg#32432


Performance:
 - Improve the performance of buttons block WordPress/gutenberg#32356
 - Improve the performance of the container blocks WordPress/gutenberg#32380

Props noisysocks, nosolosw, jorgefilipecosta.
See #52991.

Built from https://develop.svn.wordpress.org/trunk@51089


git-svn-id: https://core.svn.wordpress.org/trunk@50698 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@youknowriad
Copy link
Copy Markdown
Contributor

youknowriad commented Jun 9, 2021

Check-picked into 10.8 release branch

youknowriad pushed a commit that referenced this pull request Jun 9, 2021
@thisissandip @youknowriad
Fixed random collapse of the color settings section (#32388)
ad426e2
F-Wilke pushed a commit to FiliagoDev/WordPress that referenced this pull request Jul 31, 2021
@youknowriad @F-Wilke
Block Editor: Package updates for 5.8 beta 1.
86696e1 
This includes the following fixes:


Widgets Editor:
  - Load widgets.php WordPress/gutenberg#32299
 - Fix Legacy Widget Preview WordPress/gutenberg#32300
 - Fix error when saving empty Legacy Widget block WordPress/gutenberg#32359

Widget blocks in the customizer: 
 - Fix deselection blocks when the inspector is open WordPress/gutenberg#32361
 - Display wide widgets as popovers WordPress/gutenberg#31736

Global Styles:
 - Align classNames generation between client and server WordPress/gutenberg#32352
 - Group typography block supports WordPress/gutenberg#32252 WordPress/gutenberg#32444 WordPress/gutenberg#32459
 - Make theme.json syntax errors more visible to the users WordPress/gutenberg#32404


Template Editor:
  - Update the appearance of the template details WordPress/gutenberg#32042
  - Fix layout definition WordPress/gutenberg#32425
  - Fix grouping post content block WordPress/gutenberg#32453

Miscellaneous:
 - Prevent saving when the post is locked WordPress/gutenberg#32341
 - Fix allowed block patterns selector WordPress/gutenberg#32376
 - Fix wrong results in the Post Author picker WordPress/gutenberg#32344
 - Fix notices position in top toolbar mode WordPress/gutenberg#32238
 - Allow non-latin characters in post slugs WordPress/gutenberg#32232
 - Fix Random collapse of the color settings panel WordPress/gutenberg#32388
 - Fix theme logo theme mode not being removed on theme removal WordPress/gutenberg#32370
 - Fix block alignment styles in the editor WordPress/gutenberg#32454
 - Fix some block toolbar overlaps WordPress/gutenberg#32424
 - Fix content loss when switching list types WordPress/gutenberg#32432


Performance:
 - Improve the performance of buttons block WordPress/gutenberg#32356
 - Improve the performance of the container blocks WordPress/gutenberg#32380

Props noisysocks, nosolosw, jorgefilipecosta.
See #52991.

Built from https://develop.svn.wordpress.org/trunk@51089


git-svn-id: http://core.svn.wordpress.org/trunk@50698 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@youknowriad youknowriad youknowriad approved these changes

@ellatrix ellatrix Awaiting requested review from ellatrix

@oandregal oandregal Awaiting requested review from oandregal

@jorgefilipecosta jorgefilipecosta Awaiting requested review from jorgefilipecosta

Assignees

No one assigned

Labels

[Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 10.8

Development

Successfully merging this pull request may close these issues.

Block Settings: Colors section randomly collapses/loses focus

2 participants

@thisissandip @youknowriad