Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
InspectorControls not appearing
/* global _, wp */
const { __ } = wp.i18n;
const {
registerBlockType,
Editable,
InspectorControls,
MediaUploadButton,
PanelBody,
ToggleControl,
source: {
attr,
children,
},
} = wp.blocks;
registerBlockType( 'wccom-blocks/text-image', {
title: __( 'Wccom: Text with Image' ),
icon: 'index-card',
category: 'layout',
attributes: {
title: {
type: 'array',
source: 'children',
selector: '.text-image__title',
},
description: {
type: 'array',
source: 'children',
selector: '.text-image__description',
},
mediaID: {
type: 'number',
},
mediaURL: {
type: 'string',
source: 'attribute',
selector: 'img',
attribute: 'src',
},
direction: {
type: 'string',
source: 'attribute',
default: 'left',
},
},
edit: props => {
const focusedEditable = props.focus ? props.focus.editable || 'title' : null;
const attributes = props.attributes;
const onChangeTitle = value => {
props.setAttributes( { title: value } );
};
const onFocusTitle = focus => {
props.setFocus( _.extend( {}, focus, { editable: 'title' } ) );
};
const onSelectImage = media => {
props.setAttributes( {
mediaURL: media.url,
mediaID: media.id,
} );
};
const onChangeDescription = value => {
props.setAttributes( { description: value } );
};
const onFocusDescription = focus => {
props.setFocus( _.extend( {}, focus, { editable: 'description' } ) );
};
const toggleDirection = value => {
props.setAttributes( { description: value ? 'right' : 'left' } );
};
return (
props.focus && (
<InspectorControls key="inspector">
<PanelBody title={ __( 'Direction Settings' ) }>
<ToggleControl
label={ __( 'Image on right' ) }
checked={ 'right' === attributes.direction }
onChange={ toggleDirection }
/>
</PanelBody>
</InspectorControls>
),
<div className={ props.className }>
<div className="text-image__container">
<div className="text-image__image-container">
<MediaUploadButton
buttonProps={
{
className: attributes.mediaID
? 'image-button'
: 'components-button button button-large',
}
}
onSelect={ onSelectImage }
type="image"
value={ attributes.mediaID }>
{
attributes.mediaID
? <img src={ attributes.mediaURL } />
: __( 'Upload Image' )
}
</MediaUploadButton>
</div>
<div
className="text-image__content-container"
direction={ attributes.direction }>
<Editable
tagName="h4"
className="text-image__title"
placeholder={ __( 'Write the title…' ) }
value={ attributes.title }
onChange={ onChangeTitle }
focus={ 'title' === focusedEditable }
onFocus={ onFocusTitle }
/>
<Editable
className="text-image__description"
placeholder={ __( 'Write the description…' ) }
value={ attributes.description }
onChange={ onChangeDescription }
focus={ 'description' === focusedEditable }
onFocus={ onFocusDescription }
/>
</div>
</div>
</div>
);
},
save: props => {
const {
className,
attributes: {
title,
description,
mediaURL,
direction,
},
} = props;
return (
<div className={ className }>
<div className="text-image__container">
<div className="text-image__image-container">
{
mediaURL && (
<img className="text-image__image" src={ mediaURL } />
)
}
</div>
<div className="text-image__content-container" direction={ direction }>
<h4 className="text-image__title">
{ title }
</h4>
<div className="text-image__description">
{ description }
</div>
</div>
</div>
</div>
);
},
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment