/home/smartbloks/.trash/extendify/src/Library/blocks/library/block.js
import { registerBlockType } from '@wordpress/blocks'
import { useDispatch } from '@wordpress/data'
import { useEffect } from '@wordpress/element'
import { __, _x, sprintf } from '@wordpress/i18n'
import {
Icon,
gallery,
postAuthor,
mapMarker,
button,
cover,
overlayText,
} from '@wordpress/icons'
import { brandBlockIcon } from '@library/components/icons'
import { setModalVisibility } from '@library/util/general'
import metadata from './block.json'
export const openModal = (source) => setModalVisibility(source, 'open')
registerBlockType(metadata, {
icon: brandBlockIcon,
category: 'extendify',
example: {
attributes: {
preview: window.extendifyData.asset_path + '/preview.png',
},
},
variations: [
{
name: 'gallery',
icon: <Icon icon={gallery} />,
category: 'extendify',
attributes: { search: 'gallery' },
title: __('Gallery Patterns', 'extendify'),
description: __('Add gallery patterns and layouts.', 'extendify'),
keywords: [__('slideshow', 'extendify'), __('images', 'extendify')],
},
{
name: 'team',
icon: <Icon icon={postAuthor} />,
category: 'extendify',
attributes: { search: 'team' },
title: __('Team Patterns', 'extendify'),
description: __('Add team patterns and layouts.', 'extendify'),
keywords: [
_x('crew', 'As in team', 'extendify'),
__('colleagues', 'extendify'),
__('members', 'extendify'),
],
},
{
name: 'hero',
icon: <Icon icon={cover} />,
category: 'extendify',
attributes: { search: 'hero' },
title: _x(
'Hero Patterns',
'Hero being a hero/top section of a webpage',
'extendify',
),
description: __('Add hero patterns and layouts.', 'extendify'),
keywords: [__('heading', 'extendify'), __('headline', 'extendify')],
},
{
name: 'text',
icon: <Icon icon={overlayText} />,
category: 'extendify',
attributes: { search: 'text' },
title: _x(
'Text Patterns',
'Relating to patterns that feature text only',
'extendify',
),
description: __('Add text patterns and layouts.', 'extendify'),
keywords: [__('simple', 'extendify'), __('paragraph', 'extendify')],
},
{
name: 'about',
icon: <Icon icon={mapMarker} />,
category: 'extendify',
attributes: { search: 'about' },
title: _x(
'About Page Patterns',
'Add patterns relating to an about us page',
'extendify',
),
description: __('About patterns and layouts.', 'extendify'),
keywords: [__('who we are', 'extendify'), __('team', 'extendify')],
},
{
name: 'call-to-action',
icon: <Icon icon={button} />,
category: 'extendify',
attributes: { search: 'call-to-action' },
title: __('Call to Action Patterns', 'extendify'),
description: __(
'Add call to action patterns and layouts.',
'extendify',
),
keywords: [
_x('cta', 'Initialism for call to action', 'extendify'),
__('callout', 'extendify'),
__('buttons', 'extendify'),
],
},
],
edit: function Edit({ clientId, attributes }) {
const { removeBlock } = useDispatch('core/block-editor')
useEffect(() => {
if (attributes.preview) {
return
}
if (attributes.search) {
addTermToSearchParams(attributes.search)
}
openModal('library-block')
removeBlock(clientId)
}, [clientId, attributes, removeBlock])
return (
<img
style={{ display: 'block', maxWidth: '100%' }}
src={attributes.preview}
alt={sprintf(
// translators: %s: The name of the plugin, Extendify.
__('%s Pattern Library', 'extendify'),
'Extendify',
)}
/>
)
},
})
const addTermToSearchParams = (term) => {
const params = new URLSearchParams(window.location.search)
params.append('ext-patternType', term)
window.history.replaceState(
null,
null,
window.location.pathname + '?' + params.toString(),
)
}