Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix description styling and remove use of `woocommerce-page` in admin pages (#40218) 

* Move the header data to the body as the header prop does not exist anymore

* Remove explicit setting of __unstableResolvedAssets given get_block_editor_settings already does this

* Remove use of woocommerce-page class in admin to avoid theme conflicts

* Add changelogs

* Revert change for quick test

* Two additional tweaks for admin related styling
This commit is contained in:
louwie17 2023-09-15 17:06:42 -03:00 committed by GitHub
parent 1a10ea78ce
commit 9ea83d6382
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 67 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/fix-39544_description_styling Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: tweak
Remove unnecessary use of woocommerce-page selector for DropdownButton styling.

2
packages/js/components/src/dropdown-button/style.scss
View File

@ -1,4 +1,4 @@
.woocommerce-page .woocommerce-dropdown-button {
.woocommerce-dropdown-button {
background-color: $studio-white;
position: relative;
border: 1px solid $gray-700;

4
packages/js/product-editor/changelog/fix-39544_description_styling Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
Remove use of head prop with IFrame component as it has been removed.

32
packages/js/product-editor/src/components/content-preview/content-preview.tsx
View File

@ -67,26 +67,22 @@ export function ContentPreview( { content }: ContentPreviewProps ) {
return (
<div className="woocommerce-content-preview">
<Iframe
head={
<>
<EditorStyles styles={ parentEditorSettings?.styles } />
<style>
{ `body {
<Iframe className="woocommerce-content-preview__iframe">
<>
<EditorStyles styles={ parentEditorSettings?.styles } />
<style>
{ `body {
overflow: hidden;
}` }
</style>
</>
}
className="woocommerce-content-preview__iframe"
>
<div
className="woocommerce-content-preview__content"
dangerouslySetInnerHTML={ sanitizeHTML( content, {
tags: CONTENT_TAGS,
attr: CONTENT_ATTR,
} ) }
/>
</style>
<div
className="woocommerce-content-preview__content"
dangerouslySetInnerHTML={ sanitizeHTML( content, {
tags: CONTENT_TAGS,
attr: CONTENT_ATTR,
} ) }
/>
</>
</Iframe>
</div>
);

50
packages/js/product-editor/src/components/iframe-editor/editor-canvas.tsx
View File

@ -31,37 +31,35 @@ export function EditorCanvas( {
const mouseMoveTypingRef = useMouseMoveTypingReset();
return (
<Iframe
head={
<>
<EditorStyles styles={ settings?.styles } />
<style>
{
// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
`.is-root-container {
padding: 36px;
display: flow-root;
}
body { position: relative; }`
}
</style>
{ enableResizing && (
<style>
{
// Some themes will have `min-height: 100vh` for the root container,
// which isn't a requirement in auto resize mode.
`.is-root-container { min-height: 0 !important; }`
}
</style>
) }
</>
}
ref={ mouseMoveTypingRef }
name="editor-canvas"
className="edit-site-visual-editor__editor-canvas"
{ ...props }
>
{ children }
<>
<EditorStyles styles={ settings?.styles } />
<style>
{
// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
`.is-root-container {
padding: 36px;
display: flow-root;
}
body { position: relative; }`
}
</style>
{ enableResizing && (
<style>
{
// Some themes will have `min-height: 100vh` for the root container,
// which isn't a requirement in auto resize mode.
`.is-root-container { min-height: 0 !important; }`
}
</style>
) }
{ children }
</>
</Iframe>
);
}

2
plugins/woocommerce-admin/client/dashboard/style.scss
View File

@ -1,4 +1,4 @@
.woocommerce-page:not(.woocommerce-embed-page) #klarna-banner,
.woocommerce-admin-page:not(.woocommerce-embed-page) #klarna-banner,
#klarna-kp-banner {
display: none;
}

2
plugins/woocommerce-admin/client/header/style.scss
View File

@ -63,7 +63,7 @@
width: 100%;
}
.woocommerce-page {
.woocommerce-admin-page {
#contextual-help-link-wrap,
#screen-options-link-wrap {
margin-top: -1px;

4
plugins/woocommerce-admin/client/homescreen/style.scss
View File

@ -1,5 +1,5 @@
.woocommerce-page #wpcontent,
.woocommerce-page.woocommerce_page_wc-admin #wpbody-content {
.woocommerce-admin-page #wpcontent,
.woocommerce-admin-page.woocommerce_page_wc-admin #wpbody-content {
overflow-x: inherit !important; // Overwriting wc-admin css from elsewhere. Necessary to make the right-hand column 'stick'
position: relative;
}

4
plugins/woocommerce-admin/client/layout/style.scss
View File

@ -29,7 +29,7 @@
max-width: 100%;
}
.woocommerce-page {
.woocommerce-admin-page {
.update-nag {
display: none;
}
@ -111,7 +111,7 @@
.woocommerce-task-dashboard__container .components-button.is-button,
.woocommerce-profile-wizard__body .components-button.is-button,
.woocommerce-page .components-modal__frame .components-button.is-button {
.woocommerce-admin-page .components-modal__frame .components-button.is-button {
height: 48px;
padding-left: 25px;
padding-right: 25px;

2
plugins/woocommerce-admin/client/stylesheets/_index.scss
View File

@ -2,7 +2,7 @@
@import './shared/_reset.scss';
// Some WooCommerce Admin page specific resets.
.woocommerce-page {
.woocommerce-admin-page {
.wp-has-current-submenu::after {
right: 0;
border: 8px solid transparent;

2
plugins/woocommerce-admin/client/stylesheets/shared/_global.scss
View File

@ -59,7 +59,7 @@
}
}
body.woocommerce-page {
body.woocommerce-admin-page {
.components-button.is-primary {
&:not(:disabled):not([aria-disabled='true']):hover {
color: $studio-white;

2
plugins/woocommerce-admin/client/stylesheets/shared/_reset.scss
View File

@ -1,5 +1,5 @@
// css resets some wp-admin specific rules so that the app fits better in the extension container
.woocommerce-page {
.woocommerce-admin-page {
.wrap {
margin: 0;
}

2
plugins/woocommerce-admin/docs/features/feature-flags.md
View File

@ -31,7 +31,7 @@ To check if a feature is enabled, you can simplify check the boolean value of a
We also expose CSS classes on the `body` tag, so that you can target specific feature states when they are enabled:
```
<body class="wp-admin woocommerce-page woocommerce-feature-enabled-activity-panels ....">
<body class="wp-admin woocommerce-admin-page woocommerce-feature-enabled-activity-panels ....">
```
## Basic Use - Server

4
plugins/woocommerce/changelog/fix-39544_description_styling Normal file
View File

@ -0,0 +1,4 @@
Significance: major
Type: fix
Remove use of woocommerce-page class within WooCommerce Admin pages, replaced with woocommerce-admin-page.

3
plugins/woocommerce/client/legacy/css/admin.scss
View File

@ -876,7 +876,8 @@
margin-right: 20px;
}
&.woocommerce-page {
// NOTE: .woocommerce-page is removed within admin.
&.woocommerce-page, &.woocommerce-admin-page {
.wrap {
margin-top: 32px;
}

4
plugins/woocommerce/client/legacy/css/twenty-twenty-one-admin.scss
View File

@ -1,7 +1,7 @@
/**
* Admin
*/
.wp-admin.woocommerce-page {
.wp-admin.woocommerce-admin-page {
table.wp-list-table {
tr.type-product {
td.thumb {
@ -11,4 +11,4 @@
}
}
}
}
}

102
plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php
View File

@ -7,10 +7,8 @@ namespace Automattic\WooCommerce\Admin\Features\ProductBlockEditor;
use Automattic\WooCommerce\Admin\Features\Features;
use Automattic\WooCommerce\Admin\Features\ProductBlockEditor\ProductTemplates\SimpleProductTemplate;
use Automattic\WooCommerce\Admin\Features\TransientNotices;
use Automattic\WooCommerce\Admin\PageController;
use Automattic\WooCommerce\Internal\Admin\BlockTemplateRegistry\BlockTemplateRegistry;
use Automattic\WooCommerce\Internal\Admin\Loader;
use WP_Block_Editor_Context;
/**
@ -84,7 +82,6 @@ class Init {
if ( ! empty( $post_type_object->template ) ) {
$editor_settings['template'] = $post_type_object->template;
$editor_settings['templateLock'] = ! empty( $post_type_object->template_lock ) ? $post_type_object->template_lock : false;
$editor_settings['__unstableResolvedAssets'] = $this->get_resolved_assets();
}
$editor_settings = get_block_editor_settings( $editor_settings, $block_editor_context );
@ -155,105 +152,6 @@ class Init {
return $link;
}
/**
* Get the resolved assets needed for the iframe editor.
*
* @return array Styles and scripts.
*/
private function get_resolved_assets() {
if ( function_exists( 'gutenberg_resolve_assets_override' ) ) {
return gutenberg_resolve_assets_override();
}
global $pagenow;
$script_handles = array(
'wp-polyfill',
);
// Note for core merge: only 'wp-edit-blocks' should be in this array.
$style_handles = array(
'wp-edit-blocks',
);
if ( current_theme_supports( 'wp-block-styles' ) ) {
$style_handles[] = 'wp-block-library-theme';
}
if ( 'widgets.php' === $pagenow || 'customize.php' === $pagenow ) {
$style_handles[] = 'wp-widgets';
$style_handles[] = 'wp-edit-widgets';
}
$block_registry = \WP_Block_Type_Registry::get_instance();
foreach ( $block_registry->get_all_registered() as $block_type ) {
// In older WordPress versions, like 6.0, these properties are not defined.
if ( isset( $block_type->style_handles ) && is_array( $block_type->style_handles ) ) {
$style_handles = array_merge( $style_handles, $block_type->style_handles );
}
if ( isset( $block_type->editor_style_handles ) && is_array( $block_type->editor_style_handles ) ) {
$style_handles = array_merge( $style_handles, $block_type->editor_style_handles );
}
if ( isset( $block_type->script_handles ) && is_array( $block_type->script_handles ) ) {
$script_handles = array_merge( $script_handles, $block_type->script_handles );
}
}
$style_handles = array_unique( $style_handles );
$done = wp_styles()->done;
ob_start();
// We do not need reset styles for the iframed editor.
wp_styles()->done = array( 'wp-reset-editor-styles' );
wp_styles()->do_items( $style_handles );
wp_styles()->done = $done;
$styles = ob_get_clean();
$script_handles = array_unique( $script_handles );
$done = wp_scripts()->done;
ob_start();
wp_scripts()->done = array();
wp_scripts()->do_items( $script_handles );
wp_scripts()->done = $done;
$scripts = ob_get_clean();
/*
* Generate font @font-face styles for the site editor iframe.
* Use the registered font families for printing.
*/
if ( class_exists( '\WP_Fonts' ) ) {
$wp_fonts = wp_fonts();
$registered = $wp_fonts->get_registered_font_families();
if ( ! empty( $registered ) ) {
$queue = $wp_fonts->queue;
$done = $wp_fonts->done;
$wp_fonts->done = array();
$wp_fonts->queue = $registered;
ob_start();
$wp_fonts->do_items();
$styles .= ob_get_clean();
// Reset the Web Fonts API.
$wp_fonts->done = $done;
$wp_fonts->queue = $queue;
}
}
return array(
'styles' => $styles,
'scripts' => $scripts,
);
}
/**
* Enqueue styles needed for the rich text editor.
*

2
plugins/woocommerce/src/Internal/Admin/Loader.php
View File

@ -175,7 +175,7 @@ class Loader {
}
$classes = explode( ' ', trim( $admin_body_class ) );
$classes[] = 'woocommerce-page';
$classes[] = 'woocommerce-admin-page';
if ( PageController::is_embed_page() ) {
$classes[] = 'woocommerce-embed-page';
}

2
tools/storybook/.storybook/main.js
View File

@ -67,7 +67,7 @@ module.exports = {
`,
previewBody: ( body ) => `
<div id="wpwrap">
<div class="woocommerce-layout woocommerce-page">
<div class="woocommerce-layout woocommerce-admin-page">
${ body }
`,