Core JS Components

Import from @webikon/webentor-core/blocks-components.

import {
  WebentorBlockAppender,
  WebentorButton,
  WebentorTypographyPickerSelect,
} from '@webikon/webentor-core/blocks-components';

WebentorButton

A configurable button settings UI for block editors.

Props:

• attributes, setAttributes, attributeName
• Optional: placement, className, innerClassName, hideVariant, hideSize, hideLink

Usage:

<WebentorButton
  attributes={attributes}
  setAttributes={setAttributes}
  attributeName="button"
/>

Filters:

• webentor.core.button.className
• webentor.core.button.variants
• webentor.core.button.sizes
• webentor.core.button.extensionComponent
• webentor.core.button.output

For an end-to-end example that covers stored data, editor UI, preview behavior, and frontend rendering together, see Extend e-button.

WebentorBlockAppender

Pretty InnerBlocks appender for complex layouts.

<WebentorBlockAppender
  rootClientId={clientId}
  text={__('Add rows', 'webentor')}
/>

WebentorTypographyPickerSelect

Select for Custom Typography.

<WebentorTypographyPickerSelect
  value={attributes.customTypography}
  onChange={(v) => setAttributes({ customTypography: v })}
/>

Feeding options from theme config

Provide keys via filter to match your webentor-config.ts:

import { addFilter } from '@wordpress/hooks';
import { customTypographyKeys } from 'webentor-config';

addFilter('webentor.core.customTypographyKeys', 'theme/typo', () => [
  { key: 'none', name: 'None', value: '', __experimentalHint: 'Inherit' },
  ...customTypographyKeys.map((i) => ({
    key: i.key,
    name: i.key,
    value: i.key,
    __experimentalHint: i.size,
  })),
]);