Skip to main content

Programmatically load a node add or edit form in a block : Bhimmu

Programmatically load a node add or edit form in a block : Bhimmu

Programmatically load a node add or edit form

Wondering how to put the node form anywhere else on the site? Learn how to Programmatically load a node add or edit form in a custom block in Drupal 10.

What is a node form

Node is a bundled and fieldable content entity in Drupal Core. You can add fields and store the content that you can render at the front end to show your end user.

Need to programmatically load a node add or edit form

Generally, you can find the node add form at /node/add/nodetype, where node type can be a basic page or article. In some cases, you may want to load the form anywhere else so that it can be part of a wizard to create multi-step forms. 

Here we will learn how to load these forms using a custom block and the EntityTypeManager service.

How to create a custom block

We can load a node form and put the form into a custom block. Later, we will place the block in the desired region in our theme. Create a block plugin in your custom module; you can read more on how to create a custom module in Drupal 10 here, and inject two services, entity_type.manager and form_builder. 

Below is the code to programmatically load a node add or edit form

# web/modules/custom/bhimmu_form1/src/Plugin/Block
namespace Drupal\bhimmu_form1\Plugin\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Form\FormBuilderInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
 * Provides a nodeformblock block.
 *
 * @Block(
 *   id = "bhimmu_form1_nodeformblock",
 *   admin_label = @Translation("NodeFormBlock"),
 *   category = @Translation("Custom"),
 * )
 */
final class NodeformblockBlock extends BlockBase implements ContainerFactoryPluginInterface {
  /**
   * Constructs the plugin instance.
   */
  public function __construct(
    array $configuration,
    $plugin_id,
    $plugin_definition,
    private readonly FormBuilderInterface $formBuilder,
    private readonly EntityTypeManagerInterface $entityTypeManager,
  ) {
    parent::__construct($configuration, $plugin_id, $plugin_definition);
  }
  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition): self {
    return new self(
      $configuration,
      $plugin_id,
      $plugin_definition,
      $container->get('form_builder'),
      $container->get('entity_type.manager'),
    );
  }
  /**
   * {@inheritdoc}
   */
  public function build(): array {
    $nodeType = $this->entityTypeManager->getStorage('node')->create(['type' => 'article']);
    $nodeForm = $this->entityTypeManager
      ->getFormObject('node', 'default')
      ->setEntity($nodeType);
    return $this->formBuilder->getForm($nodeForm);
  }
}
 

Above is the custom block class that will programmatically load a node add or edit form.

  /**
   * {@inheritdoc}
   */
  public function build(): array {
    $nodeType = $this->entityTypeManager->getStorage('node')->create(['type' => 'article']);
    $nodeForm = $this->entityTypeManager
      ->getFormObject('node', 'default')
      ->setEntity($nodeType);
    return $this->formBuilder->getForm($nodeForm);
  }         

First, you need to choose which type of node form you want to load. In this example, we are loading an article content type node form. You can replace the article with your content type's machine name. Then, using the EntityTypeManager service, we get the form object that we can pass to the form builder service. 

Once you are done, go to /admin/structure/block and place the newly created block in the region of your choice. Make sure the module is enabled, clear the cache, and see the result.

You're at the right place if you're studying Drupal. I frequently publish articles and YouTube videos on the newest subjects in Drupal.