5
The main issue in your code is with these two attributes which use the exact same selector (the first span element in your block content):
checkListItemOne: {
type: 'string',
source: 'html',
selector: 'span' // same as below
},
checkListItemTwo: {
type: 'string',
source: 'html',
selector: 'span' // same as above
}
Which means the ...
5
What you want is not possible for blocks that rely on frontend javascript, this includes embeds.
It's also not possible using the Swiper react library. The Swiper library made the questionable choice of manually inspecting child components for the SwiperSlide component name, preventing it from ever being used with child blocks.
It isn't possible using jQuery ...
4
I tried to add the toolbar component and I get a syntax error about my
brackets
First off, JSX is indeed easier and it works like regular HTML, but with the ability to use JavaScript expressions (string literals, variables, function calls, etc.), e.g. <p>Hello, { name }</p> or <p>{ Date.now() }</p>.
Now the thing which caused that ...
4
What you want to do is already baked into WordPress but just not frequently used.
In either the classic or the block editor, click to add an image.
Once you have the block upon, instead of uploading or pulling from existing images in your Media Library, click on Insert from URL.
Now just paste the URL from wherever the image is being served. Just double ...
3
import will import those items from a package. const is just an indicator that a variable is a constant, a variable that cannot be reassigned. E.g. const number = 5;.
In this case, these 2 lines do exactly the same thing:
const useSelect = wp.data.useSelect;
const useSelect = window.wp.data.useSelect;
The important difference being that if you had included ...
2
Yes, and it works exactly the same as any other block, no fake attributes are necessary. When the JS needs to display the component it will make the AJAX request to fetch the markup and pass the attributes with it.
The important part to note is that a block in the block editor is still JS. We're just generating some HTML with PHP.
When the post is saved, ...
2
Start typing out the way you described and it'll covert to a list.
Click on the "Change Block Type" button.
Select Paragraph.
You're all done.
2
You could also remove those image sizes completely using remove_image_size (see: https://developer.wordpress.org/reference/functions/remove_image_size/)
Example (to be placed in your functions.php file):
remove_image_size('1536x1536');
remove_image_size('2048x2048');
This function, however, won't work for default WP image sizes (e.g. 'thumbnail', 'medium', '...
1
The register_block_style function is what you'll want.
The basic implementation is
register_block_style(
'core/table',
array(
'name' => 'my-table-style',
'label' => 'My Table Style',
)
);
When you select the style, it will add the is-style-my-table-style class to the block, which you can style using your style.css or other ...
1
The reason why the block editor uses the default value — for the max_level ("Maximum level") attribute only — instead of the one parsed from the (block comment delimiter in the) saved post content, is because in the parsed/saved attributes, max_level is invalid.
Why is it invalid: Because the type of the attribute (value) doesn't match the one ...
1
You can used this plugin Photonic for your requirement
Photonic doesn’t just cover Google Photos – it allows you to add images from a range of services.
Like the previous plugin, you’ll need to create API keys and authenticate with your Gooogle account in order to use it.
Once you do, you are ready to add a gallery.
As with the previous plugin, the photos ...
1
The WP_Screen Object now contains a boolean property for this. The following is working for me:
if( ! function_exists( 'get_current_screen' ) ) {
return false;
}
$screen = get_current_screen();
$is_block_editor = $screen->is_block_editor;
See https://developer.wordpress.org/reference/classes/wp_screen/is_block_editor/
1
The error in question is likely because when you run register_block_type(), you didn't set the block attributes or that it (which is an array in PHP) doesn't have the attribute named content.
So make sure the attributes are defined in both JavaScript (via registerBlockType()) and PHP (via the above-mentioned function), and that the schema is valid. E.g.
In ...
1
It's called when the component is first rendered, then again when the dependencies declared in the second parameter change:
deps Array: If provided, this memoizes the mapSelect so the same mapSelect is invoked on every state change unless the dependencies change.
So don't pass that array, and it will work as you expected.
1
Looks like the outmost <Fragment> was the culprit. But I still can't
figure out why! Replacing it with <div> fixed it.
If you're on WordPress 5.6.0, you don't need to replace the <Fragment> with <div>. :)
And that's because WordPress 5.6.0 actually came with block API version 2 which introduced a new hook named useBlockProps that ...
1
After about an hour of trial and error, I found that the outmost <Fragment> was the culprit. But I still can't figure out why! Replacing it with <div> fixed it.
So the code looks like this now:
edit: (props) => {
const {attributes, setAttributes} = props;
const headingBgOverlay = Util.getBgOverlay(attributes, 'heading');
...
1
The solution is/was simple. Use a priority of 1 in the add_filter() function.
function carousel_block_remover( $content ) {
// Matches <!-- wp:client/carousel {"id":"100"} /-->
$regex = '/<!-- wp:client\/carousel {"id":"(.*)"} \/-->/';
if ( preg_match( $regex, $content ) ) {
// Filter ...
1
In your code where you defined your custom post type (in a custom plugin or in your functions.phpfile), you need to add this snippet for Gutenberg block editor support:
'show_in_rest' => true,
'supports' => array('editor')
Here is an example:
function portfolio_post_type() {
register_post_type( 'portfolio',
array(
'labels' =&...
1
You can't use attributes that source data from the HTML markup of your block when using Dynamic Blocks. The attribute selector looks at the Save function's HTML for the attribute, not the Edit function.
You can simply use a type: 'string' instead. Hope this helps!
Only top voted, non community-wiki answers of a minimum length are eligible
