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

Settings Slotfills: Normalize registration to avoid conflicts (#45152)

This commit is contained in:
Paul Sealock 2024-02-29 10:00:52 +13:00 committed by GitHub
parent b2dd17c0df
commit 467d16f212
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 83 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
plugins/woocommerce-admin/client/index.js
View File

@ -16,10 +16,11 @@ import './stylesheets/_index.scss';
import { getAdminSetting } from '~/utils/admin-settings';
import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
import { EmbeddedBodyLayout } from './embedded-body-layout';
import { WcAdminPaymentsGatewaysBannerSlot } from './payments/payments-settings-banner-slotfill';
import { WcAdminConflictErrorSlot } from './settings/conflict-error-slotfill.js';
import './xstate.js';
import { deriveWpAdminBackgroundColours } from './utils/derive-wp-admin-background-colours';
import { possiblyRenderSettingsSlots } from './settings/settings-slots';
import { registerTaxSettingsConflictErrorFill } from './settings/conflict-error-slotfill';
import { registerPaymentsSettingsBannerFill } from './payments/payments-settings-banner-slotfill';
const appRoot = document.getElementById( 'root' );
const embeddedRoot = document.getElementById( 'woocommerce-embedded-root' );
@ -65,23 +66,6 @@ if ( appRoot ) {
// Render notices just above the WP content div.
const wpBody = document.getElementById( 'wpbody-content' );
const isWcAdminSettingsPaymentPage = document.getElementById(
'wc_payment_gateways_banner_slotfill'
);
if ( isWcAdminSettingsPaymentPage ) {
render(
WcAdminPaymentsGatewaysBannerSlot(),
isWcAdminSettingsPaymentPage
);
}
const isTaxPage = document.getElementById( 'wc_conflict_error_slotfill' );
if ( isTaxPage ) {
render( WcAdminConflictErrorSlot(), isTaxPage );
}
const wrap =
wpBody.querySelector( '.wrap.woocommerce' ) ||
document.querySelector( '#wpbody-content > .woocommerce' ) ||
@ -99,6 +83,11 @@ if ( appRoot ) {
<EmbeddedBodyLayout />,
wpBody.insertBefore( embeddedBodyContainer, wrap.nextSibling )
);
possiblyRenderSettingsSlots();
registerTaxSettingsConflictErrorFill();
registerPaymentsSettingsBannerFill();
}
// Render the CustomerEffortScoreTracksContainer only if

28
plugins/woocommerce-admin/client/payments/payments-settings-banner-slotfill.js
View File

@ -1,17 +1,16 @@
/**
* External dependencies
*/
import { createSlotFill, SlotFillProvider } from '@wordpress/components';
import { registerPlugin, PluginArea } from '@wordpress/plugins';
import { createSlotFill } from '@wordpress/components';
import { registerPlugin } from '@wordpress/plugins';
/**
* Internal dependencies
*/
import { PaymentsBannerWrapper } from './payment-settings-banner';
import { SETTINGS_SLOT_FILL_CONSTANT } from '../settings/settings-slots';
const { Fill, Slot } = createSlotFill(
'__EXPERIMENTAL__WcAdminPaymentsGatewaysSettingsBanner'
);
const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
const PaymentsBannerFill = () => {
return (
<Fill>
@ -20,18 +19,9 @@ const PaymentsBannerFill = () => {
);
};
export const WcAdminPaymentsGatewaysBannerSlot = () => {
return (
<>
<SlotFillProvider>
<Slot />
<PluginArea scope="woocommerce-settings" />
</SlotFillProvider>
</>
);
export const registerPaymentsSettingsBannerFill = () => {
registerPlugin( 'woocommerce-admin-paymentsgateways-settings-banner', {
scope: 'woocommerce-payments-settings',
render: PaymentsBannerFill,
} );
};
registerPlugin( 'woocommerce-admin-paymentsgateways-settings-banner', {
scope: 'woocommerce-settings',
render: PaymentsBannerFill,
} );

34
plugins/woocommerce-admin/client/settings/conflict-error-slotfill.js
View File

@ -1,16 +1,10 @@
/**
* External dependencies
*/
import { registerPlugin, PluginArea } from '@wordpress/plugins';
import { registerPlugin } from '@wordpress/plugins';
import { __ } from '@wordpress/i18n';
import interpolateComponents from '@automattic/interpolate-components';
import {
Button,
Card,
CardBody,
createSlotFill,
SlotFillProvider,
} from '@wordpress/components';
import { Button, Card, CardBody, createSlotFill } from '@wordpress/components';
import { Icon, closeSmall } from '@wordpress/icons';
import { useEffect, useState } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
@ -22,8 +16,9 @@ import { recordEvent } from '@woocommerce/tracks';
*/
import './conflict-error-slotfill.scss';
import warningIcon from './alert-triangle-icon.svg';
import { SETTINGS_SLOT_FILL_CONSTANT } from './settings-slots';
const { Fill, Slot } = createSlotFill( '__EXPERIMENTAL__WcAdminConflictError' );
const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
const LearnMore = () => (
<Button
@ -40,7 +35,7 @@ const SettingsErrorFill = () => {
const [ pricesEnteredWithTaxSetting, setMainVal ] = useState(
document.forms.mainform.elements.woocommerce_prices_include_tax
.value === 'yes'
?.value === 'yes'
? 'incl'
: 'excl'
);
@ -196,18 +191,9 @@ const SettingsErrorFill = () => {
);
};
export const WcAdminConflictErrorSlot = () => {
return (
<>
<SlotFillProvider>
<Slot />
<PluginArea scope="woocommerce-settings" />
</SlotFillProvider>
</>
);
export const registerTaxSettingsConflictErrorFill = () => {
registerPlugin( 'woocommerce-admin-tax-settings-conflict-warning', {
scope: 'woocommerce-tax-settings',
render: SettingsErrorFill,
} );
};
registerPlugin( 'woocommerce-admin-tax-settings-conflict-warning', {
scope: 'woocommerce-settings',
render: SettingsErrorFill,
} );

38
plugins/woocommerce-admin/client/settings/settings-slots.js Normal file
View File

@ -0,0 +1,38 @@
/**
* External dependencies
*/
import { render } from '@wordpress/element';
import { createSlotFill, SlotFillProvider } from '@wordpress/components';
import { PluginArea } from '@wordpress/plugins';
export const SETTINGS_SLOT_FILL_CONSTANT =
'__EXPERIMENTAL__WcAdminSettingsSlots';
const { Slot } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
export const possiblyRenderSettingsSlots = () => {
const slots = [
{
id: 'wc_payments_settings_slotfill',
scope: 'woocommerce-payments-settings',
},
{ id: 'wc_tax_settings_slotfill', scope: 'woocommerce-tax-settings' },
{ id: 'wc_settings_slotfill', scope: 'woocommerce-settings' },
];
slots.forEach( ( slot ) => {
const slotDomElement = document.getElementById( slot.id );
if ( slotDomElement ) {
render(
<>
<SlotFillProvider>
<Slot />
<PluginArea scope={ slot.scope } />
</SlotFillProvider>
</>,
slotDomElement
);
}
} );
};

4
plugins/woocommerce/changelog/45152-fix-settings-slotfills Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Normalize Slots on Settings pages by creating scopes for each page that has a Slot

10
plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php
View File

@ -39,6 +39,7 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
add_action( 'woocommerce_sections_' . $this->id, array( $this, 'output_sections' ) );
add_action( 'woocommerce_settings_' . $this->id, array( $this, 'output' ) );
add_action( 'woocommerce_settings_save_' . $this->id, array( $this, 'save' ) );
add_action( 'woocommerce_admin_field_add_settings_slot', array( $this, 'add_settings_slot' ) );
}
/**
@ -61,6 +62,15 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
return $this->label;
}
/**
* Creates the React mount point for settings slot.
*/
public function add_settings_slot() {
?>
<div id="wc_settings_slotfill"> </div>
<?php
}
/**
* Add this page to settings.
*

2
plugins/woocommerce/includes/admin/settings/class-wc-settings-payment-gateways.php
View File

@ -112,7 +112,7 @@ class WC_Settings_Payment_Gateways extends WC_Settings_Page {
*/
public function payment_gateways_banner() {
?>
<div id="wc_payment_gateways_banner_slotfill"> </div>
<div id="wc_payments_settings_slotfill"> </div>
<?php
}

2
plugins/woocommerce/includes/admin/settings/class-wc-settings-tax.php
View File

@ -44,7 +44,7 @@ class WC_Settings_Tax extends WC_Settings_Page {
<th scope="row" class="titledesc woocommerce_admin_tax_settings_slotfill_th">
</th>
<td class="forminp forminp-text woocommerce_admin_tax_settings_slotfill_td">
<div id="wc_conflict_error_slotfill"> </div>
<div id="wc_tax_settings_slotfill"> </div>
</td>
</tr>
<?php

1
plugins/woocommerce/includes/admin/settings/views/settings-tax.php
View File

@ -98,6 +98,7 @@ $settings = array(
),
array( 'type' => 'conflict_error' ), // React mount point for embedded banner slotfill.
array( 'type' => 'add_settings_slot' ), // React mount point for settings slotfill.
array(
'title' => __( 'Price display suffix', 'woocommerce' ),

2
plugins/woocommerce/tests/php/includes/settings/class-wc-settings-tax-test.php
View File

@ -64,7 +64,7 @@ class WC_Settings_Tax_Test extends WC_Settings_Unit_Test_Case {
'woocommerce_tax_display_cart' => 'select',
'woocommerce_price_display_suffix' => 'text',
'woocommerce_tax_total_display' => 'select',
'' => 'conflict_error',
'' => array( 'conflict_error', 'add_settings_slot' ),
);
$this->assertEquals( $expected, $settings_ids_and_types );