JS-Client-for-Block-Editor
The Block Editor JS Client is a JS Module that facilitate the creation and rendering of HTML elements for a block editor(From JSON data). Json Data generate by a JavaScript App linked Below. It provides an object-oriented approach to building dynamic and customizable layouts.
JSON Builder
Here is the JSON builder for a block editor : BlockEditor
A quick preview of JSON Builder Codepen
ElementFactory Class
The ElementFactory class is part of the Aponahmed HtmlBuilder library, providing a convenient way to create HTML elements from JSON data.
Usage
Installation
Include the ElementFactory class in your project by importing it.
import ElementFactory from "./path/to/ElementFactory.js";Methods
createElement(elementData: object): Element
This method creates an HTML element based on the provided elementData. It supports various element types such as 'Area', 'Column', 'Editor', 'Image', 'H', 'P', 'li', and 'List'.
const element = ElementFactory.createElement({ type: 'H', content: 'Hello', tag: 'h1' });json2html(string: string): string
This method converts a JSON string to HTML by creating elements using createElement for each item in the JSON array.
const jsonData = '[{"type":"Area","direction":"column","childs":[{"type":"H","content":"Hello","tag":"h1"}]}]';
const htmlOutput = ElementFactory.json2html(jsonData);
console.log(htmlOutput);Classes
Element
This is an abstract class representing a generic HTML element. Other classes, such as Area, TextElement, Content, Image, ImageWP, and ListElement, extend this class to provide specialized functionality.
Area
Represents an HTML <div> element with child elements. It supports customization of direction, width, and additional styles.
TextElement
Represents text-based HTML elements such as headings (<h1>, <h2>, etc.) and paragraphs (<p>).
Content
Represents a content area with customizable styles and content.
Image
Represents an HTML <img> element with alignment, source, width, height, and custom class options.
ImageWP
An extension of Image specifically designed for WordPress, including support for attachment ID and src-set.
ListElement
Represents HTML list elements (<ul> and <ol>) with child items.