I have a custom Gutenberg block that contains a list of InnerBlocks (all the same known block), and I am trying to output the title attribute from each of those blocks in a list on the parent block. I'm trying to get values from the innerblocks and add them to an array attribute on the parent block, This is a simplified version of the parent block edit.js const Edit = ( props ) => { const { attributes: { childValuesArray …
I'm having some troubles with CPTs defined with custom rest_namespace at register_post_type. I keep getting an 404 error at the console. The error shows that the namespace is not being changed in autosave route. WP default namespace: wp/v2 Custom namespace defined: ek/v1 I dug into the core classes to find how Wordpress handle custom namespace. The WP_REST_Autosaves_Controler define the namespace using get_post_type_object at the __construct method: ... $post_type_object = get_post_type_object( $parent_post_type ); .... $this->namespace = ! empty( $post_type_object->rest_namespace ) ? …
I have a Gutenberg block with a couple of inner blocks (using InnerBlocks from @wordpress/block-editor). In the edit function, I pull the attributes of all inner blocks and put them in an array. There is one case when it doesn't work. If I create a new inner block in WordPress admin, then change some settings inside this block, then not clicking anywhere else, click the "Update" button, the attributes of the last inner block will not be pulled because between …
I wanted to enable Gutenberg for My Single Product Description so I followed this guide https://dev.to/kalimahapps/enable-gutenberg-edit function activate_gutenberg_product( $can_edit, $post_type ) { if ( $post_type == 'product' ) { $can_edit = true; } return $can_edit; } add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 ); function enable_taxonomy_rest( $args ) { $args['show_in_rest'] = true; return $args; } add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' ); add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' ); function register_catalog_meta_boxes() { global $current_screen; // Make sure gutenberg is loaded before adding the metabox if ( method_exists( $current_screen, …
I'm developing a block theme and I need the user to edit the site content with the full site editor in two different languages. In this situation, what would be the approach to allow the same page to have two versions, each one in a different language?
I'm working with a third-party API that has optional filters on their API. I'm creating a block where the user has two select elements in Edit.js that are displayed on the backend of the block. They can select filters, specialty, and location, these values are then stored in attributes. Once a user changes a select, I want to fire off a PHP request using these attributes passed to the PHP function that uses wp_remote_get() to build the proxy and dump …
Is there any way to force a Gutenberg block to be on every page of a post type? I tried to add a template on my page and it does almost what I need, but I can still remove my default blocks. The closest I've come is this: function ckt_mina_init_required_block() { // create a new page template (pages only) $page_type_object = get_post_type_object('page'); $page_type_object->template = [ [ 'core/group', [], [ // add a paragraph block for the page summary [ 'core/paragraph', …
I'm running WordPress 6.0 and using the Block Editor to enable content editors to paste links that generate the embed/iframe preview, as described here. I've noticed from time to time (i.e. erratically) the embed script doesn't seem to run, and the link remains as static text without converting into the iframe preview. I'm also using Swup.js to handle page transitions throughout the site, and I'm wondering if wp-embed has a method of some kind that I can hook into to …
Is there a way to add inline php code to the editor using wp_print_scripts? I'm trying to find a way to display text from a php string into a value of input of a block. Here's my code: function shapeSpace_print_scripts() { ?> <?php $block_yt_url = 'test';?> <script> jQuery(document).ready(function ($) { let $yt_url = false; $(document).on( "click", '#yt_run .acf-button-group', function() { $(".editor-post-publish-button__button").hide(); $(".acf-block-body div div.acf-block-fields.acf-fields div.acf-field.acf-field-text.acf-field-6260f423f1666").css({'height':'inherit','padding':'16px 20px','overflow':'inherit'}); $(".acf-block-body div div.acf-block-fields.acf-fields div.acf-field.acf-field-text.acf-field-6260f423f1666").val(<?php echo $block_yt_url;?>); $('#yt_url .acf-input input').keyup(function(e) { if(e.keyCode == 13) { …
I'd like to remove the placeholder in an empty block 'type / to choose a block'. I often have empty spaces in my drafts as I'm writing and this placeholder clutters everything. I'd just like it empty. Is there a way to remove it with a filter?
I'm writing a custom Gutenberg editor block. When saving the block I can save simple HTML elements, like in the documentation: return wp.element.createElement('div', blockProps, 'Your block.'); However, I need to return some huge and complicated HTML that I cannot produce in that way. To give you an impression: <div class="wrapper"><svg class="some-svg-image" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 600" xml:space="preserve" aria-labelledby="catTitle catDesc" role="img">...<g>...<path>...</svg></div> When I return this as a string, it will be escaped. How can I prevent escaping …
In a recent update to WordPress, the following responsive device preview system was added to the Block Editor: Easy to hide them via: .block-editor-post-preview__button-resize { display: none; } But, how can we disable this feature so when you click on the preview button, it opens up a front-end preview of the post on a new tab. Just as it used to be.
I'm quite new to Gutenberg and Wordpress and facing some issues with my attribute. When I'm trying to output the attribute data it is returning an empty object. Not quite sure why the default values aren't being applied? Thanks in advance! registerBlockType("mt/product-listing", { title: "Product", icon: "edit-page", category: "design", attributes: { content: { type: 'string' } }, ..., And when trying to access in edit: edit: (props) => { // Accessing props console.log("Edit", props); return ( <div> <Products product={props.attributes} /> …
I created a block that uses inner blocks/child blocks. The parent block is named Columns and only child blocks named Column are allowed in it. The Column child block accepts any blocks. The structure looks like this: <Columnns> <Column><Any block></Column> <Column><Any block></Column> <Column><Any block> <Another block> <One more block></Column> </Columns> In the edit function for the child Column block, I am just using an inner blocks appender that allows any blocks to be added in it. The edit function for …
I'm developing some custom blocks in the new Gutenberg editor experience, and I'm struggle to understand how to use some build-in components, mostly the Draggable components. What I would like to achieve is a list of items (let's say many li in a ul) and I want them to be orderable with a drag & drop feature. Here is my code: import { __ } from '@wordpress/i18n'; import { registerBlockType } from '@wordpress/blocks'; import { Draggable, Dashicon } from '@wordpress/components'; …
I'm trying to create a new panel in the edit-post sidebar (Wordpress Gutenberg), I already managed to set the panel with the title and the text in the content part but I need to add a button there and no I find a way to do it. var registerPlugin = wp.plugins.registerPlugin; var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel; // var btn = wp.element.createElement( 'button' ); var el = wp.element.createElement; var __ = wp.i18n.__; /* I tried to do it with a function, but …
I'm building a dynamic block. All seems to be working fine, except it isn't actually rendering the block in the editor. It is doing something, because if I inspect the page source in the editor, the content that should be being rendered is on the page, but it's inside of an apiFetch: <script id="wp-api-fetch-js-after"> ... wp.apiFetch.use(..."content":{"raw":" \\my html is here ","protected":false,"block_version":1}, ... My edit code looks like this: import ServerSideRender from '@wordpress/server-side-render'; import { useBlockProps } from '@wordpress/block-editor'; export default …
Given the html block tag I can include and iframe from Google My Maps in my post. I need to create a block where the client can paste the URL from the embed code and the block render the iframe. note: "embed code" does not mean using the embed tag, but that is what the iframe code is called to embed the map on a web page. I have attempted with Genesis Custom Blocks but it will not render the …
I am writing a plugin that creates a custom block. When the block is selected/focused in the editor, a border is created abound it (blue in the current version of WP). I would like to disable the border for the specific block type, either in JavaScript or CSS. The problem is that the block content in the editor is wider than the block border, so it looks awkward. What would be a good solution? EDIT (further explanation): The content of …
I am using ACF fields to create custom Gutenberg Blocks. I am running into an issue however where I need to go in and out of a container div depending on the block. So I cant just add a container div around the_content(); What I'm trying to do is add a class to each of the standard Gutenberg blocks, so I can add the container styles to each of those blocks, making it easier to go in and out of …