Comments (6)
Some bits I've learned
In order for Gutenberg to leverage the changes to theme.json found in #137 first Gutenberg needs to be changed.
The BUTTON block consists of a DIV element that wraps an A.
.wp-block-button .wp-block-button__link {
They tried to change it but it doesn't seem to have worked out.
The bits that pick up the color configuration in the theme.json and make use of them in other blocks (such as group) appear to only operate on the outermost element of the block. (Classes and styles are added only there).
The button doesn't make use of the same mechanism that blocks like the GROUP block use, it handles it on it's own. Called out copypasta which is sad indeed.
The button block makes use of an __experimentalSelector
that is used by the additional color/radius code to apply the class/style changes to the > a
rather than the outermost HTML element.
So either
- the button needs to support the theme.json file
- the button needs to be re-re-worked to support the existing color block-support
- the color block-support needs to be changed to support the __experimentalSelector.
Additionally, WordPress/gutenberg#25791 might take care of the border radius but it likely will have the same problems that color has had. (I have not yet evaluated it.)
This isn't an exhaustive list of what needs to be considered for changes to the button as the CSS for the theme covers the additional selectors and I'm not sure how that matters in regards to Gutenberg and the button block:
.site .button,
input[type="submit"],
input[type="reset"],
.wp-block-search__button,
from theme-experiments.
the CSS for the theme covers the additional selectors and I'm not sure how that matters in regards to Gutenberg and the button block
This brings up an interesting question actually. The reason these extra selectors are there is so that additional buttons can pick up the same styles. For example, the button
element in the Comments Form block, or any third-party block that includes a form button
.
I'm not sure the best way to ensure that those blocks pick up the same styles as the default Button Block (but they should).
from theme-experiments.
I'm not sure the best way to ensure that those blocks pick up the same styles as the default Button Block (but they should).
Shouldn't they also implement their buttons as Button Blocks?
from theme-experiments.
It looks like it might be time to revisit the Button changes in #21266. @youknowriad do you think its worth giving that another go? Is there a better approach now?
from theme-experiments.
Shouldn't they also implement their buttons as Button Blocks?
That would be great, but right now I don't think they do.
from theme-experiments.
I created an issue for it here: WordPress/gutenberg#27740
from theme-experiments.
Related Issues (20)
- TT1 Blocks: Media and Text Block is stretched at the frontend HOT 5
- TT1 blocks: Enable margin support in theme.json for 10.7 HOT 4
- Recreate Twenty Twenty Blocks as a universal or hybrid theme? HOT 5
- Button block lacks spacing when added to a columns block HOT 1
- Feedback on creating a blank template and spacing HOT 1
- Update TT1 Blocks to 0.4.7 and re-upload to the theme repository HOT 1
- TT1 Blocks: Settings -> general HOT 3
- correct the slug/folder name for Empty theme HOT 2
- Navigation Block Spacing Issue HOT 2
- TT1 Blocks: Search Block background color doesn't update HOT 3
- Feedback on trying to remove padding between template part and cover block HOT 2
- emptytheme Does nothing? HOT 1
- TT1 blocks: missing visuals for gradients HOT 1
- TT1 blocks: Multiple <h1> HOT 4
- New empty theme : Fatal error Uncaught UnexpectedValueException HOT 1
- TT1 Blocks: Visual issues HOT 2
- TT1 blocks: Implement elements API
- alomiz.com HOT 2
- Low quality empty theme, no docs, no consistency HOT 1
- Should this repository be archived? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from theme-experiments.