Magento 2: Widget only shows one way

Question

I've created a Catalog Products Lists widget to use my own template when the items are displayed on the frontend. When I insert the widget via Content > Widgets > 'Add Widget' and set it to be displayed on a specific page (CMS Home Page) and in the Main Content Area – everything works fine... The products are displayed as I'd like them to be.

Now, if I try to add the same widget via Content > Blocks > 'Add New Block' > 'Insert Widget', the following is added to the CMS Block content:

{{widget type="Mike\ProductList\Block\Catalog\Product\ProductList" title="Widget from CMS Block" category_id="26" template="product/list/productlist.phtml"}}

Unfortunately, my widget isn't being displayed in the CMS Block I created. Any ideas why the widget is displaying fine when added via the Widgets page and not being displayed when added to a CMS Block?

UPDATE: In response to Aaron Allen's suggestion

My current etc/widget.xml file looks like the below:

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget_file.xsd">
<widget 
    id="category_product_list"
    class="Mike\ProductList\Block\Catalog\Product\ProductList"
    is_email_compatible="false"
    placeholder_image="Magento_Widget::placeholder.gif" >
    <label translate="true">Catalog Product List</label>
    <description translate="true">Displays a list of products in a block using my new template</description>
    <parameters>
        <parameter name="title" xsi:type="text" required="true" visible="true">
            <label translate="true">Title (frontend)</label>
        </parameter>
        <parameter name="category_id" xsi:type="block" visible="true" required="true">
            <label translate="true">Category</label>
            <block class="Mike\ProductList\Block\Adminhtml\Catalog\Category\Widget\Chooser">
                <data>
                    <item name="button" xsi:type="array">
                        <item name="open" xsi:type="string">Select Category...</item>
                    </item>
                </data>
            </block>
        </parameter>          
        <parameter name="template" xsi:type="select" required="true" visible="true">
            <label translate="true">Template</label>
            <options>
                <option name="default" value="product/list/mikeProductList.phtml" selected="true">
                    <label translate="true">Product  Template</label>
                </option>
            </options>
        </parameter>
    </parameters>      
</widget>

As you can see, this is telling my widget to use Mike\ProductList\Block\Catalog\Product\ProductList as my class.

<?php

namespace Mike\ProductList\Block\Catalog\Product;

use Magento\Catalog\Block\Product\ListProduct;

class ProductList extends ListProduct {

}

How would I tell the widget to extend Template and implement BlockInterface, if I'm already extending Magento\Catalog\Block\Product\ListProduct to pull in the products?

Do I need to create another class (the one you posted) Magento\Widget\Block\BlockInterface and tell the widget somewhere in the XML to use that too somehow?

Answer 1

Your widget's block class needs to implement the Magento\Widget\Block\BlockInterface interface.

For example:

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class WidgetBlock extends Template implements BlockInterface 
{

}

Answer 2

Here is the reason:

Your code do not work in case 2 because when insert widget into block. It will be passed to a filter (Magento\Widget\Model\Template\Filter)

# module-widget\Model\Template\Filter
$widget = $this->_layout->createBlock($type, $name, ['data' => $params])
if(!$widget instanceof \Magento\Widget\Block\BlockInterface) {
   return ''; # This is why you get nothing 
}

In case 1 it shows template because when you create a widget and attach to a page. That widget is a block of that page and so no filter happen.

Here is the solution:

Position of ProductList.php file:

Content of Widget in block (Backend):

Code ProductList.php:

# app/code/Cookiecode/WidgetBlock/Block/Widget/ProductList.php
namespace Cookiecode\WidgetBlock\Block\Widget;

use Magento\Catalog\Api\CategoryRepositoryInterface;
use \Magento\Framework\View\Element\Template as Template;

class ProductList extends \Magento\Catalog\Block\Product\ListProduct implements \Magento\Widget\Block\BlockInterface
{
    public function __construct(
        \Magento\Catalog\Block\Product\Context $context,
        \Magento\Framework\Data\Helper\PostHelper $postDataHelper,
        \Magento\Catalog\Model\Layer\Resolver $layerResolver,
        CategoryRepositoryInterface $categoryRepository,
        \Magento\Framework\Url\Helper\Data $urlHelper,
        array $data = []
    )
    {
        parent::__construct($context, $postDataHelper, $layerResolver, $categoryRepository, $urlHelper, $data);

        $this->setTemplate($data['template']); # widget/default_template.phtml
    }
}

Content of etc/widget.xml:

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget_file.xsd">
    <widget
            id="category_product_list"
            class="Cookiecode\WidgetBlock\Block\Widget\ProductList"
            is_email_compatible="false"
            placeholder_image="Magento_Widget::placeholder.gif" >
        <label translate="true">CookieCode::Catalog Product List</label>
        <description translate="true">Displays a list of products in a block using my new template</description>
        <parameters>
            <parameter name="title" xsi:type="text" required="true" visible="true">
                <label translate="true">Title (frontend)</label>
            </parameter>
            <parameter name="category_id" xsi:type="block" visible="true" required="true">
                <label translate="true">Category</label>
                <block class="Magento\Catalog\Block\Adminhtml\Category\Widget\Chooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Select Category...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter name="template" xsi:type="select" required="true" visible="true">
                <label translate="true">Template</label>
                <options>
                    <option name="default" value="widget/default_template.phtml" selected="true">
                        <label translate="true">Product  Template</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>