[wpBeter create a custom gutenberg container block and create reusable group of blocks] #wordpress

readme.md

The goal is to create a reusable block that would replace the header... and that reusable blocks(grouped together) must be take full width of the viewport( even if it is inside a fixed width container).

When the group of blocks are there, the header should be hidden.

script.js - for hiding the header title if our custom block group is existing

my-block.js - contains plugin scripts plugin.php - plugin stuff that are required

css- just custom css for the blocks group that will work for wpBeter

steps:

create a folder of any name in the plugin directory. Then place the plugin.php and the my.block.js inside it. go to your dashboard -> plugins. Find the plugin and activate it. once activated, our custom block will appear in the Gutenberg editor

now import wpb-header-group reusable block... learn how to do it.. the file we need to import is wpb-header-group.json

now we can start just insert our reusable block and the see how it works.

plugin.php

<?php

/**
 * Plugin Name: WP Blocks
 * Version: 1.0.0
 */

function loadMyBlockFiles() {
  wp_enqueue_script(
    'wp-beter-custom-blocks',
    plugin_dir_url(__FILE__) . 'my-block.js',
    array('wp-blocks', 'wp-i18n', 'wp-editor'),
    true
  );
}

add_action('enqueue_block_editor_assets', 'loadMyBlockFiles');

// Load assets for frontend
function loadFrontEndAssets() {

  // Load assets for frontend
  // wp_enqueue_style, wp_enqueue_script;
}
add_action( 'wp_enqueue_scripts', 'loadFrontEndAssets' );


// function process_post() {
//   if ( is_single() || is_page () ) {
//       // process $_POST data here
//       // if (has_block('wpbeter/headline'))
//       // echo '<h1>hsdjkhfdjkshfk</h1>';
//       if ( has_block( 'wpbeter/header' ) ) {
//         //   echo '<h1>mm</h1>';
//       }
//   }
// }
// add_action( 'get_header', 'process_post' );


// HIDE

script.js

var $ = jQuery;

jQuery( document ).ready(function(){



	(function useCustomHeaderBlocksIfAvailable() {
		const customHeaderBlocks =  $('wpb-header-group');

		if( customHeaderBlocks.length ) {
			$('h1.page-banner__title').hide();
			alert('hi');
		}
	})();

})

style.css

.wpb-header-group {
  background: #f3f4f5;
}

.wpb-header-group > .wp-block-group__inner-container {
  max-width: 1100px;
  margin: 0 auto;
  /* clear the float */
  overflow: auto;
}

.wpb-header-group h1 {
  margin: 0 0 var(--standard-margin-bottom);
}

.wpb-header-group .buttons{
  display: flex;
  flex-wrap: wrap;
}

.wpb-header-group .wp-block-button {
  margin: 0 8px 15px 0;
  font-weight: 500;
  background-color: transparent;
}

.wpb-header-group .wp-block-button__link {
    background-color: var(--primary-btn-color);
    border-radius: var(--standard-border-radius);

}

.wpb-header-group .is-style-outline .wp-block-button__link {
    color: #32373c;
    background-color: transparent;
    border: 2px solid;
}



.wpb-header-group .image-wrapper {
  margin: 0 0 var(--standard-margin-bottom);
  max-width: 100%;
  margin-bottom: 1em;
}

.wpb-header-group .image-wrapper > img  {
    margin: 10px 0 var(--standard-margin-bottom) 24px;

}

wpb-header-group.json

{
  "__file": "wp_block",
  "title": "wpb-header-group",
  "content": "<!-- wp:group {\"className\":\"wpb-header-group alignfull\"} -->\n<div class=\"wp-block-group wpb-header-group alignfull\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":1} -->\n<h1>O nze klanten &amp; succesverhalen </h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"className\":\"sub-header\"} -->\n<p class=\"sub-header\"> Al onze klanten zijn tevreden klanten. En succesverhalen waar we trots op zijn </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"right\",\"sizeSlug\":\"large\",\"className\":\"image-wrapper\"} -->\n<div class=\"wp-block-image image-wrapper\"><figure class=\"alignright size-large\"><img src=\"https://i.picsum.photos/id/866/536/354.jpg\" alt=\"\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3> Leuke projecten voor blije klanten </h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p> Bekijk onze meest recente projecten en enkele parels uit het verleden. Ontdek hoe we toegevoegde waarden creëren voor onze klanten en projecten in eigen beheer. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:wp-beter/container {\"className\":\"buttons\"} -->\n<div class=\"wp-block-wp-beter-container buttons\"><!-- wp:button -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https://wpbeter.nl/\">Button  1</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" href=\"https://wordpress.com/\">Btn 2</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:wp-beter/container --></div></div>\n<!-- /wp:group -->"