Saving custom CMS block from frontend in Magento 2

In this blog, we will learn about saving Custom CMS block at the admin end. We already know how to create the same using the setup/patch, you can check the same at https://webkul.com/blog/create-cms-block-installer-magento-2/. In this way, we need to run Magento commands to register the same, to overcome the same we can do the same task by using the CMS model i.e. “Magento\Cms\Model\BlockFactory”.
In this model, we can use the function save() to add the cms block programmatically.

Let’s check the code on how to do the same:

First, we will create a module in which we will create a controller to save the CMS block for that we require data to submit for that we will create a form by using the phtml file.

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_CmsBlockSave
 * @author    Webkul
 * @copyright Copyright (c)  Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
?>
<div>
    <form method="post" action="<?= $block->escapeUrl($block->getUrl('cmsblocksave/block/save')); ?>" 
        enctype="multipart/form-data" data-mage-init='{"validation":{}}' id="wk-mpzcv-form">
        <fieldset class="fieldset">
            <?= $block->escapeHtml($block->getFormKeyBlockHtml()); ?>
            <legend class="legend">
                <span><?= $block->escapeHtml(__("CMS Block")); ?></span>
                <button class="button wk-mp-btn" type="submit">
                    <span><span><?= $block->escapeHtml(__("Save CMS Block")); ?></span></span>
                </button>
            </legend>
            <div class="field required">
                <label for="mpzcv-region" class="label">
                    <span><?= $block->escapeHtml(__("Title")); ?></span>
                </label>
                <div class="control">
                    <input type="text" class="input-text required-entry validate-no-html-tags" 
                        title="<?= $block->escapeHtml(__('Title')); ?>" name="title" 
                        id="mpzcv-region" aria-required="true">
                </div>
            </div>
            <div class="field required">
                <label for="mpzcv-region" class="label">
                    <span><?= $block->escapeHtml(__("identifier")); ?></span>
                </label>
                <div class="control">
                    <input type="text" class="input-text required-entry validate-no-html-tags" 
                        title="<?= $block->escapeHtml(__('identifier')); ?>" name="identifier" 
                        id="mpzcv-region" aria-required="true">
                </div>
            </div>
            <div class="field required">
                <label for="mpzcv-zipcodes" class="label">
                    <span><?= $block->escapeHtml(__("is_active")); ?></span>
                </label>
                <div class="control">
                    <select name="is_active" class="required-entry">
                        <option value="1">
                            <?= $block->escapeHtml(__("Enable")); ?>
                        </option>
                        <option value="0">
                            <?= $block->escapeHtml(__('Disable')); ?>
                        </option>
                    </select>
                </div>
            </div>
            <div class="field required">
                <label for="mpzcv-zipcodes" class="label">
                    <span><?= $block->escapeHtml(__("is_active")); ?></span>
                </label>
                <div class="control">
                    <select multiple = "multiple" name="is_active" class="required-entry">
                        <option value="0">All Store Views
                            </option>
                        <option value="1">Default Store View
                        </option>
                    </select>
                </div>
            </div>
        </fieldset>
    </form>
</div>

Now we will create a controller to render the phtml file. like Controller/Block/Add.php

<?php

/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_CmsBlockSave
 * @author    Webkul
 * @copyright Copyright (c)  Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
namespace Webkul\CmsBlockSave\Controller\Block;

use Magento\Framework\App\Action\Action;

use Magento\Framework\App\Action\Context;

use Magento\Framework\View\Result\PageFactory;

use Magento\Framework\App\RequestInterface;

class Add extends Action

{

/**

* @var \Magento\Customer\Model\Session

*/

protected $_customerSession;

/**

* @var PageFactory

*/

protected $resultPageFactory;

/**

* @var \Magento\Customer\Model\Url

*/

protected $url;

/**

* @param Context $context

* @param PageFactory $resultPageFactory

* @param \Magento\Customer\Model\Session $customerSession

* @param \Magento\Customer\Model\Url $url

*/

public function __construct(

Context $context,

PageFactory $resultPageFactory,

\Magento\Customer\Model\Session $customerSession,

\Magento\Customer\Model\Url $url,

) {

$this->_customerSession = $customerSession;

$this->resultPageFactory = $resultPageFactory;

$this->url = $url;

parent::__construct($context);

}

/**

* Add Store Page

*

* @return \Magento\Framework\View\Result\Page

*/

public function execute()

{

/** @var \Magento\Framework\View\Result\Page $resultPage */

$resultPage = $this->resultPageFactory->create();

$resultPage->getConfig()->getTitle()->set(__('Add Cms Block'));

return $resultPage;

}

}

to hit the controller we have to create a layout file: cmsblocksave_block_add.xml

<?xml version="1.0"?>
<!--
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_CmsBlockSave
 * @author    Webkul
 * @copyright Copyright (c)  Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Webkul\CmsBlockSave\Block\Cms\Add" name="cmsblocksave_block_add" template="Webkul_CmsBlockSave::add.phtml" cacheable="false"/>
        </referenceContainer>
    </body>
</page>

A form will be like mentioned below:

By this code, we will be able to show the form to save the custom CMS block at the admin end.

Now we will check the code to save the cms block mentioned below

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_CmsBlockSave
 * @author    Webkul
 * @copyright Copyright (c)  Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
namespace Webkul\CmsBlockSave\Controller\Block;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Cms\Model\BlockFactory;

/**
 * Save CMS block action.
 */
class Save extends Action
{
    /**
     * @var DataPersistorInterface
     */
    protected $resultPageFactory;

    /**
     * @var BlockFactory
     */
    private $blockFactory;

    /**
     * @var BlockRepositoryInterface
     */
    private $coreRegistry;
    private $jsonFactory;

    /**
     * @param Context $context
     * @param Registry $coreRegistry
     * @param DataPersistorInterface $dataPersistor
     * @param BlockFactory|null $blockFactory
     * @param BlockRepositoryInterface|null $blockRepository
     */
    public function __construct(
        Context $context,
        PageFactory $resultPageFactory,
        \Magento\Framework\Registry $coreRegistry,
        \Magento\Framework\Controller\Result\JsonFactory $jsonFactory,
        BlockFactory $blockFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        $this->coreRegistry = $coreRegistry;
        $this->jsonFactory = $jsonFactory;
        $this->blockFactory = $blockFactory;
        parent::__construct($context);
    }

    /**
     * Save action
     *
     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        $testBlock = $this->getRequest()->getPostValue();
        $this->blockFactory->create()->setData($testBlock)->save();
        $returnData = ['status' => true, 'data' => $testBlock];
        return $this->resultRedirectFactory->create()->setPath(
            'cmsblocksave/block/add',
            ['_secure' => $this->getRequest()->isSecure()]
        );

        return $this->jsonFactory->create()->setData($returnData);
    }
}

The output will be.

That’s all for this blog 🙂