New answers tagged

0

Try Fire it on init instead of inside register_post_type like this: add_action('init','345376_register_metaof_team'); function 345376_register_metaof_team(){ $object_type = 'team'; $args = array( 'type' => 'string', 'description' => 'A meta key associated with post views.', 'single' => true, 'show_in_rest' => true,...


0

I am not sure this is possible in a straightforward way. You could add an attribute which checks if the block has innerBlocks. Then use it in save to render the wrapper or not. It works but it's not a very clean solution: const { __ } = wp.i18n; const { registerBlockType } = wp.blocks; const { InnerBlocks } = wp.blockEditor; const { useSelect } = wp.data; ...


1

wp.blockEditor.MediaPlaceholder is not the class, it's the following code in the Gutenberg/Block Editor's media-placeholder file: export default compose( applyWithSelect, withFilters( 'editor.MediaPlaceholder' ), )( MediaPlaceholder ); Thus an infinite loop as the filter is applied constantly.


1

When we register a block type we define how the block structure should be in the moment it is added to the editor. After the block type is added to the editor we have an actual block. The initial template prop in the InnerBlock defines which innerBlocks should be added when adding the (root) block type. Once added the prop has no effect as the block has ...


2

The code from core/columns and core/column blocks are a good example of how to achieve this behaviour. Basically we register 2 block types: Carousel and Slide. Slide block type does not appear in the inserter. Carousel block type is the root block which appears in the inserter. Instead of keeping the count of slides in an attribute we listen to getBlocks ...


0

I Had the same issue. Followed RiddleMeThis' suggestion but "Disable the visual editor when writing" was not checked. I checked it, Updated my profile then unchecked it and updated my profile again and the issue was solved.


0

Something like this... Creating slides elements const slides = []; for ( let i = 0; i < attributes.count; i ++ ) { slides.push( <li className="slide" key={'slide-' + i}> <img src='img-url.jpg'/> </li> ); } Adding slides to block content <ul classname="slides">{slides}</ul> You can use ...


2

I agree with Nathan's answer, but you can copy the source and create your own SelectControl component based on that source. Here's an example, with basically just the aria-label addition: <option key={ `${ option.label }-${ option.value }-${ index }` } value={ option.value } disabled={ option.disabled } aria-label={ option.ariaLabel || '' ...


0

Looking at the code, right now it's not possible to add anything to an option inside the SelectControl besides a label, a value, an optional disabled keyword, and an id which is automatically generated from the label and value.


1

Yes, it's possible and you'd use wp.data.select( 'core/data' ).isResolving(). Example based on your code: const MyComponent = withSelect(select => { const { isResolving } = select( 'core/data' ); const query = { _fields: 'id,name,slug' }; return { terms: select('core').getEntityRecords("taxonomy", "my_taxonomy", query), isRequesting: ...


3

You can use dangerouslysetinnerhtml, a special HTML attribute in React: dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you ...


1

I haven’t tested it, but you might want to try: element.createElement( 'div', null, {dangerouslySetInnerHTML: {__html: contentString}}, )


1

In addition to loading the wp-api script as mentioned here: wp_enqueue_script( 'wp-api' ); // or use below when enqueueing as dependency //wp_enqueue_script( 'my_script', 'path/to/my/script', array( 'wp-api' ) ); You should also know that each collection is a function (equivalent to a class in PHP), so you need to use the new keyword to instantiate a ...


2

No. There is no official email form block or widget. JetPack has a Form Block though. JetPack is not "official", but is developed by the same people who run WordPress .com, so it is as close to an “official” block that you’ll get, even though they are not the official developers of the WordPress software itself, and you’ll need to install a plugin and ...


1

You need to enqueue WP API javascript, You should have added above code in one of your custom files, support your file name is myscript.js And you should have queued it somewhere, modify that and attach wp-api as a dependency like this : wp_enqueue_script( 'my_script', 'path/to/my/myscript.js', array( 'wp-api' ) );


0

It cannot be done, no API currently exists to add what you want to add. If we look at the component that implements this: https://github.com/WordPress/gutenberg/blob/5b01c97c6943890abb44b2154392ffcccef87b3e/packages/format-library/src/link/inline.js#L197 The InlineLinkUI wraps a component that wraps the URLPopover component, and places a child component ...


1

I think you're looking for: const featuredImageId = wp.data.select( 'core/editor' ) .getEditedPostAttribute( 'featured_media' ); to get the ID of the featured image and then for the corresponding media object: const media = featuredImageId ? wp.data.select( 'core').getMedia( featuredImageId ) : null; See e.g. here in the post featured image ...


0

The issue for me was the clean_script_tag() function from Soil. Removing add_filter('script_loader_tag', 'clean_script_tag'); solved the bug for me.


0

I think the best way to approach this is by creating 2 blocks with a parent -> child relationship. The child block would be a nested block only available within its parent block. Note the parent defined below. registerBlockType( 'prefix/childblock', { title: __( 'Inner Child Block' ), parent: ['prefix/parentblock'], attributes:{ ...//the rest of your ...


1

There are two options: Easy (or without coding) In short, make sure the page has a non-empty content. Set the "Posts page" to none. Edit the page you wanted to be the posts page and enter any content — even a space () would be sufficient. Save the page. Now set the "Posts page" to the page you've just edited. Edit that page and you should now see ...


0

All current data from the Block Editor is stored in a data store. If you click on the save button, this data is send via the REST API to the database. You can select data from the store and subscribe to changes. // Create a higher-order component that updates automatically when featured image changes. const applyWithSelect = withSelect( ( select ) => { ...


0

As per my comment above, I arrived at a similair solution to the one suggested by @Mattimator. Posting my code here in case it's useful. add_filter( 'the_content', 'airpets_terms_nav' ); function airpets_terms_nav($content) { if( is_page_template( 'page-terms.php' ) ): $menu = '<div id="top" class="anchor-menu"><ul class="menu">'; ...


1

If you have a server side rendered block in the backend, it is rendered via the REST API endpoint /wp/v2/block-renderer/xyz/blockname. This endpoint calls your render function. In the frontend the render function is called directly. The function is_admin() checks if a backend page was requested. In a REST API Request is no backend page, so the function ...


1

Have you tried using parse_blocks() (pass in get_the_content())? That returns an array of all the blocks in your content. From there you can pull out block names and id attributes using an array map or foreach. Assuming you only want to pull anchor tags from the headings, you could do something like: $blocks = parse_blocks( get_the_content() ); $...


2

From the documentation: Prepend and append to the panel contents: var el = wp.element.createElement; function wrapPostFeaturedImage( OriginalComponent ) { return function( props ) { return ( el( wp.element.Fragment, {}, 'Prepend above', el( OriginalComponent, ...


1

You can find documentation for the various packages in the Gutenberg Github repo in the readme for each package. For example, the "data" module docs are here: https://github.com/WordPress/gutenberg/tree/master/packages/data I will search a term in the Gutenberg repo, and show just the Markdown files to quickly find any related documentation. As far as ...


1

In the edit method for your custom block, when rendering the components you can use the "conditional + &&" pattern: <PanelBody title={ __( 'My Panel' ) } > { myCustomBool && <MyComponent value={theValue} onChange={ value => { myChangeCallback(value); ...


0

To get this value, use the wp.data module. const template = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'template' ); Since this can be changed in the document settings, you would likely need to "subscribe" and run a callback whenever this changes. For example: const { select, subscribe } = wp.data; class PageTemplateSwitcher { ...


1

This markup is generated on the js side of things and saved in the content of the block editor, which is why there doesn't seem to be a native PHP function for this. However, I found a PHP method that does exactly this in an "experimental" class in the Gutenberg plugin. You can see this here: https://github.com/WordPress/gutenberg/blob/master/lib/class-...


0

You probably shouldn't use jQuery with gutenberg block-editor. Instead, use api access like: wp.data.select("core").XXXXXXX() wp.data.select("core/editor").XXXXXXX() where you should replace xxx with desired functions. You can list them with console.log(wp.blocks.getBlockTypes()); while on block-editor page.


Top 50 recent answers are included