Comments (3)
Nice job in tracing that bug @nickcernis
That code worked a treat, will do the job for now.
And thanks for the fast and detailed reply.
from genesis-sample.
Thanks, @jamiemitchell.
The issue is caused by WordPress Core omitting the align attribute if the media-text block uses the default 'wide' alignment.
If you don't set any alignment (defaults to wide), the media block has a blank 'align' attribute:
array(3) { ["align"]=> string(0) "" ["mediaId"]=> int(448) ["mediaType"]=> string(5) "image" }
Which results in this body class at present in Genesis Sample:
first-block-align-
If you click the 'wide' alignment, the media block has these attributes (align attribute is missing):
array(2) { ["mediaId"]=> int(448) ["mediaType"]=> string(5) "image" }
…which results in no class at all.
If you set alignment to 'full', WP core then outputs the expected alignment attribute:
array(3) { ["align"]=> string(4) "full" ["mediaId"]=> int(448) ["mediaType"]=> string(5) "image" }
So the correct body class of first-block-align-full
appears as expected in Genesis Sample.
I will report this as a bug in the Gutenberg repo. WordPress should output the alignment of the block, whether it's the default or manually selected.
For now, you can fix it by amending genesis_sample_blocks_body_classes
in lib/gutenberg/init.php
.
Replace this code near the end of the function:
if ( isset( $blocks[0]['attrs']['align'] ) ) {
$classes[] = 'first-block-align-' . $blocks[0]['attrs']['align'];
}
With this:
if ( isset( $blocks[0]['attrs']['align'] ) && $blocks[0]['attrs']['align'] ) {
$classes[] = 'first-block-align-' . $blocks[0]['attrs']['align'];
}
// Workaround to add -align-wide class for media-text block.
// See https://github.com/studiopress/genesis-sample/issues/327.
if ( 'core/media-text' === $blocks[0]['blockName'] ) {
if ( ! isset( $blocks[0]['attrs']['align'] ) || ! $blocks[0]['attrs']['align'] ) {
$classes[] = 'first-block-align-wide';
}
}
You should then get the first-block-align-wide
class you expect for the media-text block, whether 'wide' alignment has been explicitly set or the block is using the default wide alignment.
from genesis-sample.
Found an existing issue in Gutenberg at WordPress/gutenberg#16365. Noting it may affect other blocks that default to wide too.
The if statement above (if ( 'core/media-text' === $blocks[0]['blockName'] ) {
) could be amended to call a function that checked if the block was one that defaults to wide. It would be best if this was fixed in Gutenberg, though, so that we don't have to independently maintain a list of blocks that default to wide, or handle edge cases where default alignment is altered, or account for non-default blocks that default to wide.
from genesis-sample.
Related Issues (20)
- Accessibility check fail on pagination HOT 1
- the woocommerce body_class() issues in my wesbite HOT 3
- category archive does not work HOT 1
- white space HOT 4
- Reevaluate mobile menu positioning when custom logo set HOT 4
- Cover block alignwide pushes beyond site width on iPad Pro HOT 2
- Remove Genesis Simple FAQ CSS
- Body classes for "first" blocks are super helpful, and "last" block classes could be helpful too. HOT 2
- Add sub pages and sub menu
- Release: Version 3.3.1
- Composer errors
- Release: Version 3.4.1
- 20px editor-font-sizes overridden after 5.9 update HOT 4
- Add Block Patterns HOT 1
- Release: Version 3.4.2
- Host Sample Theme on WordPress.org
- CSS contains incorrect font specifications
- drop down menu not aligned properly
- Modern CSS
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 genesis-sample.