diff --git a/mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/block.json b/mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/block.json new file mode 100644 index 0000000000..606c36c0d5 --- /dev/null +++ b/mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/block.json @@ -0,0 +1,25 @@ +{ + "name": "mailpoet/powered-by-mailpoet", + "version": "1.0.0", + "title": "Powered By MailPoet", + "description": "A MailPoet logo will appear in the footer of all emails sent with the free version of MailPoet.", + "category": "mailpoet", + "keywords": ["MailPoet"], + "textdomain": "mailpoet", + "supports": { + "align": false, + "html": false, + "multiple": false, + "reusable": false, + "inserter": false, + "lock": false + }, + "apiVersion": 2, + "$schema": "https://schemas.wp.org/trunk/block.json", + "attributes": { + "logo": { + "type": "string", + "default": "default" + } + } +} diff --git a/mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/block.tsx b/mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/block.tsx new file mode 100644 index 0000000000..827baae420 --- /dev/null +++ b/mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/block.tsx @@ -0,0 +1,96 @@ +import { registerBlockType } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; +import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; +import { PanelBody, RadioControl, Icon } from '@wordpress/components'; +import metadata from './block.json'; +import MailPoetIcon from './mailpoet-icon'; + +const getCdnUrl = () => window.mailpoet_cdn_url; +const getPremiumPluginStatus = () => window.mailpoet_premium_active; + +function LogoImage({ + logoSrc, + style = {}, +}: { + logoSrc: string; + style?: React.CSSProperties; +}): JSX.Element { + return ( + Powered by MailPoet + ); +} + +function Edit({ + attributes, + setAttributes, +}: { + attributes: { logo: string }; + setAttributes: (value: { logo: string }) => void; +}): JSX.Element { + const blockProps = useBlockProps(); + + const cdnUrl = getCdnUrl(); + const isPremiumPluginActive = getPremiumPluginStatus(); + + if (isPremiumPluginActive) { + return null; + } + const selectedLogo = attributes?.logo ?? 'default'; + return ( +
+
+ +
+ + + + ) as unknown as string, + value: 'default', + }, + { + label: ( + + ) as unknown as string, + value: 'light', + }, + { + label: ( + + ) as unknown as string, + value: 'dark', + }, + ]} + onChange={(value) => { + setAttributes({ + logo: value, + }); + }} + /> + + +
+ ); +} + +// @ts-expect-error TS2322 Different types +registerBlockType(metadata, { + icon: { + src: , + }, + edit: Edit, +}); diff --git a/mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/mailpoet-icon.tsx b/mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/mailpoet-icon.tsx new file mode 100644 index 0000000000..4c65f4277f --- /dev/null +++ b/mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/mailpoet-icon.tsx @@ -0,0 +1,16 @@ +import { SVG } from '@wordpress/components'; + +function MailPoetIcon(): JSX.Element { + return ( + + + + + + ); +} + +export default MailPoetIcon; diff --git a/mailpoet/lib/AdminPages/Pages/EmailEditor.php b/mailpoet/lib/AdminPages/Pages/EmailEditor.php index da7df7e7eb..ddceebe902 100644 --- a/mailpoet/lib/AdminPages/Pages/EmailEditor.php +++ b/mailpoet/lib/AdminPages/Pages/EmailEditor.php @@ -98,6 +98,7 @@ class EmailEditor { // Renders additional script data that some components require e.g. PremiumModal. This is done here instead of using // PageRenderer since that introduces other dependencies we want to avoid. Used by getUpgradeInfo. + // some of these values are used by the powered by mailpoet block: mailpoet/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/ $installer = new Installer(Installer::PREMIUM_PLUGIN_SLUG); $inline_script_data = [ 'mailpoet_premium_plugin_installed' => Installer::isPluginInstalled(Installer::PREMIUM_PLUGIN_SLUG), @@ -117,6 +118,7 @@ class EmailEditor { 'mailpoet_display_nps_poll' => true, 'mailpoet_current_wp_user' => $this->wp->wpGetCurrentUser()->to_array(), 'mailpoet_current_wp_user_firstname' => $this->wp->wpGetCurrentUser()->user_firstname, + 'mailpoet_cdn_url' => $this->cdnAssetUrl->generateCdnUrl(""), 'mailpoet_site_url' => $this->wp->siteUrl(), ]; $this->wp->wpAddInlineScript('mailpoet_email_editor', implode('', array_map(function ($key) use ($inline_script_data) { diff --git a/mailpoet/lib/EmailEditor/Integrations/MailPoet/Blocks/BlockTypes/AbstractBlock.php b/mailpoet/lib/EmailEditor/Integrations/MailPoet/Blocks/BlockTypes/AbstractBlock.php index bc9794e538..5910b84972 100644 --- a/mailpoet/lib/EmailEditor/Integrations/MailPoet/Blocks/BlockTypes/AbstractBlock.php +++ b/mailpoet/lib/EmailEditor/Integrations/MailPoet/Blocks/BlockTypes/AbstractBlock.php @@ -50,7 +50,7 @@ abstract class AbstractBlock { if (\WP_Block_Type_Registry::get_instance()->is_registered($this->getBlockType())) { return; } - $metadata_path = Env::$assetsPath . '/js/src/email-editor/blocks/' . $this->blockName . '/block.json'; + $metadata_path = Env::$assetsPath . '/js/src/mailpoet-custom-email-editor-blocks/' . $this->blockName . '/block.json'; $block_settings = [ 'render_callback' => [$this, 'render'], 'editor_script' => $this->getEditorScript('handle'), diff --git a/mailpoet/webpack.config.js b/mailpoet/webpack.config.js index 70d85d94ee..9c9b54f128 100644 --- a/mailpoet/webpack.config.js +++ b/mailpoet/webpack.config.js @@ -458,7 +458,7 @@ const emailEditorBlocks = Object.assign({}, wpScriptConfig, { name: 'email-editor-blocks', entry: { 'powered-by-mailpoet-block': - '../packages/js/email-editor/src/blocks/powered-by-mailpoet/block.tsx', + '/assets/js/src/mailpoet-custom-email-editor-blocks/powered-by-mailpoet/block.tsx', }, output: { filename: '[name].js', diff --git a/packages/js/email-editor/src/blocks/powered-by-mailpoet/block.json b/packages/js/email-editor/src/blocks/powered-by-mailpoet/block.json deleted file mode 100644 index 41dc1f473a..0000000000 --- a/packages/js/email-editor/src/blocks/powered-by-mailpoet/block.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "mailpoet/powered-by-mailpoet", - "version": "1.0.0", - "title": "Powered By MailPoet", - "description": "A MailPoet logo will appear in the footer of all emails sent with the free version of MailPoet.", - "category": "mailpoet", - "keywords": [ "MailPoet" ], - "textdomain": "mailpoet", - "supports": { - "align": false, - "html": false, - "multiple": false, - "reusable": false, - "inserter": false, - "lock": false - }, - "apiVersion": 2, - "$schema": "https://schemas.wp.org/trunk/block.json", - "attributes": { - "logo": { - "type": "string", - "default": "default" - } - } -} diff --git a/packages/js/email-editor/src/blocks/powered-by-mailpoet/block.tsx b/packages/js/email-editor/src/blocks/powered-by-mailpoet/block.tsx deleted file mode 100644 index 2ced993237..0000000000 --- a/packages/js/email-editor/src/blocks/powered-by-mailpoet/block.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { registerBlockType } from '@wordpress/blocks'; -import { __ } from '@wordpress/i18n'; -import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; -import { PanelBody, RadioControl, Icon } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; -import metadata from './block.json'; -import { storeName } from '../../engine/store'; -import MailPoetIcon from './mailpoet-icon'; - -function LogoImage( { - logoSrc, - style = {}, -}: { - logoSrc: string; - style?: React.CSSProperties; -} ): JSX.Element { - return ( - Powered by MailPoet - ); -} - -function Edit( { - attributes, - setAttributes, -}: { - attributes: { logo: string }; - setAttributes: ( value: { logo: string } ) => void; -} ): JSX.Element { - const blockProps = useBlockProps(); - const { cdnUrl, isPremiumPluginActive } = useSelect( - ( select ) => ( { - cdnUrl: select( storeName ).getCdnUrl(), - isPremiumPluginActive: select( storeName ).isPremiumPluginActive(), - } ), - [] - ); - if ( isPremiumPluginActive ) { - return null; - } - const selectedLogo = attributes?.logo ?? 'default'; - return ( -
-
- -
- - - - ) as unknown as string, - value: 'default', - }, - { - label: ( - - ) as unknown as string, - value: 'light', - }, - { - label: ( - - ) as unknown as string, - value: 'dark', - }, - ] } - onChange={ ( value ) => { - setAttributes( { - logo: value, - } ); - } } - /> - - -
- ); -} - -// @ts-expect-error TS2322 Different types -registerBlockType( metadata, { - icon: { - src: , - }, - edit: Edit, -} ); diff --git a/packages/js/email-editor/src/blocks/powered-by-mailpoet/mailpoet-icon.tsx b/packages/js/email-editor/src/blocks/powered-by-mailpoet/mailpoet-icon.tsx deleted file mode 100644 index c23bb157a3..0000000000 --- a/packages/js/email-editor/src/blocks/powered-by-mailpoet/mailpoet-icon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { SVG } from '@wordpress/components'; - -function MailPoetIcon(): JSX.Element { - return ( - - - - - - ); -} - -export default MailPoetIcon;