WP 5.4 – Block validation failed for

Ok, i got one step closer to the problem
It seems that after the 5.4 versione the block validation got more strict.

We must now use the className attribute as opposed to class
Using class was an error in the fist place, but it was somehow tolerated by the older version.

I’m currently working on a workaround to update WP without loosing the corrupted blocks content, i’ll let you know if i succeed.

Ok then
I came up with this procedure that allows you to correct the corrupted block without losing content.

1. Start with a complete backup pre wordpress 5.4 OR revert update (not tested)
2. Edit your block to support a deprecated version as noted in the block editor handbook.
   As for the example above it should go like this. (not tested)

   const { registerBlockType } = wp.blocks;
   const { RichText, InspectorControls, ColorPalette, MediaUpload } = wp.editor;
   const { PanelBody, TextControl, IconButton } = wp.components;
   
   registerBlockType('andyandrejka/profile-pic', {
     // Atributes
     title: 'Profilovy obrázek',
     description: 'Profilovy obrázek',
     icon: 'format-image',
     category: 'layout',
   
     // custom attributes
     attributes: {
       backgroundImageUrl: {
         type: 'string',
         default: null
       },
     },
   
     edit({ attributes, setAttributes }) {
       const {
         backgroundImageUrl,
       } = attributes;
   
       function onSelectImage(newImage) {
         setAttributes({ backgroundImageUrl: newImage.sizes.full.url });
       }
   
       return ([
         <InspectorControls style={{ marginBottom: '40px' }}>
           <PanelBody title={'Profilovy obrázek'}>
             <p><strong>Vyberte porfilovy obrázek:</strong></p>
             <MediaUpload
               onSelect={onSelectImage}
               type="image"
               value={backgroundImageUrl}
               render={({ open }) => (
                 <IconButton
                   className="editor-media-placeholder__button is-button is-default is-large"
                   icon="upload"
                   onClick={open}>
                   Obrázek
                 </IconButton>
               )}
             />
           </PanelBody>
         </InspectorControls>,
   
         <section className="Componet profile_pic">
           <div className="Wrapper">
             <div className="img_w">
               <div className="img" style={{ backgroundImage: <code>url(${backgroundImageUrl})</code> }}></div>
             </div>
           </div>
         </section>
       ]);
     },
   
     save({ attributes, setAttributes }) {
       const {
         backgroundImageUrl,
       } = attributes;
   
       return (
         <section className="Componet profile_pic">
           <div className="Wrapper">
             <div className="img_w">
               <div className="img" style={{ backgroundImage: <code>url(${backgroundImageUrl})</code> }}></div>
             </div>
           </div>
         </section>
       )
     },
   
       deprecated: [
           {
               attributes: {},
    
               save( props ) {
                   return (
                       <section class="Componet profile_pic">
                           <div class="Wrapper">
                           <div class="img_w">
                               <div class="img" style={{ backgroundImage: <code>url(${backgroundImageUrl})</code> }}></div>
                           </div>
                           </div>
                       </section>
                   );
               },
           }
       ]
   });

3. Open one by one every post that uses the corrupted block and save/update it without any change. This will delete the corrupted version of the block from the DB, saving the new version.
4. Update wordpress to latest version (tested with 5.4.2)

Important: Only update WP afer opening and saving the corrupted posts, otherwise you will keep a corrupted version and you will have to restart the procedure.

it should be everything. Hope it helped

• This reply was modified 4 years, 7 months ago by leorospo. Reason: typos, formatting