• Hello,

    I create a new block with svg tag in the jsx template on save function.
    When i save on my pc, there’s no problem after reload page, but when an other pc update the block, on reload page, the block validation is wrong. I inspect and i thound that svg tag in html code is missing.
    Why is doing this ?
    Anyone have solution to solve this ?
    I have the same issues when i add attribut srcset, sizes or time tag on jsx. They disappear on save whith an other pc. I use private navigator, purge cache, but the issues is always present in the bloc.
    Thanks for help

    
    const {__, setLocaleData} = wp.i18n;
    const {
        registerBlockType,
    } = wp.blocks;
    const {
        InnerBlocks
    } = wp.editor;
    const {
        G, Path, SVG, Circle
    } = wp.components;
    
    const BLOCKS_TEMPLATE = [
        ['custom-gutenberg-elements/cge-local-full-post-intro-bloc', {}],
    ];
    const ALLOWED_BLOCKS = ['custom-gutenberg-elements/cge-local-full-post-intro-bloc'];
    
    registerBlockType('custom-gutenberg-elements/cge-local-full-post-intro-bloc-container', {
        title: __('CGE: Full Local - Introduction conteneur slide', 'custom-gutenberg-elements'),
        icon: 'index-card',
        category: 'formatting',
        attributes: {},
        edit: (props) => {
            const {
                className,
                attributes: {},
            } = props;
    
            return (
                <div className={"section-left col-sm-12 " + className}>
                    <div className="row">
                        <div className="block block-page__text col-md-10">
                            <div className="block-content">
                                <div className="block-body rte">
                                    <InnerBlocks template={BLOCKS_TEMPLATE}
                                                 allowedBlocks={ALLOWED_BLOCKS}
                                                 templateLock={false}/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        },
        save: (props) => {
            const {
                className,
                attributes: {},
            } = props;
    
            let asset = "https://" + window.location.hostname + "/content/themes/resoconfort/dist/"
    
            return (
                <div className="col-sm-6">
                    <div className={"block block-intro__text " + className}>
                        <div className="dots">
                            <div className="dot dot-chauffage">
                          <span className="dot-icon">
                            <SVG width="56" height="56" viewBox="0 0 52 52" version="1.1"
                                 xmlns="https://www.w3.org/2000/svg">
                              <Circle cx='26' cy='26' r='25' stroke="white" stroke-width="2" fill="transparent"/>
                            </SVG>
                            <img src={asset + "images/intro__text-fire.png"} width="27" height="32" alt=""/>
                          </span>
                                <strong className="dot-text match-2">Chauffage</strong>
                            </div>
                            <div className="dot dot-climatisation">
                          <span className="dot-icon">
                            <SVG width="56" height="56" viewBox="0 0 52 52" version="1.1"
                                 xmlns="https://www.w3.org/2000/svg">
                              <Circle cx='26' cy='26' r='25' stroke="white" stroke-width="2" fill="transparent"/>
                            </SVG>
                            <img src={asset + "images/intro__text-snowflake.png"} width="28" height="29" alt=""/>
                          </span>
                                <strong className="dot-text match-2">Climatisation</strong>
                            </div>
                            <div className="dot dot-ventilation">
                          <span className="dot-icon">
                            <SVG width="56" height="56" viewBox="0 0 52 52" version="1.1"
                                 xmlns="https://www.w3.org/2000/svg">
                              <Circle cx='26' cy='26' r='25' stroke="white" stroke-width="2" fill="transparent"/>
                            </SVG>
                            <img src={asset + "images/intro__text-propeller.png"} width="28" height="30" alt=""/>
                          </span>
                                <strong className="dot-text match-2">Ventilation</strong>
                            </div>
                            <div className="dot dot-eau">
                          <span className="dot-icon">
                            <SVG width="56" height="56" viewBox="0 0 52 52" version="1.1"
                                 xmlns="https://www.w3.org/2000/svg">
                              <Circle cx='26' cy='26' r='25' stroke="white" stroke-width="2" fill="transparent"/>
                            </SVG>
                            <img src={asset + "images/intro__text-drop.png"} width="24" height="30" alt=""/>
                          </span>
                                <strong className="dot-text match-2">Eau chaude</strong>
                            </div>
                        </div>
                        <div className="slider">
                            <InnerBlocks.Content/>
                        </div>
                    </div>
                </div>
            );
        }
    });
    
    
  • The topic ‘SVG tag block validation’ is closed to new replies.