PLANET-7306: Move Take Action Boxout block into master-theme (#2183)

* PLANET-7306: Move Take Action Boxout block into master-theme

Ref: https://jira.greenpeace.org/browse/PLANET-7306

Same behavior as the one from the plugin
- Include stylesheet updated with tokens
- Include ImageHoverControls component
- Include ImagePlaceholder component
- Render block when the plugin is disabled

---------

Co-authored-by: Dan Tovbein <dtovbein@gmail.com>

assets/src/block-editor/ImageHoverControls/index.js

@@ -0,0 +1,36 @@
+import {Button} from '@wordpress/components';
+const {__} = wp.i18n;
+
+export const ImageHoverControls = props => {
+  const {
+    onEdit,
+    onRemove,
+    isCompact,
+    isAdd,
+  } = props;
+
+  return <div className="buttons-overlay">
+    { isAdd && <Button
+      onClick={onEdit}
+      icon="plus-alt2"
+      isPrimary
+      className="edit-image"
+    >
+      { __('Add image', 'planet4-blocks-backend') }
+    </Button> }
+
+    { !isAdd && <Button
+      onClick={onEdit}
+      icon="edit"
+      isPrimary
+      className="edit-image"
+    >
+      { !isCompact && __('Edit', 'planet4-blocks-backend') }
+    </Button> }
+    { !isAdd && <Button
+      className="remove-image"
+      onClick={onRemove}
+      icon="trash"
+    /> }
+  </div>;
+};

assets/src/blocks/TakeActionBoxout/ImagePlaceholder.js

@@ -0,0 +1,7 @@
+import {ImagePlaceholderIcon} from '../../block-editor/ImagePlaceholderIcon/ImagePlaceholderIcon';
+
+export const ImagePlaceholder = ({children}) =>
+  <div className="boxout-image-placeholder">
+    <ImagePlaceholderIcon width={20} height={20} fill="#fff" />
+    {children}
+  </div>;

assets/src/blocks/TakeActionBoxout/TakeActionBoxoutBlock.js

@@ -0,0 +1,64 @@
+import {TakeActionBoxoutEditor} from './TakeActionBoxoutEditor.js';
+import {takeActionBoxoutV1} from './deprecated/takeActionBoxoutV1';
+
+const {registerBlockType} = wp.blocks;
+
+const BLOCK_NAME = 'planet4-blocks/take-action-boxout';
+
+export const registerTakeActionBoxoutBlock = () => registerBlockType(BLOCK_NAME, {
+  title: 'Take Action Boxout',
+  icon: 'welcome-widgets-menus',
+  category: 'planet4-blocks',
+  supports: {
+    html: false, // Disable "Edit as HTMl" block option.
+  },
+  // This attributes definition mimics the one in the PHP side.
+  attributes: {
+    take_action_page: {
+      type: 'number',
+    },
+    title: {
+      type: 'string',
+    },
+    excerpt: {
+      type: 'string',
+    },
+    link: {
+      type: 'string',
+    },
+    linkText: {
+      type: 'string',
+    },
+    newTab: {
+      type: 'boolean',
+      default: false,
+    },
+    tag_ids: {
+      type: 'array',
+      default: [],
+    },
+    imageId: {
+      type: 'number',
+      default: '',
+    },
+    imageUrl: {
+      type: 'string',
+      default: '',
+    },
+    imageAlt: {
+      type: 'string',
+      default: '',
+    },
+    stickyOnMobile: {
+      type: 'boolean',
+      default: false,
+    },
+  },
+  edit: TakeActionBoxoutEditor,
+  save() {
+    return null;
+  },
+  deprecated: [
+    takeActionBoxoutV1,
+  ],
+});