converted main page elements to editor blocks (#13)

bip-pages-activation.php

@@ -44,8 +44,14 @@ function create_functional_page( $title, $content = '' ) {
 
 function create_main_page() {
   $title = __( 'BIP Main Page', 'bip-pages' );
+  $bip_instruction_url = get_permalink( get_bip_instruction_page() );
 
-  $main_page_id = create_functional_page( $title );
+  // Polish only for now
+  ob_start();
+  include( 'boilerplate-text/bip-main-page-pl.php');
+  $content = ob_get_clean();
+
+  $main_page_id = create_functional_page( $title, $content );
 
   if ( !is_wp_error( $main_page_id ) ) {
     set_bip_main_page( $main_page_id );

bip-pages-main-page.php

@@ -1,11 +1,11 @@
 <?php
 namespace BipPages;
 
+/** disabled for now **/
 function add_basic_main_page_data( $content ) {
   $post = get_post();
   if ( $post->ID == get_bip_main_page() ) {
     $options = get_option( Settings\OPTION_NAME );
-    $bip_main_page_content = $content;
     $bip_logo_url = plugin_dir_url( __FILE__ ) . 'assets/bip-logos/bip-full-color-pl_min.png';
     $bip_instruction_url = get_permalink( get_bip_instruction_page() );
 
@@ -16,12 +16,12 @@ function add_basic_main_page_data( $content ) {
 
   return $content;
 }
-add_filter('the_content', __NAMESPACE__ . '\add_basic_main_page_data' );
+// add_filter('the_content', __NAMESPACE__ . '\add_basic_main_page_data' );
 
 function main_page_edit_notice() {
   if ( is_bip_main_page_edit_screen() ) {
     $message = '<p>' . esc_html__( 'You are editing the BIP main page.', 'bip-pages' ) . '</p>' .
-      '<p>' . esc_html__( 'Parts of this page are automatically generated. The text you enter below will be displayed between the automatic BIP header and footer.', 'bip-pages' ) . '</p>';
+      '<p>' . esc_html__( "This page needs to include the BIP logo, your organization's address, a BIP search module, and a link to the instruction page.", 'bip-pages' ) . '</p>';
     echo "<div class='notice is-info is-dismissible'>{$message}</div>";
   }
 }

bip-pages.php

@@ -45,6 +45,7 @@ function include_submodules() {
   include( 'bip-logo-widget.php' );
   include( 'bip-pages-meta-boxes.php' );
   include( 'bip-pages-activation.php' );
+  include( 'blocks/bip-blocks.php' );
 }
 
 function activate() {
@@ -56,8 +57,8 @@ function activate() {
 
   include_submodules();
 
-  create_main_page();
   create_instructions_page();
+  create_main_page(); // includes link to instructions page so needs to go 2nd
 }
 
 function deactivate() {
@@ -126,17 +127,13 @@ function change_bip_template( $single_template ) {
 }
 add_filter('single_template', __NAMESPACE__ . '\change_bip_template');
 
-function add_footer( $content = '', $echo = false ) {
+function add_footer( $content = '' ) {
   $post = get_post();
 
   if ( !is_single() || $post->post_type != 'bip' ) {
     return $content;
   }
 
-  if ( $post->ID == get_bip_main_page() && !$echo ) {
-    return $content;
-  }
-
   $custom = get_post_custom( $post->ID );
 
   if ( !empty( $custom[ "_bip_prepared_by" ] ) && !empty( $custom[ "_bip_prepared_by" ][ 0 ] ) ) {
@@ -164,13 +161,9 @@ function add_footer( $content = '', $echo = false ) {
   );
   $last_modification_tag .= '</time>';
 
-  if ( !$echo ) {
-      ob_start();
-  }
+  ob_start();
   include( __DIR__ . '/templates/bip-page-footer-template.php' );
-  if ( !$echo ) {
-      $content .= ob_get_clean();
-  }
+  $content .= ob_get_clean();
 
   return $content;
 }

blocks/bip-blocks.php

@@ -0,0 +1,23 @@
+<?php
+namespace BipPages;
+defined( 'ABSPATH' ) || exit;
+
+function add_block_category( $categories, $post ) {
+    if ( $post->post_type !== 'bip' ) {
+        return $categories;
+    }
+    return array_merge(
+        $categories,
+        array(
+            array(
+                'slug' => 'bip',
+                'title' => __( 'BIP Pages', 'bip-pages' )
+            ),
+        )
+    );
+}
+add_filter( 'block_categories', __NAMESPACE__ . '\add_block_category', 10, 2 );
+
+include( 'bip-org-info-block.php' );
+include( 'bip-search-block.php' );
+include( 'bip-recently-modified-block.php' );

blocks/bip-org-info-block-editor.css

@@ -0,0 +1,8 @@
+.bip-org-info-placeholder {
+  display: inline-block;
+  background-color: #ccc;
+  width: 150px;
+  margin-left: 0.5em;
+  font-size: 60%;
+  color: #ccc;
+}

blocks/bip-org-info-block.js

@@ -0,0 +1,53 @@
+( function( blocks, i18n, element ) {
+	var el = element.createElement;
+	var __ = i18n.__;
+
+	blocks.registerBlockType( 'bip-pages/org-info', {
+		title: __( 'BIP Org info', 'gutenberg-examples' ),
+		icon: 'id-alt',
+		category: 'bip',
+		example: {},
+    supports: {multiple: false},
+    save: function() { return null; },
+		edit: function() {
+			return el(
+				'address',
+				{ className: 'bip-address' },
+				[
+					el( 'p', {}, [
+						__( 'Address:', 'bip-pages' ),
+						el(
+							'span',
+							{ className: 'bip-org-info-placeholder' },
+							' '
+						)
+					]),
+					el( 'p', {}, [
+						__( 'Editor:', 'bip-pages' ),
+						el(
+							'span',
+							{ className: 'bip-org-info-placeholder' },
+							' '
+						)
+					]),
+					el( 'p', {}, [
+						__( 'E-mail address:', 'bip-pages' ),
+						el(
+							'span',
+							{ className: 'bip-org-info-placeholder' },
+							' '
+						)
+					]),
+					el( 'p', {}, [
+						__( 'Phone number:', 'bip-pages' ),
+						el(
+							'span',
+							{ className: 'bip-org-info-placeholder' },
+							' '
+						)
+					]),
+				]
+			);
+		}
+	} );
+} )( window.wp.blocks, window.wp.i18n, window.wp.element );

blocks/bip-org-info-block.php

@@ -0,0 +1,53 @@
+<?php
+
+defined( 'ABSPATH' ) || exit;
+
+function org_info_register_block() {
+
+	if ( ! function_exists( 'register_block_type' ) ) {
+		// Gutenberg is not active.
+		return;
+	}
+
+	wp_register_script(
+		'bip-org-info-block',
+    plugins_url( 'bip-org-info-block.js', __FILE__ ),
+		array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
+		filemtime( plugin_dir_path( __FILE__ ) . 'bip-org-info-block.js' )
+	);
+
+  wp_register_style(
+  		'bip-org-info-block-editor',
+  		plugins_url( 'bip-org-info-block-editor.css', __FILE__ ),
+  		array( 'wp-edit-blocks' ),
+  		filemtime( plugin_dir_path( __FILE__ ) . 'bip-org-info-block-editor.css' )
+  	);
+
+	register_block_type( 'bip-pages/org-info', array(
+		'editor_script' => 'bip-org-info-block',
+    'editor_style' => 'bip-org-info-block-editor',
+		'render_callback' => 'gutenberg_examples_dynamic_render_callback'
+	) );
+
+  if ( function_exists( 'wp_set_script_translations' ) ) {
+    /**
+     * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
+     * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
+     * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
+     */
+    wp_set_script_translations( 'gutenberg-examples-01', 'gutenberg-examples' );
+  }
+
+}
+add_action( 'init', 'org_info_register_block' );
+
+function gutenberg_examples_dynamic_render_callback( $block_attributes, $content ) {
+		$options = get_option( BipPages\Settings\OPTION_NAME );
+		$bip_logo_url = plugin_dir_url( __FILE__ ) . '../assets/bip-logos/bip-full-color-pl_min.png';
+
+		ob_start();
+		include( __DIR__ . '/../templates/bip-org-info-template.php' );
+		$el = ob_get_clean();
+
+    return $el;
+}

blocks/bip-recently-modified-block.js

@@ -0,0 +1,16 @@
+( function( blocks, i18n, element ) {
+	var el = element.createElement;
+	var __ = i18n.__;
+
+	blocks.registerBlockType( 'bip-pages/recently-modified', {
+		title: __( 'BIP Recently Modified', 'bip-pages' ),
+		icon: 'clock',
+		category: 'bip',
+		example: {},
+    supports: {multiple: false},
+    save: function() { return null; },
+		edit: function() {
+			return el( 'p', {}, 'Recently Modified' );
+		}
+	} );
+} )( window.wp.blocks, window.wp.i18n, window.wp.element );

blocks/bip-recently-modified-block.php

@@ -0,0 +1,43 @@
+<?php
+
+defined( 'ABSPATH' ) || exit;
+
+function recently_modified_register_block() {
+
+	if ( ! function_exists( 'register_block_type' ) ) {
+		// Gutenberg is not active.
+		return;
+	}
+
+	wp_register_script(
+		'bip-recently-modified-block',
+    plugins_url( 'bip-recently-modified-block.js', __FILE__ ),
+		array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
+		filemtime( plugin_dir_path( __FILE__ ) . 'bip-recently-modified-block.js' )
+	);
+
+	register_block_type( 'bip-pages/recently-modified', array(
+		'editor_script' => 'bip-recently-modified-block',
+  //  'editor_style' => 'bip-org-info-block-editor',
+		'render_callback' => 'recently_modified_dynamic_render_callback'
+	) );
+
+  if ( function_exists( 'wp_set_script_translations' ) ) {
+    /**
+     * May be extended to wp_set_script_translations( 'my-handle', 'my-domain',
+     * plugin_dir_path( MY_PLUGIN ) . 'languages' ) ). For details see
+     * https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/
+     */
+    wp_set_script_translations( 'gutenberg-examples-01', 'gutenberg-examples' );
+  }
+
+}
+add_action( 'init', 'recently_modified_register_block' );
+
+function recently_modified_dynamic_render_callback( $block_attributes, $content ) {
+		ob_start();
+		include( __DIR__ . '/../templates/bip-recently-modified-template.php' );
+		$el = ob_get_clean();
+
+    return $el;
+}

blocks/bip-search-block-editor.css

@@ -0,0 +1,13 @@
+form.bip-search {
+  margin: 1em 0;
+}
+
+form.bip-search label {
+  width: 80%;
+  float: left;
+  margin-right: 0.5em;
+}
+
+form.bip-search input[type=search] {
+  width: 100%;
+}

blocks/bip-search-block.js

@@ -0,0 +1,24 @@
+( function( blocks, i18n, element ) {
+	var el = element.createElement;
+	var __ = i18n.__;
+
+	blocks.registerBlockType( 'bip-pages/search', {
+		title: __( 'BIP Search', 'bip-pages' ),
+		icon: 'search',
+		category: 'bip',
+		example: {},
+    save: function() { return null; },
+		edit: function() {
+			return el(
+				'form',
+				{className: 'bip-search'},
+				[
+          el( 'label', {}, [
+            el( 'input', {type: 'search', placeholder: __('Search BIP pages…', 'placeholder', 'bip-pages'), disabled: 'disabled' } ),
+          ]),
+          el( 'input', {type: 'submit', value: __( 'Search', 'submit button', 'bip-pages' ), disabled: 'disabled' } )
+        ]
+			);
+		}
+	} );
+} )( window.wp.blocks, window.wp.i18n, window.wp.element );