Add pre-publish sidebar #44331

octaedro · 2024-02-02T20:27:53Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR adds a prepublish sidebar to the product editor.

Closes #43704.

ACs

Tasks

Give feedback

Create the sidebar/modal and add it to the right side of the product editor AkVNGImLgSqCObTQ3idVn7-fi-3359_345477

Create the sidebar/modal and add it to the right side of the product editor AkVNGImLgSqCObTQ3idVn7-fi-3359_345477
Options
Successfully updated the issue's project

There was an error updating the issue's project
When the user clicks `Add` in the top right corner, a panel slides out from the right edge of the screen. It looks and works exactly like the pre-publish sidebar in the post/site editor.

When the user clicks Add in the top right corner, a panel slides out from the right edge of the screen. It looks and works exactly like the pre-publish sidebar in the post/site editor.
Options
Successfully updated the issue's project

There was an error updating the issue's project
Add the `Add` button to the sidebar to persist the unsaved changes AkVNGImLgSqCObTQ3idVn7-fi-3359_345477

Add the Add button to the sidebar to persist the unsaved changes AkVNGImLgSqCObTQ3idVn7-fi-3359_345477
Options
Successfully updated the issue's project

There was an error updating the issue's project
Add the `Cancel` button to the sidebar to hide/close it AkVNGImLgSqCObTQ3idVn7-fi-3359_345477

Add the Cancel button to the sidebar to hide/close it AkVNGImLgSqCObTQ3idVn7-fi-3359_345477
Options
Successfully updated the issue's project

There was an error updating the issue's project
Add the title section of the sidebar AkVNGImLgSqCObTQ3idVn7-fi-3359_345477

Add the title section of the sidebar AkVNGImLgSqCObTQ3idVn7-fi-3359_345477
Options
Successfully updated the issue's project

There was an error updating the issue's project
Options

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Make sure the New product editor and the Prepublish sidebar (product-pre-publish-modal) are enabled under /wp-admin/admin.php?page=wc-settings&tab=advanced&section=features.
Go to Products > Add New
Add a product Name and press Add.
The new prepublish sidebar should be visible.
Verify that the Cancel button closes the sidebar.
Press the Add button inside the sidebar and verify it works correctly.

Changelog entry

Automatically create a changelog entry from the details below.

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Comment

github-actions · 2024-02-02T20:53:01Z

Test Results Summary

Commit SHA: 6ce7d48

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	273	0	0	37	0	310	7m 44s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

github-actions · 2024-02-05T19:32:28Z

Hi @louwie17,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

louwie17

Nice work @octaedro, this is a great start, I just left a couple suggestions to align a bit more with the GB implementation.
Also notice one small issue around the scrolling, I left an inline comment.

louwie17 · 2024-02-06T20:50:40Z

packages/js/product-editor/src/components/editor/editor.tsx

+											productId={ product.id }
+										/>
+									)
+								}


It appears that sidebar is used for the actual collapsable sidebar, we may want to use the actions input here, similar to GB. And if we do add an actual expandable/collapsable sidebar we can add it here.

Good call! I did it in the commit 9ae966b

louwie17 · 2024-02-06T20:53:54Z

packages/js/product-editor/src/components/prepublish-sidebar/prepublish-button.tsx

+			} }
+			isBusy={ isBusy }
+			aria-disabled={ isDisabled }
+			children={ __( 'Add', 'woocommerce' ) }


We are moving back to the Publish terminology, this may be part of a separate issue. But it may be worth to start using Publish here already.

What do you think about adding that change in its own PR? We will have to change some E2E tests, as well and I think it makes sense to give that change more visibility. I can create an issue for that if we already don't have one.

Change to its own PR sounds great, we may already have an issue that encapsulates this. I think its related to the dropdown addition for scheduling #40374

louwie17 · 2024-02-06T20:56:02Z

packages/js/product-editor/src/components/prepublish-sidebar/prepublish-sidebar.tsx

+import { store as productEditorUiStore } from '../../store/product-editor-ui';
+import { TRACKS_SOURCE } from '../../constants';
+
+export function PrepublishSidebar( {


Maybe we should stick with Panel instead of Sidebar here to follow the same naming as GB

Good idea! 6a1ed97

louwie17 · 2024-02-06T21:01:35Z

packages/js/product-editor/src/components/prepublish-sidebar/prepublish-sidebar.tsx

+
+	return (
+		<div className="woocommerce-product-publish-panel">
+			<div className="woocommerce-product-publish-panel__actions">


A nitpick, but to follow inline with GB implementation maybe use __header here?

louwie17 · 2024-02-06T21:02:49Z

packages/js/product-editor/src/components/prepublish-sidebar/prepublish-sidebar.tsx

+				<PublishButton
+					productType={ productType }
+					productStatus={ lastPersistedProduct?.status }
+					onSuccess={ closePrepublishSidebar }


We actually don't want the side bar to auto close after its been published, to match GB it stays open and instead displays <product name> is now live. with a close button.
See: https://github.com/WordPress/gutenberg/blob/55fbdd96aa2642dff194cb69ebe02c3669eebae0/packages/editor/src/components/post-publish-panel/index.js#L79

louwie17 · 2024-02-06T21:07:01Z

packages/js/product-editor/src/components/prepublish-sidebar/style.scss

+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;


We also want a fixed position to avoid it from scrolling with the page.

sidebar-scroll.mp4

Done in f4f3eed

octaedro · 2024-02-07T14:54:24Z

Thank you @louwie17 for your suggestions; I just addressed them. Could you take another look at this PR?

louwie17

Thanks for the updates @octaedro, this looks great and tested well!
I think this is fine as is.
It would be great if we can do these things as follow up:

The Add to Publish naming update ( as mentioned in the Add pre-publish sidebar #44331 (comment) )
The issue with the Publish button looking disabled when the product isn't published already ( but saved ) logic should be disabled look if saved and published.
Updating the sidebar to show [product name] is now live. after it has been published and not show the Add/Cancel buttons but instead just an x ( same as the post/site editor ).

octaedro changed the title ~~Add/43704 prepublish sidebar modal~~ Add prepublish sidebar Feb 2, 2024

octaedro changed the title ~~Add prepublish sidebar~~ Add prepublish modal Feb 5, 2024

octaedro requested a review from a team February 5, 2024 19:32

octaedro self-assigned this Feb 5, 2024

octaedro added focus: new product ux revamped product management experience team: Mothra labels Feb 5, 2024

octaedro marked this pull request as ready for review February 5, 2024 19:40

octaedro changed the title ~~Add prepublish modal~~ Add pre-publish modal Feb 6, 2024

octaedro added 5 commits February 6, 2024 11:00

Add prepublish sidebar

519a84f

Add openPrepublishSidebar to store

ed9e310

Add changelog

8a4a70c

Rename modal and small refactor

d2c6132

Add feature flag

f259ff5

octaedro force-pushed the add/43704_prepublish_sidebar_modal branch from 10610a3 to f259ff5 Compare February 6, 2024 14:04

octaedro changed the title ~~Add pre-publish modal~~ Add pre-publish sidebar Feb 6, 2024

octaedro added 5 commits February 6, 2024 11:15

Move prepublish sidebar

e8cbf8f

change import path

b924ed0

Rename classes

9edb35c

Fix width

18e0c42

Fix styles

69e80d5

louwie17 requested changes Feb 6, 2024

View reviewed changes

octaedro added 7 commits February 7, 2024 09:04

Rename prepublish panel

6a1ed97

Rename div class

f65cf26

Remove onSuccess from PublishButton

45fed90

Fix panel position

f4f3eed

Use actions instead of sidebar

9ae966b

Add wc-admin changelog

54d8199

Move changelog

1554447

github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Feb 7, 2024

Fix lint

6ce7d48

octaedro requested a review from louwie17 February 7, 2024 14:54

louwie17 approved these changes Feb 7, 2024

View reviewed changes

octaedro merged commit 19a78cd into trunk Feb 7, 2024
35 checks passed

octaedro deleted the add/43704_prepublish_sidebar_modal branch February 7, 2024 18:30

github-actions bot added this to the 8.7.0 milestone Feb 7, 2024

github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Feb 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add pre-publish sidebar #44331

Add pre-publish sidebar #44331

octaedro commented Feb 2, 2024 •

edited

Tasks

github-actions bot commented Feb 2, 2024 •

edited

github-actions bot commented Feb 5, 2024 •

edited

louwie17 left a comment

louwie17 Feb 6, 2024

octaedro Feb 7, 2024

louwie17 Feb 6, 2024

octaedro Feb 7, 2024

louwie17 Feb 7, 2024

louwie17 Feb 6, 2024

octaedro Feb 7, 2024

louwie17 Feb 6, 2024

louwie17 Feb 6, 2024

louwie17 Feb 6, 2024

louwie17 Feb 6, 2024

octaedro Feb 7, 2024

octaedro commented Feb 7, 2024

louwie17 left a comment •

edited

Add pre-publish sidebar #44331

Add pre-publish sidebar #44331

Conversation

octaedro commented Feb 2, 2024 • edited

Submission Review Guidelines:

Changes proposed in this Pull Request:

Tasks

How to test the changes in this Pull Request:

Changelog entry

Significance

Type

Message

Comment

github-actions bot commented Feb 2, 2024 • edited

Test Results Summary

github-actions bot commented Feb 5, 2024 • edited

louwie17 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

octaedro commented Feb 7, 2024

louwie17 left a comment • edited

Choose a reason for hiding this comment

octaedro commented Feb 2, 2024 •

edited

github-actions bot commented Feb 2, 2024 •

edited

github-actions bot commented Feb 5, 2024 •

edited

louwie17 left a comment •

edited