drupal block module (hide content for Decoupled Preview drupal 11)

if specific content type add hide content css

 To create a Drupal block module that includes a CSS file to set .node__content to display: none;, you will need to follow several steps. This involves creating a custom module, defining a block within that module, and adding a CSS file to the block.

Here's a step-by-step guide to achieve this in Drupal (assuming you are using Drupal 9 or Drupal 8):

Step 1: Create the Module Folder and Files

1. Create a new directory for your module in the modules/custom directory of your Drupal installation. For example, name your module hide_node_content.

2. Inside your hide_node_content directory, create two files:

   • hide_node_content.info.yml
   • hide_node_content.module

3. Create a src/Plugin/Block directory inside your module folder for your block plugin.

Step 2: Define the Module Info File

Add the following content to hide_node_content.info.yml:

name: 'Hide Node Content Block'
type: module
description: 'Provides a block that hides node content.'
core_version_requirement: ^8 || ^9
package: Custom
dependencies:
  - drupal:block

Step 3: Define the Block Plugin

Inside the src/Plugin/Block directory, create a file named HideNodeContentBlock.php. Add the following PHP code:

<?php

namespace Drupal\hide_node_content\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'HideNodeContent' Block.
 *
 * @Block(
 *   id = "hide_node_content_block",
 *   admin_label = @Translation("Hide Node Content Block"),
 *   category = @Translation("Custom"),
 * )
 */
class HideNodeContentBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    return [
      '#markup' => $this->t('Node content is hidden on this page.'),
    ];
  }
  
  /**
   * {@inheritdoc}
   */
  public function getCacheMaxAge() {
    return 0; // Disable caching for this block
  }
}

Step 4: Add CSS File

1. Create a css directory inside your module folder.

2. Inside the css directory, create a file named hide_node_content.css. Add the following CSS:

.node__content {
  display: none;
}

Step 5: Attach the CSS File to the Block

Modify the build() method in your block plugin (HideNodeContentBlock.php) to attach the CSS file:

public function build() {
  return [
    '#markup' => $this->t('Node content is hidden on this page.'),
    '#attached' => [
      'library' => [
        'hide_node_content/hide-node-content-style',
      ],
    ],
  ];
}

Step 6: Define the Library

Create a hide_node_content.libraries.yml file in your module directory and define the CSS library:

hide-node-content-style:
  version: 1.x
  css:
    theme:
      css/hide_node_content.css: {}

Step 7: Install Your Module

1. Go to your Drupal site's Extend page (/admin/modules).
2. Find "Hide Node Content Block" under the Custom category.
3. Enable the module.

Step 8: Place the Block

1. Navigate to the Block layout page (/admin/structure/block).
2. Place the "Hide Node Content Block" in a region of your theme.
3. Configure the block visibility settings as needed.

This should make the .node__content CSS rule take effect wherever the block is visible, setting its display property to none, effectively hiding it.