Add Term: Pattern Outlined Media & Text #153
Conversation
| * Title: Outlined Media and Text | ||
| * Slug: term/outlined-media-text | ||
| * Categories: media | ||
| * Block Types: core/media |
There was a problem hiding this comment.
We use this when the pattern contains just that specific block type, I don't think it's the case here
|
|
||
| <!-- wp:column {"style":{"border":{"width":"2px"}}} --> | ||
| <div class="wp-block-column" style="border-width:2px"><!-- wp:image {"id":21,"sizeSlug":"full","linkDestination":"none","className":"is-style-default"} --> | ||
| <figure class="wp-block-image size-full is-style-default"><img src="http://block-theme-experiment.local/wp-content/uploads/2024/03/image-1.png" alt="" class="wp-image-21"/></figure> |
There was a problem hiding this comment.
We would need to include the image file in the PR, and instead of linking like this, we should do it more like here, otherwise the image will only load on your environment :D
There was a problem hiding this comment.
I think both the image and the container of the paragraph block need a border radius to fit the design.
| * Block Types: core/media | ||
| */ | ||
| ?> | ||
| <!-- wp:columns {"style":{"border":{"width":"2px","radius":"8px"},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":{"top":"0","left":"0px"}}},"backgroundColor":"black"} --> |
There was a problem hiding this comment.
let's make the main container Wide width aligned, to fit better the design
| <!-- wp:columns {"style":{"border":{"width":"2px","radius":"8px"},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":{"top":"0","left":"0px"}}},"backgroundColor":"black"} --> | ||
| <div class="wp-block-columns has-black-background-color has-background" style="border-width:2px;border-radius:8px;margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0","bottom":"0"},"blockGap":"0"},"color":{"background":"#edece8"},"border":{"width":"2px"}},"layout":{"type":"default"}} --> | ||
| <div class="wp-block-column has-background" style="border-width:2px;background-color:#edece8;padding-top:0;padding-bottom:0"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60","right":"var:preset|spacing|60"},"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}}} --> | ||
| <p style="margin-top:var(--wp--preset--spacing--60);margin-right:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);margin-left:var(--wp--preset--spacing--60);padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">In his real life, Joel Gavins is actually a tax accountant. True story. You might think it’s the most boring job in the world, but he’ll never go out of business! Taxes are so terribly confusing that everyone needs someone else to do their taxes, that’s the whole point of the industry. So while your job might get taken over by AI, lobbying will always ensure that Joel has a nice cushy job and a working car.</p> |
There was a problem hiding this comment.
these margins are too much, when the viewport is smaller, it doesn't look good. Also, the design has smaller horizontal spacing than vertical. Instead of doing this with margin, why don't you try and make use of the alignment tools the column block has? You might need to wrap the paragraph inside a group block to keep the background color to the correct one, but it will be a better solution that will fit better different lengths of text (keep in mind the text in the pattern is a placeholder and the pattern should look nice with different text too)
Started from scratch with a new fork. I think I messed up the last one too much.