Merge pull request #114 from jverneaut/113-implement-contentpicker-from-10upblock-components

113 Implement ContentPicker from 10up/block components

Author: jverneaut

__tests__/fixtures/processable/content-picker/expected.js

@@ -0,0 +1,15 @@
+import { useBlockProps } from "@wordpress/block-editor";
+import { ContentPicker } from "@10up/block-components/components/content-picker";
+
+export default ({ attributes, setAttributes }) => {
+  return (
+    <section {...useBlockProps()}>
+      <ContentPicker
+        content={attributes.posts}
+        onPickChange={(posts) => setAttributes({ posts })}
+        contentTypes={["post", "page"]}
+        maxContentItems={5}
+      ></ContentPicker>
+    </section>
+  );
+};

__tests__/fixtures/processable/content-picker/expected.json

@@ -0,0 +1,17 @@
+{
+  "name": "custom/input",
+  "title": "Input",
+  "textdomain": "input",
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "version": "0.1.0",
+  "category": "theme",
+  "example": {},
+  "attributes": {
+    "align": { "type": "string", "default": "full" },
+    "posts": { "type": "array" }
+  },
+  "supports": { "html": false, "align": ["full"] },
+  "editorScript": "file:./index.js",
+  "render": "file:./render.php"
+}

__tests__/fixtures/processable/content-picker/expected.php

@@ -0,0 +1,2 @@
+<section <?php echo get_block_wrapper_attributes(); ?>>
+</section>

__tests__/fixtures/processable/content-picker/input.html

@@ -0,0 +1,7 @@
+<section>
+  <content-picker
+    data-bind="posts"
+    content-types="post page"
+    max-content-items="5"
+  ></content-picker>
+</section>

docs/docs/guides/content-picker.mdx

@@ -0,0 +1,26 @@
+import CodeExample from "@site/src/components/CodeExample";
+
+# Using the ContentPicker component
+
+**HTML To Gutenberg** supports integration with the `ContentPicker` component from [@10up/block-components](https://github.com/10up/block-components) through the custom element `<content-picker>`.
+
+Currently, this component supports [data binding](data-binding.mdx) only to attributes via the `data-bind` attribute (e.g., `data-bind="attributeName"`). Additionally, you can control how many posts can be selected by setting the `max-content-items` attribute.
+
+## Typical Use Case
+
+A common scenario for using this component is to let editors select posts directly within the editor interface, and then render those posts server-side in your block’s `render.php` file using [file overrides](overrides.mdx).
+
+<CodeExample>
+  ```
+  <section>
+    <inspector-controls>
+      <panel-body title="Settings">
+        <content-picker data-bind="posts"></content-picker>
+      </panel-body>
+    </inspector-controls>
+
+    <server-block name="custom/posts-slider"></server-block>
+
+  </section>
+  ```
+</CodeExample>

docs/src/pages/new-live-editor.js

@@ -1,6 +1,6 @@
 {
   "name": "@jverneaut/html-to-gutenberg",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "main": "index.js",
   "engines": {
     "node": ">=20.0.0"

package-lock.json

@@ -18,10 +18,13 @@ export const DATA_BIND_WITH_OPTIONS_ELEMENTS = [
   "toolbar-dropdown-menu",
 ];
 
+export const DATA_BIND_CONTENT_PICKER_ELEMENT = "content-picker";
+
 export const DATA_BIND_NON_RICH_TEXT_ELEMENTS = [
   ...DATA_BIND_INPUT_ELEMENTS,
   ...DATA_BIND_IMAGE_ELEMENTS,
   ...DATA_BIND_CONTROLS_ELEMENTS,
+  DATA_BIND_CONTENT_PICKER_ELEMENT,
 ];
 
 export const DATA_BIND_TYPES = {

package.json

@@ -18,6 +18,7 @@ const defaultBlockData = {
   _hasToolbarButtonImport: false,
   _hasToolbarDropdownMenuImport: false,
   _hasBlockControlsImport: false,
+  _hasContentPickerImport: false,
 
   _hasWordPressComponents: false,
   _hasInspectorControlsImport: false,