Convert post content into blocks on save

[kkarpieszuk]

Now post content is being save as is and displayed in Gutenberg editor as "classic". This classic block has option in Gutenberg to convert into blocks.

There must be some function to convert it. The task here is to find it and inspect if this could, be done automatically in the moment of the first post save.

[palmiak]

Maybe try something like this:

$post_content = preg_replace( '/^(.+)(\s*)$/m', '<!-- wp:paragraph --><p>$1</p><!-- /wp:paragraph -->', wp_kses( $_POST['editor_box_content'], 'post' ) );
$post_args    = array(
	'post_content' => $post_content,
	'post_title'   => $post_title,
	'post_status'  => 'publish',
);

I did a quick test and it seems to works.

[kkarpieszuk]

@palmiak thanks, but it has caveats:

• it will convert every line into paragraph while lines separated by single new line character should be separated by <br>. This is easy to overcome by wrapping wp_kses into wpautop which will correctly wrap lines into <p> and <br> and then we could use regex /^(<p>.+<\/p>)/xgmsU
• the editor allows to put image into content (when you click button to upload image it adds new line with <img src...>. This should not be wrapped into <!-- wp:paragraph --> but <!-- wp:image -->
• similar to above, I am allowing to use html in the content editor so if someone put <h2>some header</h2> it will be wrapped in <p> as well

As a reference, if we have $_POST['editor_box_content'] data:

s
b

c

d

<img width="750" height="692" src="http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-1024x945.jpg" class="attachment-large size-large" alt="" loading="lazy" srcset="http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-1024x945.jpg 1024w, http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-300x277.jpg 300w, http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-768x709.jpg 768w, http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-600x554.jpg 600w, http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1.jpg 1284w" sizes="(max-width: 750px) 100vw, 750px" />

and we save it and then we go to wp-admin editor and click button "convert into blocks" it will be saved as:

<!-- wp:paragraph -->
<p>s<br>b</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>c</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>d</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-1024x945.jpg" alt=""/></figure>
<!-- /wp:image -->

with your proposed solution it will be saved as:

<!-- wp:paragraph --><p>s
</p><!-- /wp:paragraph -->
<!-- wp:paragraph --><p>b
</p><!-- /wp:paragraph -->
<!-- wp:paragraph --><p>c
</p><!-- /wp:paragraph -->
<!-- wp:paragraph --><p>d
</p><!-- /wp:paragraph -->
<!-- wp:paragraph --><p><img width="750" height="692" src="http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-1024x945.jpg" class="attachment-large size-large" alt="" loading="lazy" srcset="http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-1024x945.jpg 1024w, http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-300x277.jpg 300w, http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-768x709.jpg 768w, http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1-600x554.jpg 600w, http://localhost/acfml/wp-content/uploads/2022/01/0vr5zil8sb981-1.jpg 1284w" sizes="(max-width: 750px) 100vw, 750px" /></p><!-- /wp:paragraph -->

(s and b should not be in separate <p> and <img> should not be in <p> but <figure> etc)

It is not so trivial :)

I am thinking about using the same logic which runs when user clicks "convert into blocks" button in wp-admin but it triggers some JS function which is not available when processing with PHP of course.

As no one is asking for this feature for time being, I keep this ticket open but with low priority.

If it would be done, I'd prefer to use some WP native functions which are not present yet but planned:

• they have added server side block awareness api Block API: Server-side awareness of block types WordPress/gutenberg#2751 with this PR https://github.com/WordPress/gutenberg/pull/21065/files
• there is plan to add server side block conversion based on the api above Server side block conversion WordPress/gutenberg#27878

[palmiak]

I missed the fact of using other blocks than paragraphs (and images, which I had in mind).

I went through some block converters plugins and all using are using JS to trigger the conversion. In some rare cases, it's about manual wrapping some tags like I mentioned above.