← Back to Browse
WordPress Posted by

WP创建Block提示词

★ 0.0 (0 reviews)

Act as a senior WordPress Gutenberg block developer and modern WordPress Core contributor.

Convert the provided static HTML element into a fully functional modern WordPress dynamic custom block using the latest @wordpress/create-block architecture and WordPress Interactivity API.

Requirements:

  • Use the latest WordPress block development standards.
  • Use block.json configuration.
  • Use render.php instead of save.js for frontend rendering.
  • Use edit.js for editor functionality and export Edit into index.js.
  • Use editor.scss file for the block styles on the editor.
  • Use @wordpress/scripts structure generated by create-block.
  • Do not generate README.md or package.json.
  • Do not generate frontend CSS or frontend JS unless required by the Interactivity API.
  • Use semantic and production-quality code structure.

Editor Requirements:

  • All texts must be editable directly inside the block using RichText.
  • All images must be editable directly inside the block using MediaUpload.
  • Use true WYSIWYG editing inside the canvas instead of InspectorControls/sidebar fields.
  • Ensure all editable content saves correctly into block attributes.
  • Keep the editor experience visually identical to the frontend preview.
  • Avoid sidebar-based editing unless absolutely necessary.

Dynamic Block Requirements:

  • Use render.php to render frontend markup dynamically.
  • Sanitize and escape all outputs properly using WordPress escaping functions.
  • Use server-side rendering best practices.
  • Make attributes clean and scalable.

Code Quality:

  • Generate complete production-ready code.
  • Follow WordPress Coding Standards.
  • Keep code modular and clean.
  • Use modern ESNext syntax.
  • Avoid unnecessary abstraction.
  • Ensure compatibility with modern WordPress versions.

Output Requirements:

  • Output all required files separately with filenames.
  • Include:
  • block.json
  • index.js
  • edit.js
  • editor.scss
  • render.php
  • view.js
  • any required attribute setup
  • Do not include explanations.
  • Do not include commentary.
  • Output code only.

Description

Act as a senior WordPress Gutenberg block developer and modern WordPress Core contributor. Convert the provided static HTML element into a fully functional modern WordPress dynamic custom block using the latest @wordpress/create-block architecture and WordPress Interactivity API. Requirements: - Use the latest WordPress block development standards. - Use block.json configuration. - Use render.php instead of save.js for frontend rendering. - Use edit.js for editor functionality and export Edit into index.js. - Use editor.scss file for the block styles on the editor. - Use @wordpress/scripts structure generated by create-block. - Do not generate README.md or package.json. - Do not generate frontend CSS or frontend JS unless required by the Interactivity API. - Use semantic and production-quality code structure. Editor Requirements: - All texts must be editable directly inside the block using RichText. - All images must be editable directly inside the block using MediaUpload. - Use true WYSIWYG editing inside the canvas instead of InspectorControls/sidebar fields. - Ensure all editable content saves correctly into block attributes. - Keep the editor experience visually identical to the frontend preview. - Avoid sidebar-based editing unless absolutely necessary. Dynamic Block Requirements: - Use render.php to render frontend markup dynamically. - Sanitize and escape all outputs properly using WordPress escaping functions. - Use server-side rendering best practices. - Make attributes clean and scalable. Code Quality: - Generate complete production-ready code. - Follow WordPress Coding Standards. - Keep code modular and clean. - Use modern ESNext syntax. - Avoid unnecessary abstraction. - Ensure compatibility with modern WordPress versions. Output Requirements: - Output all required files separately with filenames. - Include: - block.json - index.js - edit.js - editor.scss - render.php - view.js - any required attribute setup - Do not include explanations. - Do not include commentary. - Output code only.

Prompt Content

Act as a pro WordPress developer, convert this static HTML element into WordPress dynamic version block, use the latest wordpress create-block script , use render.php instead of save.js, make the texts and images of the block are editable on the admin screen, use the what you see is what you get mode, instead of editing the fields on the sidebar, make sure the texts and images are editable and can be saved correctly, use edit.js and export the Edit to the index.js, don’t need the readme documentation and package.json, don’t need the css and js code for the front-end, no explantion and extra texts: