Site Editor: Update save panel's cancel button from icon to visible text

[jonahtanjz]

Description

Resolves #29886

The current save panel for site editor uses an X icon to close the panel. This is inconsistent with the post editor's cancel button. This PR updates the save panel's cancel button of site editor from the X icon to the cancel button with text, similar to post editor's button.

How has this been tested?

1. Open up site editor
2. Make any changes to the page
3. Click on the "Save" button to open up the save panel
4. The save and cancel buttons should be consistent with the design of the post editor panel's buttons

Screenshots

Before	After

Types of changes

Enhancement

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.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jonahtanjz! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[kevin940726]

Thank you for making this PR! Code looks good and works as expected!

However, we could further tidy this up using <Flex>, <FlexItem> and gap. The JSX would look something like:

<Flex className="entities-saved-states__panel-header" gap={ 2 }>
  <FlexItem
    isBlock
    as={ Button }
    { ...otherProps }
  >
    { __( 'Save' ) }
  </FlexItem>
  <FlexItem
    isBlock
    as={ Button }
    { ...otherProps }
  >
    { __( 'Cancel' ) }
  </FlexItem>
</Flex>

Then, we can delete all those custom CSS:

 .entities-saved-states__panel-header {
   /* Other styles... */
-  display: flex;
-  align-items: center;
-  align-content: space-between;
-
-  .components-button {
-    flex-grow: 1;
-    justify-content: center;
-    margin: auto;
-  }
-
-  .editor-entities-saved-states__cancel-button {
-    margin-left: 4px;
-  }
-
-  .editor-entities-saved-states__save-button {
-    margin-right: 4px;
-  }
 }

This could be a follow-up though 👍 .

[kevin940726]

I wonder if we should keep this explicit label indicating that it's closing the panel. Could use some inputs from accessibility folks. WFYT @tellthemachines ?

[jonahtanjz]

@kevin940726 Thanks for the review and suggestion! Since I'm already on this, I've changed it to use <Flex> and <FlexItem>, and also removed the custom CSS :)

[kevin940726]

Looks good! Thank you ♥️ !

[github-actions]

Congratulations on your first merged pull request, @jonahtanjz! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

[jeffpaul]

@jonahtanjz any chance you could confirm your WordPress.org account so that we can properly credit you in next week's WordPress 6.0 release?