websevendev

should it be added to one of your existing plugin files or to one of the core WP files

Your child theme’s functions.php is the preferred location. If you add to plugin or WP core files the changes get overwritten on updates.

Is it possible to add these attributes to the IMG tags – your suggested code adds attributes to FIGURE tags

No, the plugin can only add attributes to the root element blocks.

I may add these features you’re looking for in the future, but currently I don’t have the time as I’m working on something else, sorry.

It’s technically possible, but probably too complex/nuanced.

This will add the data-pin-description and data-pin-title values for core/image blocks by default.

add_action('enqueue_block_editor_assets', function() {
	$js = <<<JS
wp.hooks.addFilter('blocks.registerBlockType', 'attributes-for-blocks/defaults', settings => {
	if(settings.name === 'core/image') {
		return {
			...settings,
			attributes: {
				...settings.attributes,
				attributesForBlocks: {
					...settings.attributesForBlocks,
					default: {
						'data-pin-description': '',
						'data-pin-title': '',
					},
				},
			}
		}
	}
	return settings
});
JS;
	wp_add_inline_script('attributes-for-blocks', $js);
});

It will invalidate any existing blocks that don’t have custom attributes as it now has a different default value.

Honestly, I don’t think it opens up more possibilities than users with editor permissions already have. Worst case scenario they add some JavaScript that, when you visit the page, will send them your login cookie, granting them admin access.
They could add a well-crafted attribute that does it using this plugin, but they can just as well add the Custom HTML block to do that. So removing the filter only opens attack vectors when you have previously closed the earlier ones, which I doubt is the case.

Anyone that has unfiltered_html permissions needs to be trusted basically. It’s like giving someone keys to your house.

For me this seems to happen only for dynamic blocks (aka blocks that are rendered server side by PHP not directly with JS). For core/paragraph block eval:{centerPadding:'60px'} works, but adding the same attribute to core/latest-comments for example the quotes are escaped by the esc_attr() function.

Try adding this line to your child theme’s functions.php:

remove_filter('afb_sanitize_attribute_value', 'esc_attr');

Then the value should remain unescaped for dynamic blocks as well.
Removing it is technically less secure, but the only risks I can think of are authenticated users of your site who can edit posts in the first place but have malicious intent. If you’re the only user of your site then it shouldn’t really matter.

• This reply was modified 2 years, 5 months ago by websevendev.
• This reply was modified 2 years, 5 months ago by websevendev.

Yeah looks like it’s not possible then, as the attribute values will definitely be wrapped in " as opposed to '.

Here’s a hack you can use maybe:

Prepend eval: and use no quotes/single quotes like this: eval:{slidesToShow: 4, slidesToScroll: 4} producing data-slick="eval:{slidesToShow: 4, slidesToScroll: 4}".
Then add additional JS before initializing the slider:

$('.slider[data-slick*="eval:"]').each(function() {
  eval('var data = ' + $(this).data('slick').replace('eval:', ''));
  $(this).data('slick', data);
});
$('.slider').slick();

This will evaluate the {slidesToShow: 4, slidesToScroll: 4} as it’s a valid JS object and assign it as the data-slick value. Alternatively you can use a similar method to “fix” the {"slidesToShow": 4, "slidesToScroll": 4} HTML entities with JS as well probably.

Do single quotes work?

{'slidesToShow': 4, 'slidesToScroll': 4}

Do no quotes work?

{slidesToShow: 4, slidesToScroll: 4}

You can’t use normal quotes as they are already encasing the whole attribute value.
If data-slick="{"slidesToShow": 4, "slidesToScroll": 4}" worked the value of data-slick would be {.

The problem is that the animations seem to use a broader width than the width of the screen, adding a horizontal scroll bar to the site on mobile. Once the animation played the scroll bar disappears.

You’ll probably need to hide the overflow of some element that contains animations (so that the animated elements can position themselves outside the container without causing a scrollbar).

The best selector for that depends on your theme, so it may also break something if some other feature requires overflow to be visible, but for example, this custom CSS should do it pretty safely:

article .entry-content {
  overflow-x: hidden;
}

But if you add animated elements outside the post content, in a template or something, then you’ll need to prevent overflow higher up in the tree, such as body > .site, it just affects more things and has a higher chance of conflicts.

window.anfbAosSettings is passed to AOS for config (https://github.com/websevendev/animations-for-blocks/blob/main/src/init.js).

So you can define it in your child theme’s functions.php or elsewhere, for example:

add_action('wp_enqueue_scripts', function() {
	wp_add_inline_script('animations-for-blocks', 'window.anfbAosSettings = { disable: "mobile" };', 'before');
}, 501);

Thanks for reporting, I can reproduce it.

Looks like this happens when a block’s JS edit function returns block content but the block also has a PHP render_callback that returns block content. So this plugin’s filters are applied twice.

Luckily override mode can negate this as I don’t have time to fix it before next month.

Fade starts at 0 opacity and animates to 1, but starting at 0.5 would be more subtle:

html:not(.no-js) .subtle[data-aos^=fade] {
	opacity: 0.5;
}

Also for directional fades the distance is by default 100px but you could reduce it:

html:not(.no-js) .subtle[data-aos=fade-down] {
	transform: translate3d(0, -50px, 0);
}

You would have to override the CSS of the animation library.

For example by default the Zoom in animation scales the element down to .6:

html:not(.no-js) [data-aos=zoom-in] { transform: scale(.6); }

For a more subtle zoom you can start at like .9 by adding this to your Customizer -> Additional CSS:

html:not(.no-js) .subtle[data-aos=zoom-in] { transform: scale(.9); }

and add the subtle class to the element that you need more subtle. I put them side by side in the Columns block and the one with .subtle class is indeed more subtle. Or you can omit the class from the CSS rule and have them all be more subtle by default.

Can’t reproduce with 6.0-beta3. Does it happen when editing normal pages also, or just with custom post types? What’s the careers plugin you have, I’ll try with that.

This plugin is using the blocks.getSaveContent.extraProps filter and it only applies to the root element, so it’s not possible to add attributes to nested elements.

You can do something like add a custom HTML block with a <script> that applies the download attributes dynamically when the page is loaded or find a third party button block that doesn’t use a wrapper element.

Can you send me access to your site ([email protected])? I can take a look.

Nothing I can do on my end, the issue is with assumptions made in the Pods plugin.

I’ve opened an issue there: https://github.com/pods-framework/pods/issues/6386

If you’d like, you can disable the support for any blocks by adding this code to your child theme’s functions.php or a mu-plugin:

add_filter('afb_unsupported_blocks', function($blocks) {
	$blocks[] = 'pods/pods-block-list';
	return $blocks;
});