Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Reusable block save button, snackbar on save and Welcome Guide #32464

Conversation

thisissandip
Copy link
Contributor

@thisissandip thisissandip commented Jun 4, 2021

Fixes #32020

Description

Added a Save Button for Reusable Blocks in Blocks Toolbar. If there are no changes, the save button is disabled. When a change is made in that particular reusable block. One can save the changes from the block toolbar. Once saved, the user is notified with a snackbar about the save. The snackbar's 'Learn More' opens the Reusable Block Welcome Guide which also has a link to external documentation.

Since the image (gif) for the welcome guide is not ready yet. I have kept a plain background in its place.
I will add the image whenever it's made available.

How has this been tested?

  1. Select a Reusable block
  2. Make Changes
  3. Save the Reusable Block from Toolbar
  4. A snackbar should appear at the bottom left
  5. Click on Snackbar's Learn More. This should open the Welcome guide.

Screenshots

ReusableBlockSaveButton.mov

Types of changes

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.

Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Thanks for working on this PR, @thisissandip.

I left few comments that I think would be nice to address before merging.

I'm not 100% sure about the Welcome Guide. Maybe the "Learn More" in snackbar should link to external documentation?

cc @critterverse

packages/block-library/src/block/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/block/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/block/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/block/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/block/edit.js Outdated Show resolved Hide resolved
@Mamaduka Mamaduka added [Block] Block The "Reusable Block" Block [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) labels Jun 9, 2021
@critterverse
Copy link
Contributor

Nice! Thanks for working on this @thisissandip.

I can create the GIF asset for the Welcome Guide — will follow up on this next week.

A couple of notes on the PR:

  • There are some changes that don't trigger the "Save" button in the toolbar to activate — I was seeing this when changing between different Duotone colors on an inner Image block or turning on/off the "toggle full height" option, for example. It seems to trigger it sometimes but not every time
  • Can we adjust the text in the snackbar to remove the capital letters on the words "saved" and "more." It should look like: "Reusable block saved. Learn more"
  • Let's change the CTA at the bottom of the Welcome Guide from "Get started" to "Got it"
  • I think we can remove the link to the external support resource within the Guide for now until we have some good support documentation to link out to

@thisissandip
Copy link
Contributor Author

@Mamaduka Thank you for the review. I have made the required changes. Let me know if this looks good! 😄

@thisissandip
Copy link
Contributor Author

@critterverse Thank you for taking a look, I have updated the code. Those issues are now fixed.
Also, I have made the required changes to the snackbar and welcome guide.

ReusableBlock_Save.mov

Looking forward to that GIF! 😄

Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Thanks for the follow-up, @thisissandip.

I left few minor comments, and I think we're good to land after this.

I'm still not 100% sure about the "Welcome Guide." In my experience, editors display similar guides when the user accesses the screen for the first time.

I general, I think it's a nice addition, just not sure if it's the right place. So I would love to get another opinion before we move forward with this.

cc @jasmussen

packages/block-library/src/block/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/block/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/block/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/block/edit.js Outdated Show resolved Hide resolved
@jasmussen
Copy link
Contributor

Thanks for the PR, thanks for the ping. This is what I see:

this

I love the work @critterverse has done here, and this PR sticks to that very impressively, good work all around.

A few thoughts:

  • The focus style for the save button is a white square inside. Seems like it should just be the same focus style as other primary buttons.
  • The animated asset and contents of the "guide screen" is missing — almost certainly known, but just obviously something we need in place for this to land.
  • The Save button is grouped with the ellipsis button. Which never occurred to me as an option — I've always thought of the ellipsis as always needing its own group. However I can see the high level sense it makes: it can be thought of as part of the "More" group. I would probably put the Save button in its own "Other" group, but I also appreciate the desire to use borders and separators sparingly, so take it only as a thought!

It seems the primary open question is whether it's okay to open a reusable blocks guide from the snackbar, compared to opening it automatically when you edit a reusable block the first time. In principle @Mamaduka is right, for the time being we've only done the latter. At the same time, I appreciate @critterverse's solution on a personal level: whenever I see a "welcome guide" like this, I immediately and quickly dismiss, almost as if it was an advertisement. For me, the extra friction of a click is appreciated.

I can understand it also might be enough friction that no-one will ever see that guide and simply ignore that "Read more" link. But since this is working well, it seems fine to land this behavior and get a feel for it in the plugin: we can always double back and tweak it if it doesn't work as well in practice.

Thanks again for the work here! 👏

@Mamaduka
Copy link
Member

Thanks for the feedback, @jasmussen.

whenever I see a "welcome guide" like this, I immediately and quickly dismiss, almost as if it was an advertisement.

I've also acquired this habit 😄 , but I assume this is helpful for new users who don't spend every day in the editor.

Welcome Modal assets are now hosted on WP.org. I'll create a new ticket on meta once we're close to land this PR.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jun 15, 2021

Thanks for working on this feature, @thisissandip

Various adjustments / new features to the Reusable block needs to also be considered for possible backporting to WP 5.7.3.
To fix various complaints that we have received in relation to Reusable blocks in WP 5.7.
@peterwilsoncc

A question that comes up...
Should there also be a discard/undo change button (using text or an undo icon) next to the save button? As if a user makes a mistake it also needs to be just as easy to undo and not save the change.

Btw I do think there should be a vertical black separator line between the Save button and the ellipsis (3 dot) drop down menu. As the ellipsis drop down should be separate from other toolbar icons.


Associated issue:
Reusable block: Add a lock to the parent toolbar to protect the inner content from accidental editing.
#32461
Is this also an issue you are able to work on, @thisissandip ?

Another issue where I am rethinking various Reusable block features:
#31163

@thisissandip
Copy link
Contributor Author

thisissandip commented Jun 15, 2021

I have moved the Save button to its own group as suggested by @jasmussen and @paaljoachim. Also, made the suggested changes by @Mamaduka. Thank you guys for reviewing it! 😄

SaveBtnReusableBlock.mov

@thisissandip
Copy link
Contributor Author

thisissandip commented Jun 15, 2021

@paaljoachim Thank you for taking a look 😄

I just went through issue #32461.
I have successfully implemented the unlock and lock feature. Should I create another PR for it or extend it in this PR?

@paaljoachim
Copy link
Contributor

paaljoachim commented Jun 15, 2021

Hi @thisissandip

That is awesome!

Yes, do please create a new PR for the lock/unlock feature.
We can then continue discussing the specific feature in the PR.

@paaljoachim paaljoachim added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Jun 15, 2021
@critterverse
Copy link
Contributor

critterverse commented Jun 15, 2021

Thanks for the feedback, all! @jasmussen's note about adding the additional divider to the toolbar is a great call and the change you already made there looks perfect, @thisissandip. Just wanted to highlight one other note that I think we should take a look at:

The focus style for the save button is a white square inside. Seems like it should just be the same focus style as other primary buttons.

The default focus style looks like this for reference (see also this link to the relevant section of WP Design Library):

primary-button-style-focus

Here's what I came up with for the GIF asset (it only plays once so you might want to open in a new tab and refresh a few times):

welcome-reusable

It would be great to get some additional eyes on this — @pablohoneyhoney, does this asset look ok to you to use in a new Welcome Guide to introduce reusable blocks? This implementation is based on some of your previous notes from #29871. Please see the most recent video above in #32464 (comment) for context!

Welcome Modal assets are now hosted on WP.org. I'll create a new ticket on meta once we're close to land this PR.

Thanks @Mamaduka! I was just looking at this Trac ticket and tried to match the asset as closely as possible to what was uploaded there. Looks like there is also a SVG static asset needed which I can supply as well pending any feedback :)

@Mamaduka
Copy link
Member

Thanks, @critterverse. If you can provide assets similar to the ones in the Trac ticket, that would be perfect.

@thisissandip it looks like we have ESLint errors. We should fix those to pass all the required checks.

@paaljoachim
Copy link
Contributor

The lock/unlock PR will affect this PR, as one should not be able to save a change as long as the lock is closed/locked.
Which means the lock/unlock PR needs to be merged before this PR is merged.

@Mamaduka
Copy link
Member

The lock/unlock PR will affect this PR, as one should not be able to save a change as long as the lock is closed/locked.
Which means the lock/unlock PR needs to be merged before this PR is merged.

Not necessarily. The "Save" button is disabled if there are no edits, and I think this will be the case when the block is "locked."

@paaljoachim
Copy link
Contributor

Good point George!

Let us get the lock/unlock PR in place first, so that we can also add some explorations in it before this PR merged.
I also believe we need to get this PR in front of more eyes. I happen to come across it while reading the Slack core-editor-commits channel.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jun 16, 2021

Adding in this comment especially:
".....Surely at that point it would be wise to prompt “If you save this block it will update all other uses of it: maybe you want to convert it to an ordinary block?” and offer a Y/N option there. That would have saved me hours of mess."

EDIT:
Also adding in this comment:
"Surely if a reusable block has already been used in any other page/post it should be locked and you should be prompted if you try to edit it and warned that any edit will immediately change all other uses of the block? I would expect a dialogue to come up asking if I'm sure I want to edit the reusable block and offering to convert to an ordinary block."

NB! Both of the above comments needs to be addressed in the Locking PR as well as when clicking the Save button.


Keeping the above comment in the back of my mind while I test this PR using this method: https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/

After activating the special Gutenberg plugin I received a lot of fatal errors, so that I had to manually remove the plugin from the plugin folder. It would be nice to get this fixed making it easier to test this PR.

@shaunandrews
Copy link
Contributor

It would be great to get some additional eyes on this — @pablohoneyhoney, does this asset look ok to you to use in a new Welcome Guide to introduce reusable blocks?

I'm not Pablo, but I like the animation. It could probably be a little smoother; There's some jitter in it now. Some easing could help a little.

@critterverse
Copy link
Contributor

This is a subtle change but adding some easing definitely helps, thanks for the suggestion @shaunandrews! I also made a minor adjustment to the border radius on the page elements to better match the existing assets. Here's the updated version:

welcome-reusable

@Mamaduka let me know when we have a Trac ticket and I'll add the SVG there, thanks again for your help with the assets 😁

I also had a few quick thoughts about some of the feedback we've been hearing around current confusion re: editing Reusable blocks (some of which was shared above by @paaljoachim). I think there are some small adjustments that we could include in this PR that might help:

  • Add a more descriptive tooltip on the Save button hover — perhaps it could say something like, "Save globally" or "Update all instances"
  • Expand on the description in the Welcome Guide — maybe we could add an additional sentence such as, "To make local changes, try converting to a regular block first."

@thisissandip
Copy link
Contributor Author

I have updated the label to "Save Globally" and increased the margin of the save button since the button was not centered correctly within the Toolbar group as suggested by @critterverse

@@ -18,7 +18,7 @@
// Styles for save button
.components-toolbar-group {
.block-library-block__reusable-block-save-button {
margin: 7px;
margin: 8px;
Copy link
Contributor

Choose a reason for hiding this comment

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

You can use $grid-unit-10 instead of 8px if you like.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh, Yes! Thank you! 😄

@critterverse
Copy link
Contributor

critterverse commented Sep 8, 2021

Tested in Chrome, Firefox, and Safari and all is working well ✨

Small note that on the parent selector, it looks like the focus indicator is cutting off the dot on the left edge a tiny bit. It looks ok on the block toolbar though where the spacing should be the same:

RB-parent-selector

RB-toolbar

@thisissandip
Copy link
Contributor Author

Thank you for pointing this out @critterverse!

I've updated the margin of the unsaved changes indicator in the parent selector button. Now it looks like this when focused:

image

@critterverse
Copy link
Contributor

critterverse commented Sep 13, 2021

Small note that on the parent selector, it looks like the focus indicator is cutting off the dot on the left edge a tiny bit.

@thisissandip Sorry for not being very clear in my feedback above! To clarify, I think we could make an adjustment to the focus indicator versus adjusting the dot placement. Otherwise it causes the dot to jump around when moving between the toolbar and parent selector:

dot-indicator

Here's the spacing specs for easy reference:

EDIT: Revised the specs below to match the current spacing used in this PR and deleted a comment referencing outdated spacing

toolbar-specs

Re: Parent selector focus indicator — I wonder if we could resolve the issue with the dot being cut off by making the focusable area 2px wider? 🤔

Before adjustment:

no-change

After adjustment:

updated

@thisissandip
Copy link
Contributor Author

Hi @critterverse, thanks for the clarification!

Re: Parent selector focus indicator — I wonder if we could resolve the issue with the dot being cut off by making the focusable area 2px wider? 🤔

Increasing the Parent selector focus indicator area by 1px solved the issue.

Screen-Recording-2021-09-14-at-8

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Thanks for your work here @thisissandip and for the iterations! Cool work! 💯

When I first saw the problem that you're trying to solve I thought that a custom hook would be good and then we could use that for other similar blocks, like Template Parts maybe.. Unfortunately this is not so easy as we need a dependency of core-data for hasEditsForEntityRecord, unless there is another way I didn't think of.. 🤔

Regarding the slots I'm a bit concerned creating two of them and so specific to the thing they add (unsaved changes indicator). Do we expect something else to be added before the block icon? Should we rename them to something more generic?

I don't have a clear proposal for these - just some thoughts of mine 😄

Also have you tried using only one slot? Could this work? And lastly without seeing all the css code, could some css added with :after (or something similar) without adding a new div node, could work and simplify things?

import { Guide } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I have mixed feelings about this as well since we are not introducing a new concept here and save button/action used to be there before.. Also I've tried your PR a bit yesterday and today and both times I loaded a post the first time, it showed me the basic welcome guide. I didn't investigate why this happened though. Did this happen for anyone else?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The welcome guide will show up only after clicking the "Learn more" option in the snackbar like this:

Reusable block welcome guide

isChildSelected: _isChildSelected,
isSelected: _isSelected,
};
}, [] );
Copy link
Contributor

Choose a reason for hiding this comment

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

clientId is a dependency here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thank you! You saved me from future errors! 🚀


const parents = getBlockParents( selectedBlockClientId );
const firstParentClientId = parents[ parents.length - 1 ];
const _isChildSelected = firstParentClientId === clientId;
Copy link
Contributor

Choose a reason for hiding this comment

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

Shouldn't the case of changing nested blocks inside the reusable block been handled somehow? I was expecting here to see a getBlockRootClientId and check if is reusable and hasEdits... If we add a Group with a Paragraph inside the reusable block and change that paragraph, the block has edits but there is no indication for the changes. Of course in this case the Group block is the parent.. I'm not sure how it would be best to show this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was expecting here to see a getBlockRootClientId and check if is reusable and hasEdits

Yes, this is much cleaner and better. Thank you for the suggestion. Updating this in my next commit.

If we add a Group with a Paragraph inside the reusable block and change that paragraph, the block has edits but there is no indication for the changes. Of course in this case the Group block is the parent.. I'm not sure how it would be best to show this.

Even I am not sure about this case cause one has to select the Reusable block itself to access the save button in the block toolbar.

Copy link
Contributor

Choose a reason for hiding this comment

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

If we add a Group with a Paragraph inside the reusable block and change that paragraph, the block has edits but there is no indication for the changes.

Introducing dot indicators into List view has come up as one possible solution that would help with more visibility in instances with a lot of nesting. Needs a design explore but I could look at this alongside other follow ups in #33988!

@thisissandip
Copy link
Contributor Author

Looks like the icon is jumping around a bit when switching between the parent selector and toolbar.

@critterverse While I was investigating this, I found that the jump of the icon occurs on different screen widths. For example:

Screen width 942px — icon jumps
Screen width 943px — no jump
Screen width 944px — icon jumps
Screen width 945px — no jump

and again

Screen width 1238px — icon jumps
Screen width 1237px — no jump

It seems the jump occurs only when the width of the screen size is an even number.

This is a weird issue, I can't figure out the reason. (Maybe because of my monitor's low resolution?)

Can you confirm if you can replicate this on your side?

@thisissandip
Copy link
Contributor Author

@ntsekouras Thank you for taking a look and for the code review! 😄

Regarding the slots I'm a bit concerned creating two of them and so specific to the thing they add (unsaved changes indicator). Do we expect something else to be added before the block icon? Should we rename them to something more generic?

Also have you tried using only one slot? Could this work?

I gave this a shot and was able to implement this using only one slot and a single Unsaved Changed Indicator component called BlockUnsavedChangesIndicator.

I have created a separate PR: thisissandip#2 in my forked repository to keep things clean.

I will really appreciate it if you can take a look so maybe we can drop using 2 separate slots and 2 different components for the unsaved changed indicator.

And lastly without seeing all the css code, could some css added with :after (or something similar) without adding a new div node, could work and simplify things?

Adding :after or :before to the block icon decreases the block icon size and creates a situation like this:

image

That's why I added a div for the dot (unsaved changes indicator)

@critterverse
Copy link
Contributor

It seems the jump occurs only when the width of the screen size is an even number. This is a weird issue, I can't figure out the reason.

Oh weird! Yes, I can replicate...

Maybe because of my monitor's low resolution?

FWIW I'm seeing the jump even when testing on a retina screen 🤔


// move the parent selector icon to right side to make room for the dot
.block-editor-block-icon {
margin-right: -15px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Changing this value to -16px (or $grid-unit-20) seems to get rid of the visual jump for me (tested on a couple of different screens at different viewport sizes).

@kellychoffman
Copy link
Contributor

This has sat for a bit but looks good from a UX perspective. Can we land this?

@paaljoachim
Copy link
Contributor

paaljoachim commented Nov 1, 2021

Let's land this outside of WordPress 5.9, as it feels like one part of a bigger change.
(Meaning let's land this at earliest next week. After the feature freeze date for 5.9 in relation to the Gutenberg plugin is on Friday the 5th of November.)

@talldan
Copy link
Contributor

talldan commented Nov 3, 2021

@thisissandip Is this something you're still interested in progressing? I realise the scope of this change increased dramatically, but it is a really valuable change, so if you're still interested that would be really great.

If you don't have time or you have other commitments, would you be ok with another community member working on this? Ideally it'd be done in a way where you still get props for the majority of the work.

Comment on lines +9 to +24
// add class to the parent selector to increase it's width
const parentSelectorBtn = document.querySelector(
'.block-editor-block-parent-selector'
);
parentSelectorBtn.classList.add( 'parent-block-has-changes' );
// add class to the contextual toolbar to move it to the right side
const contextualToolBar = document.querySelector(
'.block-editor-block-contextual-toolbar'
);
contextualToolBar.classList.add( 'parent-block-has-changes' );

return () => {
// remove classes from the parent selector and contextual toolbar when component unmounts
parentSelectorBtn.classList.remove( 'parent-block-has-changes' );
contextualToolBar.classList.remove( 'parent-block-has-changes' );
};
Copy link
Contributor

Choose a reason for hiding this comment

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

Something that I mentioned on the other PR (thisissandip#1), I think it'd be good to make this slot not modify the element's class names in this way. This couples the UnsavedChangesIndicator to the class name of the parent selector button, if that classname changes then this breaks.

I recall it was because the parent selector button is positioned absolutely. That seems unusual to me, and like some tech debt. Maybe those toolbar styles can be refactored.

@thisissandip
Copy link
Contributor Author

Hi @talldan 👋 ,

If you don't have time or you have other commitments, would you be ok with another community member working on this? Ideally, it'd be done in a way where you still get props for the majority of the work.

I am so sorry for not being able to update this PR as I am busy with some other commitments. It would be okay with me if someone else pick this up from here 🙂

I just want to make a note of the things that are left for this PR:

  1. The dot indicator is jumping around a bit when switching between the parent selector and toolbar. This can be solved by making minor adjustments in CSS. As suggested by @critterverse here.
  2. The UnsavedChangesIndicator should not modify the class name of the parent selector button here because it couples the UnsavedChangesIndicator with the class name of the parent selector button which can lead to breaking changes as pointed out by @talldan.

Once again, I am sorry for not being able to work on this PR at the moment. I'll come back to contribute to Gutenberg again in a few weeks!

@critterverse
Copy link
Contributor

The dot indicator is jumping around a bit when switching between the parent selector and toolbar. This can be solved by making minor adjustments in CSS.

@kellychoffman added this fix in 740a109 so I think the only remaining issue is the one @talldan mentioned.

I am so sorry for not being able to update this PR as I am busy with some other commitments.

Totally understandable, @thisissandip. Thank you so much for all the great work on this PR and for seeing it through across so many iterations! 👏

@talldan
Copy link
Contributor

talldan commented Feb 20, 2024

The related issue has now been closed, so I'll close the PR as well. Thanks for all the explorations here.

@talldan talldan closed this Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Block The "Reusable Block" Block [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) [Type] New API New API to be used by plugin developers or package users.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a snackbar with Welcome Guide on first pattern save in Patterns or in editor