Code blocks are properly parsed using bgrgicak/playground-blog

[juanmaguitar]

I created a custom repo based on bgrgicak/playground-blog proof of concept. My repo is available at wordpress-juanmaguitar/playground-blog

in that repo I created a few markdown posts, under the posts folder, using code blocks and inline code texts

This is the link for the playground for that repo:
https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/wordpress-juanmaguitar/playground-blog/main/blueprint.json

Code blocks were not properly parsed as it can be seen in the following screenshot:

cc: @bgrgicak @adamziel

[dmsnell]

thanks for the report @juanmaguitar!
this isn't a problem with Markdown parsing, I don't believe, but rather a problem in Block printing to Markdown.

blocky-formats/src/markdown.js

Lines 106 to 109 in f9af13a

	case 'core/code':
	const code = htmlToMarkdown(block.attributes.content);
	const languageSpec = block.attributes.language || '';
	return `\`\`\`${languageSpec}\n${code}\n\`\`\`\n\n`;

When this was quickly built I didn't cross all the t's and dot all the i's. You could fix this and enhance support by Markdown-escaping the output of the code block in the above-linked lines.

[dmsnell]

@juanmaguitar I tried to reproduce this just now and the code block is showing up as I expected it. I took the raw content from the ssh-in-github.md file and then clicked on "Import from Markdown" in the block-formats sidebar. It displayed as a code block with pre-formatted whitespace.

Am I doing something different than you did?

[dmsnell]

@juanmaguitar is it possible you attempted to load the posts as markdown? my plugin isn't setup to load the markdown and convert it. that's found in the Edit Visually browser extension

[juanmaguitar]

@dmsnell I'm not using blocky-formats directly but as part of bgrgicak/playground-blog proof of concept

I reported this issue here as per @bgrgicak recommendation. Maybe he can provide more context on how blocky-formats is used on bgrgicak/playground-blog

I tried to reproduce this just now and the code block is showing up as I expected it. I took the raw content from the ssh-in-github.md file and then clicked on "Import from Markdown" in the block-formats sidebar. It displayed as a code block with pre-formatted whitespace.
Am I doing something different than you did?

I can confirm that copying the markdown to the clipboard and using the "Import from Markdown" option in the block-formats sidebar properly converts it into blocks.

This is the blueprint.json I'm using to launch the playground. In this process there's no copy & paste process involved.

is it possible you attempted to load the posts as markdown? my plugin isn't setup to load the markdown and convert it.

This part is managed by the custom code at bgrgicak/playground-blog

In this project, the PHP part is in charge of parsing the markdown files, reading their contents and passing all that info to JS (blueprint.json is in charge of copying markdown files inside of a WP folder)

At playground-markdown/playground-markdown.js there's the following code that takes the content of each markdown file and transform it to blocks using blocky-formats. The result of this conversion is then used to create a post using the REST API

await import("../blocky-formats/vendor/commonmark.min.js");
  const { markdownToBlocks } = await import(
    "../blocky-formats/src/markdown.js"
  );

  for (let file of window.playgroundMarkdown.markdown) {
    const content = markdownToBlocks(file.content).map((block) => {
      const data = {
        blockName: block.name,
        attrs: block.attributes,
        innerBlocks: block.innerBlocks,
        innerContent: [block.attributes.content],
      };
      if ( data.blockName === "core/image" && data.attrs.url ) {
        const attachment =  window.playgroundMarkdown.attachments.find(attachment => attachment['local_path'] === data.attrs.url);
        if ( attachment ) {
          data.attrs.url = attachment['url'];
        }
      }
      return wp.blocks.serializeRawBlock(data);
    }).join("");
    await fetch("/wp-json/wp/v2/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-WP-Nonce": wpApiSettings.nonce,
      },
      body: JSON.stringify({
        title: file.name,
        content,
        status: "publish",
      }),
    });
  }

[dmsnell]

hm. thanks for the extra information. that script looks proper. I wonder if we have any CSS styles overriding the fixed-width display of the code block.

@juanmaguitar do normal code blocks render properly?

@bgrgicak is the setup using the latest version of blocky-formats? (bc246d1, merged on July 3, 2024)

[bgrgicak]

@bgrgicak is the setup using the latest version of blocky-formats? (bc246d1, merged on July 3, 2024)

@dmsnell the blueprint always loads the latest version of blocky-formats from GitHub.