@siteone/pagebuilder-core

@siteone/pagebuilder-core

TODO: State management and stuff

Usage

const pagebuilderCore = require('@siteone/pagebuilder-core');

// TODO: DEMONSTRATE API

API

BlockMeta

Pro jednoduché testování se přidávají základní informace o bloku do DOM jako data- attributy k bloku

předáváme data-blockname a data-blockid, v konkrétních blocích je pak potřeba myslet na to, aby se tyto props předali do nejvyšší úrovně bloku

BlockMetaContext

Každý block, který je vyrenderovaný pagebuilderem, předává do BlockMetaContextu informace o daném bloku, které jsou primárně určeny pro analytiku, ale může být použita na více věcí

Context obsahuje data v tomto formátu

type BlockMetaType = {
  /**
   * @description name of block
   */
  name: string,
  /**
   * @description unique identification of block on page
   */
  id: string,
  /**
   * @description says on what breakpoints is component visible
   */
  displayOn: string,
  /**
   * @description what theme is used for this block
   */
  theme: string,
}

Použití

import React, { useContext } from 'react' 
import { BlockMetaContext } from '@siteone/pagebuilder-core'

function ButtonContainer () {
  const blockMeta = useContext(BlockMetaContext)
  const dispatch = useDispatch()

  const handleClick = () => {
    dispatch({
      type: '@@analytics/BUTTON_CLICK',
      payload: {
        action: 'click',
        block: blockMeta.name,
        theme: blockMeta.theme,
        // some other stuff
      },
    })

    function() { console.log('do some other magic') }
  }

  return <button onClick={handleClick}>awesome button</button>
}