Replace FullScreen and FullContainer components with useLayout hook

[eason9487]

Changes proposed in this Pull Request:

Closes #311

• Move layout CSS styles to primary css folder.
• Implement the useLayout hook.
• Replace all <FullScreen> and <FullContainer> with useLayout hook.
• Move the CSS for hiding the <Spinner> of <Suspense> to global scope to globally prevent the flickering when initial loading GLA admin pages.
• Use CSS approach instead to override #wpbody's inline margin-top. To prevent the flickering when overriding the margin-top.

Screenshots:

🎥 Full page layout

🎥 Full page layout with new WooCommerce navigation feature

🎥 Full content layout

🎥 Full content layout with new WooCommerce navigation feature

Detailed test instructions:

Full page layout

1. Go to the Get started page /wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fstart
2. Click "Set up free listings in Google" to enter the onboarding page in full-page layout.
   • The whole page should be the same visual result as before.
   • There should be no flickering above the header with "Get started with Google Listings & Ads" content. The flickering problem looks like this:
     
3. Refresh the current page.
   • The whole page should be the same visual result as before.
   • There should be no flickering above the header with "Get started with Google Listings & Ads" content.
4. Go back to the Get started page. The full-page layout should not be applied.

Full content layout

1. Go to the Dashboard page /wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fdashboard
2. Click "Add paid campaign" to enter the campaign creation page in full-content layout.
   • The whole page should be the same visual result as before.
   • There should be no flickering above the header with "Create your paid campaign" content.
3. Refresh the current page.
   • The whole page should be the same visual result as before.
   • There should be no flickering above the header with "Create your paid campaign" content.
4. Go back to the Dashboard page. The full-content layout should not be applied.

The patch of hiding the <Spinner> of <Suspense>

1. Go to any of GLA admin pages, for example, the Reports page.
2. Refresh the current page.
3. There should be no flickering above the navigation tab. The flickering problem looks like this:
   

With new WooCommerce navigation

1. Install and activate the WooCommerce Admin extension.
2. Go to WC settings page to enable the new navigation feature /wp-admin/admin.php?page=wc-settings&tab=advanced&section=features
3. Repeat the above tests with new WooCommerce navigation.

Additional details:

💡 Why move the workaround of hiding the initial loading spinner to global scope.

• The root cause of whole page flickering was using <Suspense fallback={ <Spinner /> }> at the top layer.
• The flickering issue has been fixed and released with WC-admin 2.9.0.
• Therefore, this PR adds a temporary workaround to patch the same problem and notes when this patch can be removed.

Changelog entry

Fix - Prevent page flickering when loading admin pages of this extension.

[eason9487]

Most of the CSS was moved from <FullScreen> and <FullContainer> and merged to a single file. It'd be easier to check the diff from this link.

[ianlin]

Tested locally and all good. Using a custom hook is cleaner than before. 👍

• ✅ Full page layout looks the same as before.
• ✅ Full content layout looks the same as before.
• ✅ There are no flickering in both layouts.
  • ❔ However I didn't see the flickering either when using develop branch.
• ✅ There is no spinner when refreshing any of the GLA admin page
  • ❔ However I didn't see the spinner either when using develop branch.
• ✅ The CSS approach to override margin-top of #wpbody instead of useWPBodyMarginOffsetEffect hook works as expected.
• ✅ Everything works as expected when testing against the new WC navigation.
  • Side note: when using WC 6.1, there is no WC navigation settings in wp-admin/admin.php?page=wc-settings&tab=advanced&section=features, downgrading to WC 6.0 in order to test the above tasks against the new navigation.
• ✅ Code is clean and easy to understand.
• 💅 Left a non-blocking comment below.

[eason9487]

@ianlin, thanks for the review!

• ✅ There are no flickering in both layouts.
  • ❔ However I didn't see the flickering either when using develop branch.
• ✅ There is no spinner when refreshing any of the GLA admin page
  • ❔ However I didn't see the spinner either when using develop branch.

💡 The <Spinner> of <Suspense> was removed from WC-admin 2.9.0 and is included in WC 6.0. So if you're testing with WC 6.0+ or activated WC-admin extension 2.9.0+, it would not have the flickering problem.

The flickering does not always occur every time. Inserting a breakpoint would be easier to observe.

The <Spinner> of <Suspense>

1. On the GLA dashboard page, add breakpoint of attribute modifications on <body>
   
2. Refresh page.
   

#wpbody's inline margin-top

1. Similar to above, add breakpoint of attribute modifications on <div id="wpbody"> on the campaign creation page.
2. Refresh page.
   

[ianlin]

@eason9487

💡 The of was removed from WC-admin 2.9.0 and is included in WC 6.0. So if you're testing with WC 6.0+ or activated WC-admin extension 2.9.0+, it would not have the flickering problem.

Thanks for sharing this info and the breakpoint tip! Now I can reproduce the flickering problem in develop branch and confirm the problem is fixed in this PR. 👍