feat: dropdown

bin/build-zip.sh

@@ -9,15 +9,15 @@ echo "Generating build directory..."
 rm -rf "$BUILD_PATH"
 mkdir -p "$DEST_PATH"
 
-# echo "Installing PHP and JS dependencies..."
-# npm ci --no-optional
-# composer install || exit "$?"
-# echo "Running JS Build..."
-# npm run build || exit "$?"
-# echo "Generating translations..."
-# npm run i18n || exit "$?"
-# echo "Cleaning up PHP dependencies..."
-# composer install --no-dev || exit "$?"
+echo "Installing PHP and JS dependencies..."
+npm ci --no-optional
+composer install || exit "$?"
+echo "Running JS Build..."
+npm run build || exit "$?"
+echo "Generating translations..."
+npm run i18n || exit "$?"
+echo "Cleaning up PHP dependencies..."
+composer install --no-dev || exit "$?"
 
 echo "Syncing files..."
 rsync -rc --exclude-from="$PROJECT_PATH/.distignore" "$PROJECT_PATH/" "$DEST_PATH/" --delete --delete-excluded

lib/config/block.json

@@ -10,12 +10,16 @@
 	"attributes": {
 		"postId": {
 			"type": "string"
+		},
+		"templatePart": {
+			"type": "string"
 		}
 	},
 	"supports": {
 		"reusable": false,
 		"html": false,
 		"align": true
 	},
-	"editorScript": "wp-block-template-part"
+	"editorScript": "wp-block-template-part",
+	"editorStyle": "file:../../assets/css/block.css"
 }

lib/functions/block.php

@@ -25,6 +25,15 @@ function register_block() {
 		true
 	);
 
+	\wp_localize_script(
+		'wp-block-template-part',
+		'wpbtp',
+		array(
+			'templateParts'       => get_template_parts(),
+			'defaultTemplatePart' => apply_filters( 'wp_block_template_part_default', '' ),
+		)
+	);
+
 	\register_block_type_from_metadata(
 		WP_BLOCK_TEMPLATE_PART_DIR . '/lib/config',
 		array(
@@ -35,6 +44,40 @@ function register_block() {
 }
 \add_action( 'init', __NAMESPACE__ . '\register_block' );
 
+/**
+ * Get template parts
+ *
+ * @return array
+ */
+function get_template_parts() {
+	$files = (array) wp_get_theme()->get_files( 'php', 2, true );
+
+	foreach ( $files as $file => $full_path ) {
+		$file = str_replace( '.php', '', $file );
+
+		// phpcs:ignore WordPress.WP.AlternativeFunctions
+		if ( preg_match( '|Template Part:(.*)$|mi', file_get_contents( $full_path ), $header ) ) {
+			$template_parts[] = array(
+				'name' => _cleanup_header_comment( $header[1] ),
+				'slug' => $file,
+			);
+
+			continue;
+		}
+
+		if ( strpos( $file, 'template-parts/' ) === 0 ) {
+			$template_parts[] = array(
+				'name' => $file,
+				'slug' => $file,
+			);
+		}
+	}
+
+	$template_parts = apply_filters( 'wp_block_template_part_parts', $template_parts, $files );
+
+	return $template_parts;
+}
+
 /**
  * Renders the post template part on the server.
  *
@@ -48,7 +91,13 @@ function render_block_template_part( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$content = get_template_part( $block->context['postId'] );
+	$template_part = $attributes['templatePart'] ?? '';
+
+	if ( ! $template_part ) {
+		$template_part = apply_filters( 'wp_block_template_part_default', '' );
+	}
+
+	$content = get_template_part( $block->context['postId'], $template_part );
 
 	\wp_reset_postdata();
 

lib/functions/rest-api.php

@@ -27,6 +27,16 @@ function rest_api_post_fields() {
 			'schema'       => null,
 		)
 	);
+
+	\register_rest_route(
+		'wpbtp/v1',
+		'/parts/(?P<id>\d+)',
+		array(
+			'methods'             => \WP_REST_Server::READABLE,
+			'callback'            => __NAMESPACE__ . '\rest_route_template_parts_part',
+			'permission_callback' => __NAMESPACE__ . '\rest_route_template_parts_permissions_check',
+		)
+	);
 }
 \add_action( 'rest_api_init', __NAMESPACE__ . '\rest_api_post_fields' );
 
@@ -39,3 +49,46 @@ function rest_api_post_fields() {
 function rest_field_template_part( $object ) {
 	return get_template_part( $object['id'] );
 }
+
+/**
+ * Get specific template part
+ *
+ * @param WP_REST_Request $request The request.
+ * @return array
+ */
+function rest_route_template_parts_part( $request ) {
+	$template_part = $request->get_param( 'template_part' );
+	$object_id     = $request->get_param( 'id' );
+
+	$content = '';
+	$post    = \get_post( $object_id );
+
+	ob_start();
+
+	\get_template_part( str_replace( '.php', '', $template_part ) );
+
+	$has_template_part = ob_get_clean();
+
+	if ( $has_template_part ) {
+		$content = $has_template_part;
+	}
+
+	return rest_ensure_response( $content );
+}
+
+/**
+ * Permissions check template parts
+ *
+ * @return boolean
+ */
+function rest_route_template_parts_permissions_check() {
+	if ( ! current_user_can( 'edit_posts' ) ) {
+		return new \WP_Error(
+			'rest_forbidden',
+			esc_html__( 'Sorry, you are not allowed to do that.', 'wp-block-template-part' ),
+			array( 'status' => rest_authorization_required_code() )
+		);
+	}
+
+	return true;
+}

lib/functions/template.php

@@ -15,18 +15,18 @@
  * Helper function to get template part for a given post
  *
  * @param  int|WP_Post $post Post to get template part for.
+ * @param  string      $template_part Default template part.
  * @return string
  */
-function get_template_part( $post ) {
+function get_template_part( $post, $template_part = '' ) {
 	$content = '';
 	$post    = \get_post( $post );
 
+	$template_part = $template_part ?: 'template-parts/content-' . $post->post_type;
+
 	ob_start();
 
-	\get_template_part(
-		\apply_filters( 'wp_block_template_part', 'template-parts/content-' . $post->post_type, $post ),
-		\get_post_format( $post )
-	);
+	\get_template_part( \apply_filters( 'wp_block_template_part', str_replace( '.php', '', $template_part ), $post ) );
 
 	$has_template_part = ob_get_clean();
 

package.json

@@ -40,6 +40,7 @@
     "babel-preset-env": "^1.7.0",
     "browser-sync": "^2.26.3",
     "browser-sync-webpack-plugin": "2.3.0",
+    "classnames": "^2.3.1",
     "copy-webpack-plugin": "^6.0.0",
     "core-js": "^3.12.1",
     "cross-env": "^5.2.0",
@@ -58,6 +59,7 @@
     "react": "^17.0.2",
     "resolve-url-loader": "^3.1.3",
     "sass": "^1.32.13",
+    "sass-loader": "^12.1.0",
     "semantic-release-plugin-update-version-in-files": "^1.1.0",
     "stylelint": "^9.9.0",
     "stylelint-config-recommended-scss": "^3.2.0",

resources/js/block.js

@@ -1,9 +1,15 @@
-( function ( blocks, element, blockEditor, coreData ) {
+import TemplatePartEdit from './edit';
+
+( function ( blocks, element, blockEditor, coreData, components, i18n ) {
 	const 
 		RawHTML = element.RawHTML,
 		registerBlockType = blocks.registerBlockType,
 		useBlockProps = blockEditor.useBlockProps,
-		useEntityProp = coreData.useEntityProp;
+		useEntityProp = coreData.useEntityProp,
+		InspectorControls = blockEditor.InspectorControls,
+		SelectControl = components.SelectControl,
+		PanelBody = components.PanelBody,
+		__ = i18n.__;
 
 	const icon = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.8 5.9H6.2C5 5.9 4 6.9 4 8.1v8.7C4 18 5 19 6.2 19h12.6c1.2 0 2.2-1 2.2-2.2V8.1c0-1.2-1-2.2-2.2-2.2zm-13.3 11v-6.1h3.6v6.9H6.2c-.4-.1-.7-.4-.7-.8zm13.3.7h-8.2v-6.9h9v6.1c-.1.5-.4.8-.8.8z"/></svg>
 
@@ -13,25 +19,13 @@
 		icon      : icon,
 		category  : 'design',
 		example   : {},
-		edit      : function ( {attributes, setAttributes, className, focus, id, context: {postId, postType, queryId}} ) {
-			const blockProps = useBlockProps();
-
-			const [
-				meta,
-				setMeta,
-				template_part,
-			] = useEntityProp( 'postType', postType, 'template_part', postId );
-
-			return (
-				<div { ...blockProps }>
-					<RawHTML key="html">{ template_part }</RawHTML>
-				</div>
-			);
-		},
+		edit      : TemplatePartEdit,
 	} );
 } )( 
 	window.wp.blocks,
 	window.wp.element,
 	window.wp.blockEditor,
-	window.wp.coreData
+	window.wp.coreData,
+	window.wp.components,
+	window.wp.i18n
 );