Wp-calypso: Simple payments block: Fix disabled multiple styling

[sirreal]

Via @simison: https://github.com/Automattic/wp-calypso/pull/28608#discussion_r234520202

Reproduced here:

---

When the form is in a disabled state, toggle has some funky borders going on:

Seems to be coming from Gutenberg core even in latest master; I'll open an issue there.

Meanwhile, we could fix it by setting border: 0 ?

[sirreal]

@simison WP Admin, Calypso or both?

[simison]

WP Admin, Calypso or both?

Both.

In Calypso:

In wp-admin:

You can replicate with this block:

/**
 * External dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { Disabled, ToggleControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { InspectorControls } from '@wordpress/editor';

const toggles = (
    <Fragment>
        <Disabled>
            <ToggleControl label="This is disabled" />
        </Disabled>
        <ToggleControl label="This is not disabled" />
    </Fragment>
);

registerBlockType( 'demo/toggle-control', {
    title: 'Toggle Control demo',
    category: 'layout',
    edit: () => (
        <Fragment>
            <InspectorControls>{ toggles }</InspectorControls>
            { toggles }
        </Fragment>
    ),
    save: () => null,
} );

Gutenberg issue: https://github.com/WordPress/gutenberg/issues/12049

[simison]

Fixed upstream: https://github.com/WordPress/gutenberg/pull/12091 — looks like it'll make it to WP 5.0 so we're good without fix at our side.

[simison]

Actually, nope, this will not be fixed for 5.0 but only in the next point release after it (in Gutenberg 4.6).

Gutenberg milestones:

[sirreal]

Also, https://github.com/WordPress/gutenberg/pull/12091 does not fix Calypso. Applying the Gutenberg fix via inspector:

.components-toggle-control .components-base-control__field .components-form-toggle__input {
  border: none;
}

Results in this:

[simison]

I opened an issue for Calypso: https://github.com/Automattic/wp-calypso/issues/28707

Meanwhile, we can patch this only for simple payments block that ships in Jetpack.

[sirreal]

I got off-GitHub confirmation that we can expect https://github.com/WordPress/gutenberg/pull/12091 to land in 5. Let's not make and changes but keep an eye on the PR.

[simison]

Gutenberg PR got merged. 👍