search

scripting / wordlandSupport

A place for developer support for WordLand.
0 stars 0 forks source link

Creating a Gutenberg block for images #10

Open scripting opened 19 hours ago

scripting commented 19 hours ago

I think I'm really close to getting images to fit into the blocks scheme in Gutenberg.

Here's what I do

  1. In WordLand, the user uploads an image.
  2. That generates an HTML img element, which the user then pastes into their WordLand document.
  3. When the user clicks the airplane icon to publish, it is sent to the wpidentity server in Markdown.
  4. Before converting the Markdown to HTML in order to send it to WordPress, it preprocesses the text, converting the Markdown images to Gutenberg images. I got this text by creating a post using the block editor in WordPress, then replicating what it generated for the image. I will paste in an example in source in the section below.
  5. Then it converts it the Markdown text to HTML and makes the call to wordpress.com via the wpcom API.

The code that's generated by preprocessor

"<p>Now I&#39;m interested to see how WordPress represents image blocks in Gutenberg.</p>
<!-- wp:image -->
<figure class="wp-block-image size-large is-resized"><a href="https://daveverse.wordpress.com/wp-content/uploads/2024/11/mrsmith.png"><img src="https://daveverse.wordpress.com/wp-content/uploads/2024/11/mrsmith.png" alt="" class="wp-image-4375" style="width:86px;height:auto"/></a></figure>
<!-- /wp:image -->

<p>Some text after the image.</p>
"

The results

The page on wordpress.com.

The post on mastodon.

As you can see the image does not get through to Mastodon, but I feel like we're really close?

attn @pfefferle

pfefferle commented 2 hours ago

We also made some changes to the WordPress.com implementation to improve the detection of non-block images... We plan to release these changes next week!