Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor Styles: Add a transform for button rules #29229

Merged
merged 13 commits into from
Mar 23, 2021
Merged

Editor Styles: Add a transform for button rules #29229

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ea72c7f
Add a transform for button rules
scruffian Feb 22, 2021
c800daa
Also rewrite selectors for inputs
scruffian Feb 22, 2021
e19a124
added tests, used constant on replace function
MaggieCabrera Feb 22, 2021
b0813ad
refactored updateSelector to be more efficient
MaggieCabrera Feb 22, 2021
a8394c5
linting
MaggieCabrera Feb 22, 2021
22a0891
revert changes to wrap transform
MaggieCabrera Mar 22, 2021
4fa8f9d
moved the code to a new transform
MaggieCabrera Mar 22, 2021
caf9f09
moved the code to a new transform
MaggieCabrera Mar 22, 2021
db277d5
updated tests
MaggieCabrera Mar 22, 2021
5996fa8
linting
MaggieCabrera Mar 22, 2021
e3016cd
text changes on tests
MaggieCabrera Mar 22, 2021
4e08ee0
more linting
MaggieCabrera Mar 22, 2021
007d36c
update snapshots'
scruffian Mar 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,24 @@ color: red;
}"
`;

exports[`CSS selector wrap should replace :root selectors 1`] = `
".my-namespace {
--my-color: #ff0000;
}"
`;

exports[`CSS selector wrap should replace add editor classes to buttons 1`] = `
".my-namespace button:not(.components-button) {
background-color: #ff0000;
}"
`;

exports[`CSS selector wrap should replace add editor classes to inputs 1`] = `
".my-namespace input:not(.components-text-control__input):not(.components-placeholder__input):not(.components-form-token-field__input) {
border-color: #ff0000;
}"
`;

exports[`CSS selector wrap should replace root tags 1`] = `
".my-namespace,
.my-namespace h1 {
Expand All @@ -41,9 +59,3 @@ exports[`CSS selector wrap should wrap regular selectors 1`] = `
color: red;
}"
`;

exports[`CSS selector wrap should replace :root selectors 1`] = `
".my-namespace {
--my-color: #ff0000;
}"
`;
22 changes: 22 additions & 0 deletions packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,4 +72,26 @@ describe( 'CSS selector wrap', () => {

expect( output ).toMatchSnapshot();
} );

it( 'should replace add editor classes to buttons', () => {
const callback = wrap( '.my-namespace' );
const input = `
button {
background-color: #ff0000;
}`;
const output = traverse( input, callback );

expect( output ).toMatchSnapshot();
} );

it( 'should replace add editor classes to inputs', () => {
const callback = wrap( '.my-namespace' );
const input = `
input {
border-color: #ff0000;
}`;
const output = traverse( input, callback );

expect( output ).toMatchSnapshot();
} );
} );
30 changes: 25 additions & 5 deletions packages/block-editor/src/utils/transform-styles/transforms/wrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,37 @@
*/
const IS_ROOT_TAG = /^(body|html|:root).*$/;

const IS_BUTTON_TAG = /^(button).*$/;

const IS_INPUT_TAG = /^(input).*$/;

const wrap = ( namespace, ignore = [] ) => ( node ) => {
const updateSelector = ( selector ) => {
if ( selector.match( IS_BUTTON_TAG ) ) {
return selector.replace(
IS_BUTTON_TAG,
'button:not(.components-button)'
);
}

if ( selector.match( IS_INPUT_TAG ) ) {
return selector.replace(
IS_INPUT_TAG,
'input:not(.components-text-control__input):not(.components-placeholder__input):not(.components-form-token-field__input)'
);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "wrap" transform is a generic transform, and this is very specific, can we extract it to its own transform instead? and add a comment clarifying that yes, it's a bit hacky to target some specific Gutenberg components but that it's a good contained hack.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@youknowriad yes, that makes sense to me, I just updated the code, let me know if this looks good to you and I'll go ahead and update the tests and move them to a separate file too.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, that's hat I had in mind, thanks for the update.


return selector;
};

const wrapSelector = ( selector ) => {
if ( ignore.includes( selector.trim() ) ) {
return selector;
}

// Anything other than a root tag is always prefixed.
{
if ( ! selector.match( IS_ROOT_TAG ) ) {
return namespace + ' ' + selector;
}
if ( ! selector.match( IS_ROOT_TAG ) ) {
return namespace + ' ' + updateSelector( selector );
}

// HTML and Body elements cannot be contained within our container so lets extract their styles.
Expand All @@ -23,7 +43,7 @@ const wrap = ( namespace, ignore = [] ) => ( node ) => {
if ( node.type === 'rule' ) {
return {
...node,
selectors: node.selectors.map( updateSelector ),
selectors: node.selectors.map( wrapSelector ),
};
}

Expand Down