| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
import { useBlockProps } from '@wordpress/block-editor'; |
| 5 |
import { createBlock, registerBlockType } from '@wordpress/blocks'; |
| 6 |
import { __ } from '@wordpress/i18n'; |
| 7 |
|
| 8 |
/** |
| 9 |
* Internal dependencies |
| 10 |
*/ |
| 11 |
import { LeafIcon } from '../../content-helper/common/icons/leaf-icon'; |
| 12 |
import json from './block.json'; |
| 13 |
import { ParselyRecommendations } from './components/parsely-recommendations'; |
| 14 |
import { ParselyRecommendationsInspectorControls } from './components/parsely-recommendations-inspector-controls'; |
| 15 |
import './editor.scss'; |
| 16 |
import { RecommendationsAttributes } from './models/RecommendationsAttributes'; |
| 17 |
import { RecommendationsStore } from './recommendations-store'; |
| 18 |
import './style.scss'; |
| 19 |
|
| 20 |
interface ParselyRecommendationsEditProps { |
| 21 |
clientId: string; |
| 22 |
attributes: RecommendationsAttributes; |
| 23 |
setAttributes: ( attr: Partial<RecommendationsAttributes> ) => void |
| 24 |
} |
| 25 |
|
| 26 |
const { name, attributes } = json; |
| 27 |
|
| 28 |
export const ParselyRecommendationsEdit = ( editProps: ParselyRecommendationsEditProps ) => ( |
| 29 |
<div { ...useBlockProps() }> |
| 30 |
<RecommendationsStore clientId={ editProps.clientId }> |
| 31 |
<ParselyRecommendationsInspectorControls { ...editProps } /> |
| 32 |
<ParselyRecommendations { ...editProps.attributes } isEditMode={ true } /> |
| 33 |
</RecommendationsStore> |
| 34 |
</div> |
| 35 |
); |
| 36 |
|
| 37 |
// @ts-ignore |
| 38 |
registerBlockType( name, { |
| 39 |
apiVersion: 3, |
| 40 |
icon: LeafIcon, |
| 41 |
category: 'widgets', |
| 42 |
edit: ParselyRecommendationsEdit, |
| 43 |
example: { |
| 44 |
attributes: { |
| 45 |
preview: true, |
| 46 |
}, |
| 47 |
}, |
| 48 |
attributes: { |
| 49 |
...attributes, |
| 50 |
title: { |
| 51 |
type: 'string', |
| 52 |
default: __( 'Related Content', 'wp-parsely' ), |
| 53 |
}, |
| 54 |
}, |
| 55 |
transforms: { |
| 56 |
from: [ |
| 57 |
{ |
| 58 |
type: 'block', |
| 59 |
blocks: [ 'core/legacy-widget' ], |
| 60 |
// @ts-ignore |
| 61 |
isMatch: ( { idBase, instance } ) => { |
| 62 |
if ( ! instance?.raw ) { |
| 63 |
// Can't transform if raw instance is not shown in REST API. |
| 64 |
return false; |
| 65 |
} |
| 66 |
return idBase === 'Parsely_Recommended_Widget'; |
| 67 |
}, |
| 68 |
// @ts-ignore |
| 69 |
transform: ( { instance } ) => { |
| 70 |
return createBlock( 'wp-parsely/recommendations', { |
| 71 |
name: instance.raw.name, |
| 72 |
} ); |
| 73 |
}, |
| 74 |
}, |
| 75 |
], |
| 76 |
}, |
| 77 |
} ); |
| 78 |
|
