( function ( blocks, element, blockEditor, components ) {
const el = element.createElement,
Fragment = element.Fragment,
InspectorControls = blockEditor.InspectorControls,
TextControl = components.TextControl,
useBlockProps = blockEditor.useBlockProps,
RichText = blockEditor.RichText;
blocks.registerBlockType( 'stx-selectable-spl/selectable-spl', {
title: 'STX selectable spl',
icon: 'smiley',
category: 'design',
description: 'Selectable Paragraph or Span or Label tag',
attributes: {
wrapper: { type: 'string', default: 'p' },
lblfor: { type: 'string', default: '' },
content: { type: 'array', source: 'children', selector: 'p,span,label' },
anchor: { type: 'string' },
},
supports: {
anchor: true,
},
edit: function( props ) {
let blockProps = useBlockProps(),
{ wrapper, lblfor, content } = props.attributes,
elem = {
tagName: wrapper,
className: props.className,
onChange: ( newContent ) => { props.setAttributes( { content: newContent } ) },
value: content
};
if ( 'label' === wrapper ) {
elem['htmlFor'] = lblfor;
}
return(
el(
Fragment,
null,
el(
InspectorControls,
null,
el( 'div', { id: 'stx_iddiv_sdbr', style: { fontSize: '1.3em' } },
el(
SelectControl,
{
label: 'Select Tag',
value: wrapper,
options: [
{ value: 'p', label: 'p' },
{ value: 'span', label: 'span' },
{ value: 'label', label: 'label' }
],
onChange: function( newValue ){ props.setAttributes( { wrapper: newValue } ); }
}
),
el(
TextControl,
{
label: 'lable タグの for 属性',
value: lblfor,
onChange: function( newValue ){ props.setAttributes( { lblfor: newValue } ); }
}
),
),
),
el( RichText, Object.assign( blockProps, elem ) )
)
);
},
save: function( props ) {
let { wrapper, lblfor, content } = props.attributes,
elem = { tagName: wrapper, className: props.className, value: content },
blockProps = useBlockProps.save();
if ( props.attributes.anchor ) {
blockProps.id = props.attributes.anchor;
}
if ( 'label' === wrapper ) {
elem['htmlFor'] = lblfor;
}
return el( RichText.Content, Object.assign( blockProps, elem ) );
},
});
}(
window.wp.blocks,
window.wp.element,
window.wp.blockEditor,
window.wp.components,
) );