Rerender core Templates with with ToggleControl but it doesnt recognize block type

Hey Guys I want to change my const TEMPLATE = [template] dynamically with the <InnerBlocks template={TEMPLATE} /> component. Based on a toggle I want to remove my ‘core/image’ block. I tried to create this with state and I set the state of my template and columns when I toggle them. Gutenberg gives a blocktype ‘r’ not recognized error.

My index.js file of the block can be found in here

const { __ } = wp.i18n; import './styles/editor.scss' import './styles/style.scss' import edit from './edit'; import save from './save';  /**  * Register block  */  export const name = 'toolbox/three-cta';  export const settings = {     title: __("Three CTA Block"),     description: __("Display CTA block"),     category: "widget",     icon: "awards",     attributes: {         paragraph: {             type: 'string',             default: '',             source: 'html',             selector: 'p'         },         heading: {             type: 'string',             source: 'html',             selector: 'h2'         },         cards: {             type: 'number',             default: 0,         },         toggleImg: {             type: 'boolean',             default: false,         }     },     edit,     save, }  

And in edit.js these attributes gets changed. I think it has something to do with the core blocks I might be setting. But I didnt change the names of these core blocks, so I dont understand why Gutenberg doesnt recognize it.

import { InnerBlocks, InspectorControls } from "@wordpress/block-editor"; import { __ } from "@wordpress/i18n"; import { PanelBody, PanelRow, RangeControl, ToggleControl } from "@wordpress/components"; import { useDispatch, useSelect } from "@wordpress/data"; import { createBlock } from "@wordpress/blocks"; import { useState } from "@wordpress/element"; const { times } = lodash;   // const TEMPLATE = [ // The template that should be reproduced. Based on the toggle  [ "core/image", {} ], should be removed //  [ 'core/heading', { placeholder: 'Three CTA Block' } ], //  [ 'core/columns', {}, [ //      [ 'core/column', {}, [ //          [ "core/image", {} ], //          [ "core/heading", { placeholder: __( "Toolbox CTA" ) } ], //          [ "core/paragraph", { placeholder: "CTA Description" } ], //          [ "core/button", { placeholder: "Call to Action" } ], //      ] //      ], //      [ 'core/column', {}, [ //          [ "core/image", {} ], //          [ "core/heading", { placeholder: __( "Toolbox CTA" ) } ], //          [ "core/paragraph", { placeholder: "CTA Description" } ], //          [ "core/button", { placeholder: "Call to Action" } ], //      ] //      ], //      [ 'core/column', {}, [ //          [ "core/image", {} ], //          [ "core/heading", { placeholder: __( "Toolbox CTA" ) } ], //          [ "core/paragraph", { placeholder: "CTA Description" } ], //          [ "core/button", { placeholder: "Call to Action" } ] //      ] //      ], //  ] //  ] ];  export default function edit( props ) {     const { className, attributes, setAttributes, clientId } = props;      // code for the rangeControl Innerblocks doesnt affect the code (if not clicked on the rangeControls)     const { replaceInnerBlocks } = useDispatch( "core/block-editor" );     let { inner_blocks } = useSelect( select => ( {         inner_blocks: select( "core/block-editor" ).getBlocks( clientId )     } ) );      let [column, setColumn] = useState([ 'core/column', {}, [         [ "core/heading", { placeholder: __( "PLACEHOLDER" ) } ],         [ "core/paragraph", { placeholder: "CTA P" } ],         [ "core/button", { placeholder: "CTA Button" } ],     ]])       const [template, setTemplate] = useState([         ["core/heading", { placeholder: "Three CTA Block" }],         ["core/columns", {}, [...column]],     ])        const toggleChange = (value) => {         setAttributes({ toggleImg: value })         // const newColumn = column += ['core/column', {}, [["core/image", {}],]];         const newColumn = [ 'core/column', {}, [             [ "core/image", {} ],             [ "core/heading", { placeholder: __( "Toolbox CTA" ) } ],             [ "core/paragraph", { placeholder: "CTA Description" } ],             [ "core/button", { placeholder: "Call to Action" } ],         ]]          setColumn(newColumn);         setTemplate([             ["core/heading", { placeholder: "Three CTA Block" }],             ["core/columns", {}, [...newColumn]],         ])      }      const getInspector = () => {         return (                 <InspectorControls>                     <PanelBody                             title="Add columns"                             initalOpen={true}                     >                         <PanelRow>                             <RangeControl                                     label="columns"                                     value={attributes.cards}                                     min={0}                                     max={3}                                     onChange={count => {                                         let new_innerblocks = inner_blocks                                         if ( attributes.cards < count ) {                                             new_innerblocks = [                                                 ...inner_blocks,                                                 ...times( count - attributes.cards, () =>                                                         createBlock( "toolbox/three-cta" )                                                 )                                             ];                                         } else if ( attributes.cards > count ) {                                             inner_blocks = inner_blocks.slice( 0, count )                                         }                                         replaceInnerBlocks( clientId, new_innerblocks, false );                                     }}                             />                         </PanelRow>                         <PanelRow>                             <ToggleControl                                     label="Toggle me"                                     checked={attributes.toggleImg}                                     onChange={(value) => toggleChange(value)}                             />                         </PanelRow>                     </PanelBody>                 </InspectorControls>         )     }      return (             <>                 {getInspector()}                 <div className={className}>                     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossOrigin="anonymous"/>                     <div className="grid-x">                         <div className="cell small-12">                             <InnerBlocks template={template} templateLock="true"/>                         </div>                     </div>                 </div>             </>     ); } 

Setting fallback (default) image to featured image block

I was trying to make a block based theme and encountered a problem trying to set a default featured image in case some posts do not have them.

Basically, we used to do this in php

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } else { ?> <img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" /> <?php } ?> 

But now with blocks, themes are html and all I can see is

<!-- wp:post-featured-image {"isLink":true} /--> 

I couldn’t find any other parameters here nor an if/else block so I could just add a plain html.

If anyone has done this, that would be of great help.

Thanks.

Dequeue Gutenburg Block Library CSS (‘wp-block-library’) in Admin

I am working on removing the default Gutenberg block library stylesheet and replacing it with custom pared-down styles. I do not want the original stylesheet to load on either the front or back end, as it means I’d need to add unnecessary bulk to the custom styles in order to override styles in the default stylesheet.

I’ve successfully dequeued the styles from the front end using the standard in a wp_enqueue_scripts action:

function test_function(){     wp_dequeue_style('wp-block-library'); } add_action( 'wp_enqueue_scripts', 'test_function' ); 

However, this does not dequeue the styles from the block editor. I have tried dequeuing from an admin_init action as well, and that also does not remove the styles from the block editor.

Is it possible to dequeue this stylesheet from both the front-end and the admin block editor?

Block some subdomains using robots.txt -Angular website with IIS [duplicate]

We have a testing environment with the surprising sub-domain name tests and I would like to block it to search engines.

How can I let Google scan my site https://example.com and block https://tests.example.com, but allow https://app.example.com.

I already read other answers but they were not relevant to me because I don’t use Apache and also this is an Angular website so adding a file in a subdomain won’t help.

Thank you!

Site de-indexed by Bing, then block removed by the Bing team but rankings not returning

Last month Bing de-indexed my site (www.generatormix.com) – after a review by the Bing team the block was removed (they didn’t specify why it got de-indexed in the first place but it must have been a "false positive" in the algorithm somewhere.)

Since the block was lifted on my site on the 22nd of April there seems to be no improvement at all in my site presence in bing despite being advised by a Bing rep that it would take 2-3 weeks to recover from the block.

enter image description here

On April 22nd it seemed to be coming back with 99 impressions on that day:

enter image description here

Then the impressions went back to almost nothing and stayed that way. On May 4th for example it was 9 impressions:

enter image description here

There is only one phrase I can see my site ranking for "random movie generator" (no quotes) (pos 2) it doesn’t rank for any other significant phrases that it used to as of May 16th. Even if you type exactly "generatormix.com" into Bing (without quotes) my site doesn’t appear; just recommendations for competitors to use instead.

Is it suddenly going to come back like it used to before the block at some point in the near future, because one would think it would be coming back gradually over the course of 2-3 weeks and it has been longer than that now?

Has anyone on here has an experience similar to this and if so, what do I do now? The person from Bing was very nice and helpful but it appears they have determined the issue is resolved and haven’t replied to my last email.

Thanks, John

customise JSON object of a block

A simple wp block:

<!-- wp:video {"id":155742} --> <figure class="wp-block-video"><video controls src="http:vidoe.mp4"></video></figure> <!-- /wp:video --> 

How to achieve something along those lines:

<!-- wp:video {"id":155742, "poster_id":155654 } --> <figure class="wp-block-video"><video controls src="http:vidoe.mp4"></video></figure> <!-- /wp:video --> 

I’ve been going through many articles on adding custom attributes to blocks but can’t find reference to modify the JSON object that is included in the HTML comment that WP adds to blocks. Is there a hook to modify the JSON object?

Gutenberg is there a way to know if the current block is reusable?

So I have developed some blocks using React, I save my css generated in the post meta, that’s works fine. In the case of reusable blocks:

  • Whene we set a block as reusable this block will saved as hidden CPT (wp_block) as the documentation. (https://developer.wordpress.org/block-editor/explanations/architecture/key-concepts/#reusable-blocks).
  • Since the block is reusable I wanted to save the css generated for the reusable block in one place (post meta for wp_block CPT for example), that’s will achieve the goal of reusable block, whene the reusable block changed, this will affect all place (posts/pages) that use this reusable block. For that I wanted to check if rendred block is reusable to handel some login?

How can i reduce the cost in Bitmap Heap Scan, Filter and Heap Block?

Looks like the query taking time in the second last step in which it mapping index to actually rows so can I optimize this query in any terms, I m not sure if something wrong with the index? and what is Heap Block means is this related to work_mem.

Postgres Configuration: RAM 16GB vCpu 4

Table

CREATE TABLE main.user_resources (     id uuid NOT NULL DEFAULT (md5(((random())::text || (clock_timestamp())::text)))::uuid,     user_tenant_id uuid NOT NULL,     resource_name character varying(50) COLLATE pg_catalog."default" NOT NULL,     resource_value character varying(50) COLLATE pg_catalog."default" NOT NULL,     allowed boolean NOT NULL,     created_on timestamp with time zone NOT NULL DEFAULT CURRENT_TIMESTAMP,     modified_on timestamp with time zone NOT NULL DEFAULT CURRENT_TIMESTAMP,     created_by uuid,     modified_by uuid,     deleted boolean NOT NULL DEFAULT false,     deleted_on timestamp with time zone,     deleted_by uuid,     CONSTRAINT pk_user_resources_id PRIMARY KEY (id) ) 

Query:

SELECT "resource_name","resource_value","allowed" FROM "main"."user_resources" WHERE (("user_tenant_id"=abc') AND ((("resource_value" IN ('efg')) OR ("resource_name" IN ('BO','UB')))) AND ("deleted"=false)) ORDER BY "id";  

Index

CREATE INDEX idx_user_resource_user_tenant_id_and_not_deleted     ON main.user_resources USING btree     (user_tenant_id ASC NULLS LAST)     TABLESPACE pg_default     WHERE deleted = false; -- Index: idx_user_resources_resource_name  -- DROP INDEX main.idx_user_resources_resource_name;  CREATE INDEX idx_user_resources_resource_name     ON main.user_resources USING btree     (resource_name COLLATE pg_catalog."default" ASC NULLS LAST)     TABLESPACE pg_default; -- Index: idx_user_resources_resource_value  -- DROP INDEX main.idx_user_resources_resource_value;  CREATE INDEX idx_user_resources_resource_value     ON main.user_resources USING btree     (resource_value COLLATE pg_catalog."default" ASC NULLS LAST)     TABLESPACE pg_default; -- Index: idx_user_resources_user_tenant_id  -- DROP INDEX main.idx_user_resources_user_tenant_id;  CREATE INDEX idx_user_resources_user_tenant_id     ON main.user_resources USING btree     (user_tenant_id ASC NULLS LAST)     TABLESPACE pg_default;  

EXPLAIN ANALYZE

Sort  (cost=3547.20..3556.41 rows=3686 width=64) (actual time=7.080..7.438 rows=4562 loops=1)    Sort Key: id    Sort Method: quicksort  Memory: 834kB    ->  Bitmap Heap Scan on user_resources  (cost=281.12..3328.84 rows=3686 width=64) (actual time=1.070..5.325 rows=4562 loops=1)          Recheck Cond: (((user_tenant_id = 'abc'::uuid) AND ((resource_value)::text = 'efg'::text)) OR ((resource_name)::text = ANY ('{BO,UB}'::text[])))          Filter: ((NOT deleted) AND (user_tenant_id = 'abc'::uuid))          Rows Removed by Filter: 6912          Heap Blocks: exact=2177          ->  BitmapOr  (cost=281.12..281.12 rows=11470 width=0) (actual time=0.834..0.835 rows=0 loops=1)                ->  Bitmap Index Scan on idx_user_resource_mlt  (cost=0.00..4.43 rows=1 width=0) (actual time=0.021..0.021 rows=3 loops=1)                      Index Cond: ((user_tenant_id = 'abc'::uuid) AND ((resource_value)::text = 'efg'::text))                ->  Bitmap Index Scan on idx_user_resources_resource_name  (cost=0.00..274.84 rows=11469 width=0) (actual time=0.812..0.812 rows=11735 loops=1)                      Index Cond: ((resource_name)::text = ANY ('{BO,UB}'::text[]))  Planning Time: 0.214 ms  Execution Time: 7.932 ms (15 rows) 

Option for removing block not appearing in custom gutenberg block

I’m developing a custom gutenberg block. I’m able to get the fields to appear and I’m able to interact with it when adding it to a page. But the menu that allows you to remove the block does not appear when it’s highlighted. I’m referring to the menu in the screenshot below

enter image description here

I’m using the esnext syntax and this is what my main block js file looks like

    import "./style.scss"; import "./editor.scss";  const { __, setLocaleData } = wp.i18n; const {     registerBlockType, } = wp.blocks; const {     RichText,     MediaUpload, } = wp.editor; const { Button } = wp.components;  registerBlockType( 'tc-blocks/hero-block', {     title: __( 'Hero Block', 'tc-blocks' ),     icon: 'index-card',     category: 'layout',     attributes: {         title: {             type: 'string',             source: 'attribute',             selector: 'h2',         },         mediaID: {             type: 'number',         },         mediaURL: {             type: 'string',             source: 'attribute',             selector: 'img',             attribute: 'src',         },     },     edit: ( props ) => {         const {             className,             attributes: {                 title,                 mediaID,                 mediaURL,             },             setAttributes,         } = props;         const onChangeTitle = ( value ) => {             setAttributes( { title: value } );         };          const onSelectImage = ( media ) => {             setAttributes( {                 mediaURL: media.url,                 mediaID: media.id,             } );         };          return (             <div className={ className }>                 <RichText                     tagName="h2"                     placeholder={ __( 'Write Title…', 'tc-blocks' ) }                     value={ title }                     onChange={ onChangeTitle }                 />                 <div className="tc-image">                     <MediaUpload                         onSelect={ onSelectImage }                         allowedTypes="image"                         value={ mediaID }                         render={ ( { open } ) => (                             <Button className={ mediaID ? 'image-button' : 'button button-large' } onClick={ open }>                                 { ! mediaID ? __( 'Upload Image', 'tc-blocks' ) : <img src={ mediaURL } alt={ __( 'Upload Image', 'tc-blocks' ) } /> }                             </Button>                         ) }                     />                 </div>             </div>         );     },     save: ( props ) => {         const {             className,             attributes: {                 title,                 mediaURL,             },         } = props;         return (             <div className={ className }>                 <RichText.Content tagName="h2" value={ title } />                  {                     mediaURL && (                         <img className="tc-image" src={ mediaURL } alt={ __( 'Image', 'tc-blocks' ) } />                     )                 }             </div>         );     }, } ); 

Here’s how I’m registering the block type in my index.php file

function tc_blocks_hero_block_block_init() {     register_block_type_from_metadata( __DIR__ ); } add_action( 'init', 'tc_blocks_hero_block_block_init' ); 

And here’s my block.json file

{ "apiVersion": 2, "name": "tc-blocks/hero-block", "title": "Hero Block", "category": "widgets", "icon": "smiley", "description": "This is a header block built for a large hero image and text", "supports": {     "html": false }, "textdomain": "hero-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/index.css", "style": "file:./build/style-index.css"  } 

I’ve compared my code to the gutenberg examples code found here https://github.com/WordPress/gutenberg-examples but I can’t seem to find any major differences that would cause an issue and I don’t see any js errors in the console.

How do I get the remove block menu to appear in my custom block?