Description List - A WordPress Gutenberg block 📝

This is a WordPress plugin that allows you to add valid HTML description lists as a block in the Gutenberg editor.

• ✅ Valid in accordance to the official <dl> HTML Spec.
• 📖 Allows multiple terms and descriptions
• ⬆️ Easy reordering

Functionality

Backend

Easy to use interface building on top of the default editor interface with inner blocks. It is currently supported to add <p>'s and <img>'s as description for terms.

Frontend

This is how the description list looks on the frontend with default styling:

Outputtet markup

<dl class="wp-block-lmt-description-list">
    <dt class="wp-block-lmt-description-list-item">
        <p>Apple</p>
    </dt>
    <dd class="wp-block-lmt-description-list-item">
        <p>Apple is a company</p>
    </dd>
    <dd class="wp-block-lmt-description-list-item">
        <p>Apple is a fruit</p>
    </dd>
    <dt class="wp-block-lmt-description-list-item">
        <p>Banana</p>
    </dt>
    <dd class="wp-block-lmt-description-list-item">
        <p>Is a yellow curved shaped fruit</p>
    </dd>
    <dt class="wp-block-lmt-description-list-item">
        <p>Pear</p>
    </dt>
    <dd class="wp-block-lmt-description-list-item">
        <p>Pear is a shape you become if you eat donuts instead of fruit</p>
    </dd>
</dl>

Todo

🚧 You can use this block today but it's still work in progress

• [ ] Better styles. 🎨
• [ ] Add transform rules so the block can be transformed into other blocks. 🔄
• [ ] More stuff? 💡Create an issue / PR.

Development

If you want to build upon or contribute to this block. 🛠️

This project was bootstrapped with Create Guten Block. Go to the repo find the most updated information about the block toolkit.

create-guten-block is zero configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, webpack, ES6/7/8/Next, ESLint, Babel, etc.

How to get started:

👉 npm start

• Use to compile and run the block in development mode.
• Watches for any changes and reports back any errors in your code.

👉 npm run build

• Use to build production code for your block inside dist folder.
• Runs once and reports back the gzip file sizes of the produced code.