bangank36 / gitenberg Goto Github PK

Summary

• GFM did not support accordion block by default, the workaround solution is using tag to display a disclosure content
• The block should consist of 2 parts
  • The title
  • The content of the tag, should we use innerBlock, because inside we can display all other content like text and image
• The block will need only the open attribute for the disclosures content

Reference

TBA
https://togithub.com/WordPress/gutenberg/issues/21584

• Getwid accordion block https://github.com/motopress/getwid/tree/master/src/blocks/accordion/accordion-item
• Kadence block https://github.com/stellarwp/kadence-blocks/blob/93ee9f0bb60ba7f3394e9e1a406db2aca87b868c/src/blocks/accordion/pane/block.js
• Otter block https://github.com/Codeinwp/otter-blocks/tree/master/src/blocks/blocks/accordion/item
• Tiptap Editor with is used in Gitlab https://github.com/ueberdosis/awesome-tiptap
  • Gitlab Editor with has detail tag as extension https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/assets/javascripts/content_editor

Summary

• Not all gutenberg blocks are supported on github, we should limit the blocks selector with the valid one and add new block if needed (comes later)
• Default settings schema can be found here

Reference

• CF7 Blocks settings implementation
• nit: all allowed blocks can be found https://gist.github.com/ThatGuySam/944d6f739eacb5708d6d4bd4eb26c938

Summary

• turndown is a library that is used to convert HTML to markdown, but the default config did not support Gutenberg blocks like table...
• Adding the gfm (github flavored markdown) support using turndown-plugin-gfm
  • mixmark-io/turndown-plugin-gfm#28
  • https://github.com/laurent22/joplin/tree/dev/packages/turndown-plugin-gfm
  • All those plugins is intended for node env, so I made a dirty es module from there
• Current state

Editor	Output

Implementation

• Import turndown-plugin-gfm

Summary

• So far the #7 introduced the new block (Shields Badge), which is image underline, so the block will be parsed as image block on load
• We need to tweak the markdown-it library to parse the images into Shields Badge based on its src attribute
• First attempt with overridden renderer is not working as the generated HTML image is wrapped inside a p tag, check the below comment

Reference

• https://publishing-project.rivendellweb.net/customizing-markdown-it/?fbclid=IwAR0cb6_QtZkOUhX7sAjEEKjEvBLbrwGTT1rurU6zFmFOwhZ-etxi66w1Ib0
• Different approach to detect block image and inline https://github.com/rotorz/markdown-it-block-image/blob/master/lib/index.js
• Center align text? Use p align attribute https://github.com/badges/shields/blob/master/README.md?plain=1