audunmb

This is an issue in TT2, TT3 and TT4 (as well as some other block themes).

As the image block is not wrapped in a div, it is not treated as part of the content and floats outside of it.

The following CSS fixes it:

@media only screen and (min-width : 768px) {
.single figure.alignleft {
	margin-inline-start: calc( ( 100% - var(--wp--style--global--content-size)) / 2 ) !important;
}

.single figure.alignright {
	margin-inline-end: calc( ( 100% - var(--wp--style--global--content-size)) / 2 ) !important;
}
}

Basically it moves the margin into the content for figure elements (pullquotes and images). Wrapping it in .single limits this to posts, but if you want the same behaviour on pages just remove it.

The media rule is to just do it on larger screens, it will wrap nicely on smaller screens anyway.

Thanks. That is of course an option, but if I’m writing CSS anyways it’s better to use actual CSS outside of the json file as that is less error-prone. One missing comma and nothing works with the theme.json file. Of course that’s just my preference.

Note: the term variations in theme.json refers to block style variations (i.e., block styles). It doesn’t refer to block variations.

That’s confusing, but ok. Explains why that approach doesn’t work.

Still: is there a way to add styling only to tags and not other post_terms? With theme.json?

As for the block styles, it now suddenly works. I don’t know what was wrong or why it now works, but it may have been a small error in the code somewhere. I’m adding block styles with a plugin, the basic code (enquing etc) is on my GitHub.

Yes, it is a plugin conflict with One User Avatar. Not sure what causes it, it’s kind of weird. Something prevents the border-radius to be saved to the template (it doesn’t show up in code view).

I tried with another plugin for adding profile pictures (Gravatar makes no sense when you have authors, not users), and while it doesn’t cause this error, the avatar block is a mess IMHO. Height and width for the avatar block is set with img attributes instead of css styles, and as the image is forced into a square and any non-square images will be distorted.

Fixed width doesn’t work as expected in any setting (clean installation, no plugins). It sets flex-basis, but if the image is larger than the flex-basis it has no effect.

I’ve notified the plugin about the conflict.

• This reply was modified 10 months, 1 week ago by audunmb. Reason: added link to plugin forum

These block-styles are added with php, while I added them with javascript. PHP custom styles only works with inline styles, so I use javascript registration.

All my other custom block styles work, it’s just the one for post_terms that won’t work. Is there a bug which prevents javascript from adding custom styles to post_terms?

AFAIK your theme.json code won’t work, as “pill” is a block style, not a block variation.

I had the same issue. Can’t you just remove the custom text from the theme so that the default label will be used? That will solve the issue for everyone who uses this theme without upstream changes?

The option to add custom text is nice, but as this is a default WordPress theme, it should have sensible defaults.

OK, thanks. So the solution would be:

1. Create the menus I want on the live site backend
2. Switch themes
3. Manually import the classic menus into the nav blocks where I need to.

It works, as there aren’t that menus to care about.

@hebhansen I think maybe the issue is that you are saving a rasterized image as an SVG. Then the image will just be embedded in the SVG. You need to convert it to a vector image before saving as SVG. That is possible to do with Photoshop as well, now that I googled it, I just use Illustrator by default myself.

Use Adobe Illustrator to create SVGs instead. You can probably import the PSD-file into Illustrator, make sure it’s a vector image and export to SVG.

Another option is to use a converter (PNG to SVG), either one of the free online or a command line tool (if you’re on Linux).

Though, Adobe-created SVGs usually needs some cleanup/optimization. Either do it yourself in a text editor, or use an online tool.

The above code didn’t work because I didn’t import ‘create-block’. This wors

import { registerBlockType, createBlock } from '@wordpress/blocks';

registerBlockType( metadata.name, {
	/*...*/
	transforms: {	
           from: [
           {
            type: 'block',
            blocks: [ 'core/group' ],
            transform: ( attributes, innerBlocks ) => {
                return createBlock(
                    'create-block/factbox',
                    attributes,
                    innerBlocks
                );
            },
        },
		],
	to: [
		{
            type: 'block',
            blocks: [ 'core/group' ],
            transform: ( attributes, innerBlocks ) => {
                return createBlock(
                    'core/group',
                    attributes,
                    innerBlocks
                );
            },
        },
	]
  },
} );

OK. I can’t add it to block.json, I have to add it as I register the block. With the wp-create-block script, that’s in edit.js.

Still I can’t get it to work.

I tried to copy from another block, but it still don’t work. Now I have:

const settings = {
	transforms: {
		from: [
		{
		type: 'block',
		isMultiBlock: true,
		blocks: [ '*' ],
		__experimentalConvert( blocks ) {
		const groupInnerBlocks = blocks.map( ( block ) => {
	return createBlock(
		block.name,
		block.attributes,
		block.innerBlocks
		);
	} );
return createBlock(
	'wp-create-block/factbox',
	groupInnerBlocks
	);
	},
	},
	]
	}
};

This is more or less the same code that is in another block which works for grouping blocks, but my block won’t work.

Thanks, that was what I was looking for.

Thanks for your answer. Here’s the issue on GitHub.

thanks, that will work for now.

Are you editing posts or pages?

I’m editing posts.