@sedona-cms/blocks

Block editor for Sedona CMS

Usage no npm install needed!

<script type="module">
  import sedonaCmsBlocks from 'https://cdn.skypack.dev/@sedona-cms/blocks';
</script>

README

Blocks Editor

Block editor for Sedona CMS

View Demo · Report Bug

Table of Contents

About the project

Block editor for Sedona CMS

Built With

Getting Started

Prerequisites

Setup

  1. Add and setup @sedona-cms/core. Setup instructions

  2. Add @sedona-cms/blocks dependency to your project

npm i @sedona-cms/blocks # or yarn add @sedona-cms/blocks
  1. Add @sedona-cms/blocks to the modules section of nuxt.config.js

  2. Create required directories (Will be fixed):

    1. ~/admin/props – custom prop editors
    2. ~/components/blocks– block components

Usage

Built-In Prop Editors

  1. Text
  2. Textarea
  3. Checkbox
  4. Number
  5. Date
  6. Wysiwyg

Create own prop editor

A prop editor is a simple Vue component. All custom editors should be saved in ~/admin/props directory.

In a prop, the editor component can use Quasar components.

Step by step guide

  1. Create a Vue component in ~/admin/props directory
  2. Add required props: title and value
  3. The title prop can have an empty default value
  4. The value prop will fill data from the editor
  5. For updating data in the editor send change event

Example:

<template>
  <q-field :label="title" outlined stack-label dark>
    <template v-slot:control>
      <div class="self-center full-width no-outline" tabindex="0">
        <select v-model="color" class="full-width text-black">
          <option value="red">Red</option>
          <option value="green">Green</option>
          <option value="blue">Blue</option>
        </select>
      </div>
    </template>
  </q-field>
</template>

<script>
  export default {
    name: 'Color',
    props: {
      title: {
        type: String,
        default: '',
      },
      value: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        color: this.value,
      }
    },
    watch: {
      color(value) {
        this.$emit('change', value)
      },
    },
  }
</script>

Development

  1. Install dependencies
npm ci
  1. Link the package in which it is run
npx npm-self-link
  1. Run watch process
npm run watch
  1. Run nuxt project from dev directory
npm run dev