217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 | - containing an anchor element per li element into link fields.
5 | export function parseNavigationHtml( html: string ): LinkField[] {
6 | if ( html === '' ) {
7 | return [];
8 | }
9 |
10 | const container = document.createElement( 'ul' );
11 | container.innerHTML = html.trim();
12 | const liElements = container.querySelectorAll( 'li' ).values().toArray();
13 |
14 | const anchors: HTMLAnchorElement[] = liElements
15 | .map( ( element ) => {
16 | const anchorElement = findDeepestChild( element.innerHTML );
17 | if (
18 | anchorElement &&
19 | anchorElement.tagName.toLowerCase() === 'a'
20 | ) {
21 | return anchorElement as HTMLAnchorElement;
22 | }
23 | return undefined;
24 | } )
25 | .filter( ( link ) => !! link );
26 |
27 | return anchors.map( ( anchor ) => {
28 | return newLinkField( anchor.outerHTML, anchor.text, anchor.href );
29 | } );
30 | }
31 |
--------------------------------------------------------------------------------
/src/parser/util.ts:
--------------------------------------------------------------------------------
1 | import { pasteHandler, serialize } from '@wordpress/blocks';
2 |
3 | export function htmlToBlocks( html: string ): string {
4 | const blocks = pasteHandler( {
5 | mode: 'BLOCKS',
6 | HTML: html,
7 | } );
8 | return serialize( blocks );
9 | }
10 |
11 | export function findDeepestChild( html: string ): Element | undefined {
12 | const container = document.createElement( 'div' );
13 | container.innerHTML = html.trim();
14 |
15 | let deepestChild = container as Element;
16 | while ( deepestChild.firstElementChild ) {
17 | if ( ! deepestChild.firstElementChild ) {
18 | break;
19 | } else {
20 | deepestChild = deepestChild.firstElementChild;
21 | }
22 | }
23 |
24 | if ( deepestChild.innerHTML === html ) {
25 | // There are no children.
26 | return undefined;
27 | }
28 | return deepestChild;
29 | }
30 |
--------------------------------------------------------------------------------
/src/plugin/class-engine.php:
--------------------------------------------------------------------------------
1 | value;
50 | if ( isset( $wp_filter[ $hook_name ] ) ) {
51 | foreach ( $wp_filter[ $hook_name ]->callbacks as $callbacks ) {
52 | foreach ( $callbacks as $callback ) {
53 | Ops::handle(
54 | $type,
55 | array(
56 | 'slug' => 'wp_action_' . wp_generate_uuid4(),
57 | 'description' => 'Handler registered via WordPress action',
58 | ),
59 | $callback['function']
60 | );
61 | }
62 | }
63 | }
64 | }
65 | },
66 | PHP_INT_MAX
67 | );
68 | } )();
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/plugin/class-handlers-registry.php:
--------------------------------------------------------------------------------
1 | value ] ) ) {
31 | self::$handlers[ $type->value ] = array();
32 | }
33 |
34 | self::$handlers[ $type->value ][ $identifier['slug'] ] = array(
35 | 'slug' => $identifier['slug'],
36 | 'description' => $identifier['description'],
37 | 'handler' => $handler,
38 | );
39 | }
40 |
41 | /**
42 | * Check if handlers exist for a type
43 | *
44 | * @param SubjectType $type The subject type to check for.
45 | * @return bool True if handlers exist
46 | */
47 | public static function has( SubjectType $type ): bool {
48 | return isset( self::$handlers[ $type->value ] ) && ! empty( self::$handlers[ $type->value ] );
49 | }
50 |
51 | /**
52 | * Check if there is a "compete" i.e., multiple handlers for a type
53 | *
54 | * @param SubjectType $type The subject type to check for.
55 | * @return bool True if handlers exist
56 | */
57 | public static function is_compete( SubjectType $type ): bool {
58 | return isset( self::$handlers[ $type->value ] ) && count( self::$handlers[ $type->value ] ) > 1;
59 | }
60 |
61 | /**
62 | * Execute all handlers for a type
63 | *
64 | * @param SubjectType $type The subject type to handle.
65 | * @param Subject $subject Data to pass to handlers.
66 | * @return void
67 | * @throws Exception If no handler has been registered or user choice hasn't been set when multiples are registered.
68 | */
69 | public static function handle( SubjectType $type, Subject $subject ): void {
70 | if ( ! self::has( $type ) ) {
71 | throw new Exception( sprintf( 'no handler registered for type: %s', esc_html( $type->value ) ) );
72 | }
73 |
74 | if ( self::is_compete( $type ) ) {
75 | $choice = self::get_user_choice( $type );
76 | if ( ! empty( $choice ) ) {
77 | $chosen = self::$handlers[ $type->value ][ $choice ];
78 | } else {
79 | throw new Exception( 'handle() invoked without user choice on compete' );
80 | }
81 | } else {
82 | $chosen = current( self::$handlers[ $type->value ] );
83 | }
84 |
85 | $transformed_post_id = $chosen['handler']( $subject );
86 |
87 | if ( $transformed_post_id ) {
88 | update_post_meta( $transformed_post_id, Transformer::META_KEY_LIBERATED_SOURCE, $subject->id() );
89 | update_post_meta( $subject->id(), Transformer::META_KEY_LIBERATED_OUTPUT, $transformed_post_id );
90 | }
91 | }
92 |
93 | /**
94 | * Set user choice for what transformer to run for a subject type when multiples are registered
95 | *
96 | * @param SubjectType $type The subject type for which choice is to be saved.
97 | * @param string $transformer_slug Identifying slug of the chosen transformer.
98 | * @return void
99 | */
100 | public static function set_user_choice( SubjectType $type, string $transformer_slug ): void {
101 | update_user_meta( get_current_user_id(), self::$user_choice_meta_key_prefix . $type->value, $transformer_slug );
102 | }
103 |
104 | /**
105 | * Retrieves the user choice for what transformer to run for a subject type when multiples are registered
106 | *
107 | * @param SubjectType $type The subject type for which choice is to be retrieved.
108 | * @return string $transformer_slug Identifying slug of the chosen transformer.
109 | */
110 | public static function get_user_choice( SubjectType $type ): string {
111 | return get_user_meta( get_current_user_id(), self::$user_choice_meta_key_prefix . $type->value, true );
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/src/plugin/class-observers-registry.php:
--------------------------------------------------------------------------------
1 | value ] ) ) {
30 | self::$observers[ $type->value ] = array();
31 | }
32 |
33 | self::$observers[ $type->value ][ $identifier['slug'] ] = array(
34 | 'slug' => $identifier['slug'],
35 | 'description' => $identifier['description'],
36 | 'observer' => $observer,
37 | );
38 | }
39 |
40 | /**
41 | * Check if observers exist for a type
42 | *
43 | * @param SubjectType $type The subject type to check for.
44 | * @return bool True if observers exist
45 | */
46 | public static function has( SubjectType $type ): bool {
47 | return isset( self::$observers[ $type->value ] ) && ! empty( self::$observers[ $type->value ] );
48 | }
49 |
50 | /**
51 | * Execute all observers for a type
52 | *
53 | * @param SubjectType $type The subject type to handle.
54 | * @param Subject $subject Data to pass to observers.
55 | * @return void
56 | */
57 | public static function observe( SubjectType $type, Subject $subject ): void {
58 | if ( ! self::has( $type ) ) {
59 | return;
60 | }
61 | foreach ( self::$observers[ $type->value ] as $registered_observer ) {
62 | $registered_observer['observer']( $subject );
63 | }
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/plugin/class-ops.php:
--------------------------------------------------------------------------------
1 | static::$post_type,
49 | 'post_status' => 'publish',
50 | 'posts_per_page' => -1,
51 | // @phpcs:ignore
52 | 'meta_query' => array(
53 | 'key' => 'subject_type',
54 | 'value' => $subject_type->value,
55 | 'compare' => '=',
56 | ),
57 | );
58 | $posts = get_posts( $args );
59 |
60 | return array_map(
61 | fn( WP_Post $post ) => Subject::from_post( $post->ID ),
62 | $posts
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/plugin/class-post-type-ui.php:
--------------------------------------------------------------------------------
1 | post_type = $custom_post_type;
10 |
11 | $this->remove_add_new_option( $this->post_type );
12 |
13 | // Strip editor to be barebones.
14 | add_filter(
15 | 'wp_editor_settings',
16 | function ( $settings, $editor_id ) {
17 | if ( 'content' === $editor_id && get_current_screen()->post_type === $this->post_type ) {
18 | $settings['tinymce'] = false;
19 | $settings['quicktags'] = false;
20 | $settings['media_buttons'] = false;
21 | }
22 |
23 | return $settings;
24 | },
25 | 10,
26 | 2
27 | );
28 |
29 | // CPT screen-specific filters
30 | add_action(
31 | 'admin_head',
32 | function () {
33 | global $pagenow;
34 |
35 | $cpt_screen = false;
36 | if ( 'post-new.php' === $pagenow ) { // New post screen
37 | // @phpcs:ignore WordPress.Security.NonceVerification.Recommended
38 | if ( isset( $_GET['post_type'] ) && $_GET['post_type'] === $this->post_type ) {
39 | $cpt_screen = true;
40 | }
41 | }
42 |
43 | if ( 'post.php' === $pagenow ) { // Edit post screen
44 | // @phpcs:ignore WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.InputNotValidated
45 | $post_type = get_post_type( absint( $_GET['post'] ) );
46 | if ( $post_type === $this->post_type ) {
47 | $cpt_screen = true;
48 | }
49 | }
50 |
51 | // phpcs:ignore Generic.CodeAnalysis.EmptyStatement.DetectedIf
52 | if ( $cpt_screen ) {
53 | // CPT screen-specific filters go here.
54 | }
55 | }
56 | );
57 |
58 | // Disable Block editor.
59 | add_filter(
60 | 'use_block_editor_for_post_type',
61 | function ( $use_block_editor, $post_type ) {
62 | if ( $post_type === $this->post_type ) {
63 | return false;
64 | }
65 |
66 | return $use_block_editor;
67 | },
68 | 10,
69 | 2
70 | );
71 |
72 | // Remove meta boxes.
73 | add_action(
74 | 'add_meta_boxes',
75 | function () {
76 | // Remove default meta boxes
77 | remove_meta_box( 'submitdiv', $this->post_type, 'side' );
78 | remove_meta_box( 'slugdiv', $this->post_type, 'normal' );
79 | /**
80 | * We would need to remove more metaboxes as their support is added to CPTs.
81 | * Leaving code here for reference.
82 | */
83 | // phpcs:ignore Squiz.PHP.CommentedOutCode.Found
84 | // remove_meta_box( 'postexcerpt', $post_type, 'normal' );
85 | // remove_meta_box( 'authordiv', $post_type, 'normal' );
86 | // remove_meta_box( 'categorydiv', $post_type, 'side' );
87 | // remove_meta_box( 'tagsdiv-post_tag', $post_type, 'side' );
88 | // remove_meta_box( 'postimagediv', $post_type, 'side' );
89 | // remove_meta_box( 'revisionsdiv', $post_type, 'normal' );
90 | // remove_meta_box( 'commentstatusdiv', $post_type, 'normal' );
91 | // remove_meta_box( 'commentsdiv', $post_type, 'normal' );
92 | // remove_meta_box( 'trackbacksdiv', $post_type, 'normal' );
93 |
94 | add_meta_box(
95 | 'transformedpost',
96 | 'Transformed To',
97 | function () {
98 | global $post;
99 |
100 | $post_id = $post->ID;
101 | $transformed_post_id = get_post_meta( $post_id, Transformer::META_KEY_LIBERATED_OUTPUT, true );
102 |
103 | if ( $transformed_post_id ) {
104 | echo '
- 43 | 54 | 55 | ); 56 | } ) } 57 |
- 31 | { name }: { selector } 32 | 33 | ); 34 | } 35 | } 36 | 37 | const schema = blueprint ? getSchema( blueprint.type ) : undefined; 38 | return ( 39 | <> 40 | { ! blueprint ? ( 41 | 'Loading...' 42 | ) : ( 43 | <> 44 |
-
38 | u === url ) }
41 | onChange={ () => {
42 | if ( ! selected ) {
43 | return;
44 | }
45 | const isChecked = selected.some( ( u ) => u === url );
46 | if ( isChecked ) {
47 | // It was previously selected, now it becomes not selected.
48 | // So we keep other ones.
49 | setSelected(
50 | selected.filter( ( u ) => u !== url )
51 | );
52 | } else {
53 | setSelected( selected.concat( url ) );
54 | }
55 | } }
56 | />
57 |
Title: { title }
58 |URL: { url }
59 |
60 | );
61 | } );
62 |
63 | return (
64 | <>
65 | - 39 | 46 | 47 | ) ) } 48 |
PostID: ' . esc_html( $transformed_post_id ) . ''; 105 | $preview_link = get_permalink( $transformed_post_id ); 106 | $edit_link = get_edit_post_link( $transformed_post_id ); 107 | ?> 108 |
109 | Preview Post | 110 | Edit Post 111 |
112 | This post hasn't been transformed yet."; 115 | } 116 | }, 117 | $this->post_type, 118 | 'side', 119 | 'default' 120 | ); 121 | }, 122 | 999 123 | ); 124 | } 125 | 126 | public function remove_add_new_option( $post_type ): void { 127 | // Remove "Add New" from sidebar menu. 128 | add_action( 129 | 'admin_menu', 130 | function () use ( $post_type ) { 131 | $menu_slug = 'edit.php?post_type=' . $post_type; 132 | $submenu_slug = 'post-new.php?post_type=' . $post_type; 133 | remove_submenu_page( $menu_slug, $submenu_slug ); 134 | } 135 | ); 136 | 137 | // Remove "Add New" from admin bar menu. 138 | add_action( 139 | 'admin_bar_menu', 140 | function ( $wp_admin_bar ) use ( $post_type ) { 141 | $wp_admin_bar->remove_node( 'new-' . $post_type ); 142 | }, 143 | 999 144 | ); 145 | 146 | // Redirect if you go to "Add New" page directly. 147 | add_action( 148 | 'admin_init', 149 | function () use ( $post_type ) { 150 | global $pagenow; 151 | // @phpcs:ignore WordPress.Security.NonceVerification.Recommended 152 | if ( 'post-new.php' === $pagenow && isset( $_GET['post_type'] ) && $_GET['post_type'] === $post_type ) { 153 | wp_safe_redirect( admin_url( 'edit.php?post_type=' . $post_type ) ); 154 | exit; 155 | } 156 | } 157 | ); 158 | 159 | // Hide "Add New" button next to title on the listing page. 160 | add_action( 161 | 'admin_head', 162 | function () use ( $post_type ) { 163 | $post_type_key = $post_type; 164 | global $pagenow, $post_type; 165 | 166 | if ( 'edit.php' === $pagenow && $post_type === $post_type_key ) { 167 | echo ''; 168 | } 169 | } 170 | ); 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /src/plugin/class-schema.php: -------------------------------------------------------------------------------- 1 | true ) ); 12 | 13 | if ( json_last_error() !== JSON_ERROR_NONE ) { 14 | wp_die( esc_html( 'Failed to parse schema.json - ' . json_last_error_msg() ) ); 15 | } 16 | } 17 | } 18 | 19 | public static function get( $subject_type = null ): ?array { 20 | self::load_schema(); 21 | if ( $subject_type ) { 22 | return self::$schema[ $subject_type ] ?? null; 23 | } 24 | return self::$schema; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/plugin/class-storage.php: -------------------------------------------------------------------------------- 1 | post_type = $post_type; 13 | $this->post_type_name = ucwords( str_replace( '_', ' ', $post_type ) ); 14 | 15 | add_action( 'init', array( $this, 'register_post_types' ) ); 16 | } 17 | 18 | private function get_singular_name(): string { 19 | return $this->post_type_name; 20 | } 21 | 22 | private function get_plural_name(): string { 23 | return $this->post_type_name; 24 | } 25 | 26 | public function register_post_types(): void { 27 | $name = $this->get_singular_name(); 28 | $name_plural = $this->get_plural_name(); 29 | 30 | $args = array( 31 | 'public' => false, 32 | 'exclude_from_search' => true, 33 | 'publicly_queryable' => false, 34 | 'show_in_rest' => true, 35 | 'show_ui' => true, 36 | 'show_in_menu' => WP_DEBUG, 37 | 'menu_icon' => 'dashicons-database', 38 | 'supports' => $this->custom_post_types_supports, 39 | 'labels' => $this->get_post_type_registration_labels( $name, $name_plural ), 40 | 'rest_base' => $this->post_type, 41 | ); 42 | 43 | register_post_type( $this->post_type, $args ); 44 | } 45 | 46 | public function get_post_type_registration_labels( string $name, string $name_plural ): array { 47 | return array( 48 | 'name' => $name_plural, 49 | 'singular_name' => $name, 50 | 'menu_name' => $name_plural, 51 | 'name_admin_bar' => $name, 52 | 53 | // translators: %s: Name of the custom post type in singular form 54 | 'archives' => sprintf( __( '%s Archives', 'try_wordpress' ), ucwords( $name ) ), 55 | 56 | // translators: %s: Name of the custom post type in singular form 57 | 'attributes' => sprintf( __( '%s Attributes', 'try_wordpress' ), ucwords( $name ) ), 58 | 59 | // translators: %s: Name of the custom post type in singular form 60 | 'parent_item_colon' => sprintf( __( 'Parent %s:', 'try_wordpress' ), ucwords( $name ) ), 61 | 62 | // translators: %s: Name of the custom post type in plural form 63 | 'all_items' => sprintf( __( 'All %s', 'try_wordpress' ), ucwords( $name_plural ) ), 64 | 65 | // translators: %s: Name of the custom post type in singular form 66 | 'add_new_item' => sprintf( __( 'Add New %s', 'try_wordpress' ), ucwords( $name ) ), 67 | 'add_new' => __( 'Add New', 'try_wordpress' ), 68 | 69 | // translators: %s: Name of the custom post type in singular form 70 | 'new_item' => sprintf( __( 'New %s', 'try_wordpress' ), ucwords( $name ) ), 71 | 72 | // translators: %s: Name of the custom post type in singular form 73 | 'edit_item' => sprintf( __( 'Edit %s', 'try_wordpress' ), ucwords( $name ) ), 74 | 75 | // translators: %s: Name of the custom post type in singular form 76 | 'update_item' => sprintf( __( 'Update %s', 'try_wordpress' ), ucwords( $name ) ), 77 | 78 | // translators: %s: Name of the custom post type in singular form 79 | 'view_item' => sprintf( __( 'View %s', 'try_wordpress' ), ucwords( $name ) ), 80 | 81 | // translators: %s: Name of the custom post type in plural form 82 | 'view_items' => sprintf( __( 'View %s', 'try_wordpress' ), ucwords( $name_plural ) ), 83 | 84 | // translators: %s: Name of the custom post type in singular form 85 | 'search_items' => sprintf( __( 'Search %s', 'try_wordpress' ), ucwords( $name ) ), 86 | 87 | 'not_found' => __( 'Not found', 'try_wordpress' ), 88 | 'not_found_in_trash' => __( 'Not found in Trash', 'try_wordpress' ), 89 | 90 | // translators: %s: Name of the custom post type in singular form 91 | 'featured_image' => sprintf( __( '%s Image', 'try_wordpress' ), ucwords( $name ) ), 92 | 93 | // translators: %s: Name of the custom post type in lowercase 94 | 'set_featured_image' => sprintf( __( 'Set %s image', 'try_wordpress' ), strtolower( $name ) ), 95 | 96 | // translators: %s: Name of the custom post type in lowercase 97 | 'remove_featured_image' => sprintf( __( 'Remove %s image', 'try_wordpress' ), strtolower( $name ) ), 98 | 99 | // translators: %s: Name of the custom post type in lowercase 100 | 'use_featured_image' => sprintf( __( 'Use as %s image', 'try_wordpress' ), strtolower( $name ) ), 101 | 102 | // translators: %s: Name of the custom post type in lowercase 103 | 'insert_into_item' => sprintf( __( 'Insert into %s', 'try_wordpress' ), strtolower( $name ) ), 104 | 105 | // translators: %s: Name of the custom post type in lowercase 106 | 'uploaded_to_this_item' => sprintf( __( 'Uploaded to this %s', 'try_wordpress' ), strtolower( $name ) ), 107 | 108 | // translators: %s: Name of the custom post type in plural form 109 | 'items_list' => sprintf( __( '%s list', 'try_wordpress' ), ucwords( $name_plural ) ), 110 | 111 | // translators: %s: Name of the custom post type in plural form 112 | 'items_list_navigation' => sprintf( __( '%s list navigation', 'try_wordpress' ), ucwords( $name_plural ) ), 113 | 114 | // translators: %s: Name of the custom post type in lowercase plural form 115 | 'filter_items_list' => sprintf( __( 'Filter %s list', 'try_wordpress' ), strtolower( $name_plural ) ), 116 | ); 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/plugin/class-subject.php: -------------------------------------------------------------------------------- 1 | id = $post->ID; 48 | $this->author_id = $post->post_author; 49 | $this->source_html = $post->post_content_filtered; 50 | $this->source_url = $post->guid; 51 | 52 | $this->type = get_post_meta( $post->ID, 'subject_type', true ); 53 | $this->title = get_post_meta( $post->ID, 'raw_title', true ); 54 | $this->date = get_post_meta( $post->ID, 'raw_date', true ); 55 | $this->content = get_post_meta( $post->ID, 'raw_content', true ); 56 | } 57 | 58 | public function id(): int { 59 | return $this->id; 60 | } 61 | 62 | public function author_id(): int { 63 | return $this->author_id; 64 | } 65 | 66 | public function transformed_post_id(): int { 67 | return absint( get_post_meta( $this->id, Transformer::META_KEY_LIBERATED_OUTPUT, true ) ); 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/plugin/class-transformer.php: -------------------------------------------------------------------------------- 1 | 'try_wordpress', 14 | 'description' => 'Try WordPress handling blog-post natively', 15 | ), 16 | array( 17 | $this, 18 | 'handler', 19 | ) 20 | ); 21 | 22 | Ops::handle( 23 | SubjectType::PAGE, 24 | array( 25 | 'slug' => 'try_wordpress', 26 | 'description' => 'Try WordPress handling page natively', 27 | ), 28 | array( 29 | $this, 30 | 'handler', 31 | ) 32 | ); 33 | } 34 | 35 | public function get_post_type( Subject $subject ): string { 36 | return match ( $subject->type ) { 37 | 'page' => 'page', 38 | default => 'post', 39 | }; 40 | } 41 | 42 | public function handler( Subject $subject ) { 43 | // Since parsed versions come from paste_handler in frontend, look for them in postmeta, instead of subject instance 44 | $title = get_post_meta( $subject->id(), 'parsed_title', true ); 45 | if ( empty( $title ) ) { 46 | $title = '[Title]'; 47 | } 48 | $body = get_post_meta( $subject->id(), 'parsed_content', true ); 49 | if ( empty( $body ) ) { 50 | $body = '[Body]'; 51 | } 52 | 53 | $args = array( 54 | 'post_author' => $subject->author_id(), 55 | 'post_date' => get_post_meta( $subject->id(), 'parsed_date', true ), 56 | 'post_content' => $body, 57 | 'post_title' => $title, 58 | 'post_status' => 'publish', 59 | 'post_type' => $this->get_post_type( $subject ), 60 | ); 61 | 62 | // have we already transformed this subject before? 63 | $transformed_post_id = get_post_meta( $subject->id(), self::META_KEY_LIBERATED_OUTPUT, true ); 64 | if ( ! empty( $transformed_post_id ) ) { 65 | $args['ID'] = $transformed_post_id; 66 | } 67 | 68 | add_filter( 'wp_insert_post_empty_content', '__return_false' ); 69 | $inserted_post_id = wp_insert_post( $args ); 70 | remove_filter( 'wp_insert_post_empty_content', '__return_false' ); 71 | 72 | // @TODO: handle attachments, terms etc in future 73 | // Note: Do not need anything from postmeta. 74 | // We should potentially use another plugin here for this purpose and call its API to do it for us. 75 | 76 | if ( 0 === $inserted_post_id ) { 77 | return null; 78 | } 79 | 80 | return $inserted_post_id; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/plugin/enum-subject-type.php: -------------------------------------------------------------------------------- 1 | value ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/plugin/plugin.php: -------------------------------------------------------------------------------- 1 | 'string', 19 | default => $type, 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /src/storage/config.ts: -------------------------------------------------------------------------------- 1 | export interface Config { 2 | currentPath: string; 3 | } 4 | 5 | export async function setConfig( value: Config ): Promise< void > { 6 | const config = await getConfig(); 7 | let key: keyof Config; 8 | for ( key in value ) { 9 | config[ key ] = value[ key ]; 10 | } 11 | return browser.storage.local.set( { config } ); 12 | } 13 | 14 | export async function getConfig(): Promise< Config > { 15 | const values = await browser.storage.local.get( 'config' ); 16 | if ( ! values || ! values.config ) { 17 | return { currentPath: '/' }; 18 | } 19 | return values.config as Config; 20 | } 21 | -------------------------------------------------------------------------------- /src/storage/session.ts: -------------------------------------------------------------------------------- 1 | export interface Session { 2 | id: string; 3 | url: string; 4 | title: string; 5 | } 6 | 7 | export async function createSession( data: { 8 | url: string; 9 | title: string; 10 | } ): Promise< Session > { 11 | const { url, title } = data; 12 | const session: Session = { 13 | id: Date.now().toString( 16 ), 14 | url, 15 | title, 16 | }; 17 | const values: Record< string, Session > = {}; 18 | values[ key( session.id ) ] = session; 19 | await browser.storage.local.set( values ); 20 | 21 | // We also maintain an array of sessionIds to serve as "index" for when we need to list sessions. 22 | let sessionIds: string[]; 23 | const sessionIdsValues = await browser.storage.local.get( 'sessions' ); 24 | if ( ! sessionIdsValues || ! sessionIdsValues.sessions ) { 25 | sessionIds = []; 26 | } else { 27 | sessionIds = sessionIdsValues.sessions; 28 | } 29 | sessionIds.push( session.id ); 30 | await browser.storage.local.set( { sessions: sessionIds } ); 31 | 32 | return session; 33 | } 34 | 35 | export async function getSession( id: string ): Promise< Session | null > { 36 | const values = await browser.storage.local.get( key( id ) ); 37 | if ( ! values || ! values[ key( id ) ] ) { 38 | return null; 39 | } 40 | return values[ key( id ) ] as Session; 41 | } 42 | 43 | export async function listSessions(): Promise< Session[] > { 44 | let sessionIds = []; 45 | const values = await browser.storage.local.get( 'sessions' ); 46 | if ( values && values.sessions ) { 47 | sessionIds = values.sessions; 48 | } 49 | 50 | const sessions = []; 51 | for ( const sessionId of sessionIds ) { 52 | const session = await getSession( sessionId ); 53 | if ( session ) { 54 | sessions.push( session ); 55 | } 56 | } 57 | 58 | return sessions; 59 | } 60 | 61 | function key( sessionId: string ): string { 62 | return `session-${ sessionId }`; 63 | } 64 | -------------------------------------------------------------------------------- /src/ui/App.tsx: -------------------------------------------------------------------------------- 1 | import { Preview } from '@/ui/preview/Preview'; 2 | import { 3 | createHashRouter, 4 | createRoutesFromElements, 5 | LoaderFunction, 6 | Navigate, 7 | Outlet, 8 | Route, 9 | RouterProvider, 10 | useLocation, 11 | useNavigate, 12 | useRouteLoaderData, 13 | } from 'react-router-dom'; 14 | import { StrictMode, useEffect, useState } from 'react'; 15 | import { NewSession } from '@/ui/session/NewSession'; 16 | import { ViewSession } from '@/ui/session/ViewSession'; 17 | import { Home } from '@/ui/Home'; 18 | import { getConfig, setConfig } from '@/storage/config'; 19 | import { getSession, listSessions, Session } from '@/storage/session'; 20 | import { PlaceholderPreview } from '@/ui/preview/PlaceholderPreview'; 21 | import { SessionContext, SessionProvider } from '@/ui/session/SessionProvider'; 22 | import { ApiClient } from '@/api/ApiClient'; 23 | import { PlaygroundClient } from '@wp-playground/client'; 24 | import { Breadcrumbs } from '@/ui/components/Breadcrumbs'; 25 | import { NewBlueprint } from '@/ui/blueprints/NewBlueprint'; 26 | import { EditBlueprint } from '@/ui/blueprints/EditBlueprint'; 27 | import { SubjectType } from '@/model/Subject'; 28 | import { ImportWithBlueprint } from '@/ui/import/ImportWithBlueprint'; 29 | import { StartPageImport } from '@/ui/import/pages/StartPageImport'; 30 | import { SelectNavigation } from '@/ui/import/pages/SelectNavigation'; 31 | import { SelectPagesFromNavigation } from '@/ui/import/pages/SelectPagesFromNavigation'; 32 | import { ImportPage } from '@/ui/import/pages/ImportPage'; 33 | import { Done } from '@/ui/import/pages/Done'; 34 | 35 | export const Screens = { 36 | home: () => '/start/home', 37 | newSession: () => '/start/new-session', 38 | viewSession: ( sessionId: string ) => `/session/${ sessionId }`, 39 | blueprints: { 40 | new: ( sessionId: string, subjectType: SubjectType ) => 41 | `/session/${ sessionId }/blueprints/new/${ subjectType }`, 42 | edit: ( sessionId: string, postId: string ) => 43 | `/session/${ sessionId }/blueprints/${ postId }`, 44 | }, 45 | importWithBlueprint: ( sessionId: string, blueprintId: string ) => 46 | `/session/${ sessionId }/import-with-blueprint/${ blueprintId }`, 47 | importPagesStart: ( sessionId: string ) => 48 | `/session/${ sessionId }/import-pages/start`, 49 | importPagesSelectNavigation: ( sessionId: string ) => 50 | `/session/${ sessionId }/import-pages/select-navigation`, 51 | importPagesSelectPages: ( sessionId: string ) => 52 | `/session/${ sessionId }/import-pages/select-pages-from-navigation`, 53 | importPagesImportPage: ( sessionId: string, page: number ) => 54 | `/session/${ sessionId }/import-pages/import-page/${ page }`, 55 | importPagesDone: ( sessionId: string ) => 56 | `/session/${ sessionId }/import-pages/done`, 57 | }; 58 | 59 | const homeLoader: LoaderFunction = async () => { 60 | return await listSessions(); 61 | }; 62 | 63 | const sessionLoader: LoaderFunction = async ( { params } ) => { 64 | const sessionId = params.sessionId; 65 | if ( ! sessionId ) { 66 | throw new Response( 'sessionId param is required', { status: 404 } ); 67 | } 68 | const session = await getSession( sessionId ); 69 | if ( ! session ) { 70 | throw new Response( `Session with id ${ sessionId } was not found`, { 71 | status: 404, 72 | } ); 73 | } 74 | return session; 75 | }; 76 | 77 | function Routes( props: { initialScreen: string } ) { 78 | const { initialScreen } = props; 79 | return ( 80 |
175 |
180 |
177 |
179 | { preview }
181 | Try WordPress
12 |13 | Migrate from any site to WordPress. 14 |
15 |Import using this tool, and preview the result immediately.
16 |Continue a previous session:
39 |-
40 | { sessions.map( ( session ) => {
41 | return (
42 |
Or:
59 | 60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /src/ui/app.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Try WordPress extension styles 3 | */ 4 | 5 | /* Variables */ 6 | :root { 7 | --color-base: #fff; 8 | --color-text: #1e1e1e; 9 | --color-contrast: #3857e9; 10 | --color-border: rgba(0, 0, 0, 0.075); 11 | --color-gray-700: #757575; 12 | --color-gray-600: #949494; 13 | --color-gray-100: #f9f9f9; 14 | 15 | --spacing-sm: 0.5rem; 16 | --spacing-md: 1rem; 17 | --spacing-lg: 1.25rem; 18 | --spacing-vl: 2rem; 19 | 20 | --radius-sm: 2px; 21 | 22 | --font-size-xs: 13px; 23 | --font-size-sm: 16px; 24 | --font-size-md: 20px; 25 | --font-size-lg: 24px; 26 | 27 | --col-width: 320px; /* By default the extension opens at 216px wide, setting it to 200px shows the preview peeking in, but is pretty small. */ 28 | } 29 | 30 | * { 31 | box-sizing: border-box; 32 | } 33 | 34 | a { 35 | color: var(--color-contrast); 36 | } 37 | 38 | html, 39 | body { 40 | margin: 0; 41 | padding: 0; 42 | } 43 | 44 | html, 45 | body, 46 | #app { 47 | height: 100%; 48 | } 49 | 50 | body { 51 | font: var(--font-size-xs)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 52 | text-wrap: pretty; 53 | color: var(--color-text); 54 | } 55 | 56 | pre { 57 | margin: 0; 58 | } 59 | 60 | textarea, 61 | input, 62 | button { 63 | font: inherit; 64 | line-height: inherit; 65 | border-radius: var(--radius-sm); 66 | padding: var(--spacing-sm) var(--spacing-md); 67 | word-break: break-word; 68 | } 69 | 70 | ul, 71 | ol { 72 | list-style: none; 73 | margin: 0; 74 | padding: 0; 75 | } 76 | 77 | p, 78 | li { 79 | margin-top: var(--spacing-sm); 80 | margin-bottom: var(--spacing-md); 81 | } 82 | 83 | button { 84 | background: var(--color-contrast); 85 | color: var(--color-base); 86 | border: solid 1px var(--color-contrast); 87 | margin: 1px; 88 | cursor: pointer; 89 | } 90 | 91 | button.outline { 92 | background: var(--color-base); 93 | color: var(--color-contrast); 94 | border: solid 1px var(--color-contrast); 95 | } 96 | 97 | button.minimal { 98 | background: var(--color-base); 99 | color: var(--color-contrast); 100 | border: none; 101 | } 102 | 103 | .button-block { 104 | width: 100%; 105 | display: flex; 106 | justify-content: center; 107 | } 108 | 109 | .button-inline { 110 | background: var(--color-base); 111 | color: var(--color-contrast); 112 | border: none; 113 | padding: 0; 114 | } 115 | 116 | h1 { 117 | font-size: var(--font-size-sm); 118 | } 119 | 120 | h2, 121 | h3, 122 | h4, 123 | h5, 124 | h6 { 125 | font-size: var(--font-size-md); 126 | } 127 | 128 | h1, 129 | h2, 130 | h3, 131 | h4, 132 | h5, 133 | h6 { 134 | margin-top: var(--spacing-sm); 135 | margin-bottom: var(--spacing-md); 136 | } 137 | 138 | .section { 139 | margin-bottom: var(--spacing-vl); 140 | } 141 | 142 | /* Utilities */ 143 | .hidden { 144 | display: none !important; 145 | } 146 | 147 | /* Two-column layout */ 148 | #app { 149 | display: flex; 150 | } 151 | 152 | /* First column */ 153 | #app > div:first-child { 154 | border-right: 1px solid var(--color-border); 155 | min-width: var(--col-width); 156 | width: var(--col-width); 157 | max-width: var(--col-width); 158 | } 159 | 160 | /* Second column */ 161 | #app > div:last-child { 162 | flex: 1; 163 | min-width: var(--col-width); 164 | } 165 | 166 | /* Breadcrumbs */ 167 | .breadcrumbs { 168 | padding: var(--spacing-sm) var(--spacing-md); 169 | border-bottom: 1px solid var(--color-border); 170 | color: var(--color-gray-600); 171 | } 172 | 173 | .breadcrumbs a { 174 | color: var(--color-contrast); 175 | text-decoration: none; 176 | } 177 | 178 | .breadcrumbs ul { 179 | display: flex; 180 | flex-wrap: wrap; 181 | } 182 | 183 | .breadcrumbs li { 184 | margin-top: 0; 185 | margin-bottom: 0; 186 | } 187 | 188 | .breadcrumbs li:not(:last-child)::after { 189 | display: inline-block; 190 | margin: 0 0.25rem; 191 | content: "→"; 192 | } 193 | 194 | 195 | /* App Main */ 196 | .app-main { 197 | padding: var(--spacing-md) var(--spacing-md); 198 | max-height: 100%; 199 | overflow: auto; 200 | } 201 | 202 | /* Preview */ 203 | .preview { 204 | width: 100%; 205 | height: 100%; 206 | display: flex; 207 | flex-direction: column; 208 | align-items: stretch; 209 | justify-content: center; 210 | color: var(--color-gray-700); 211 | } 212 | 213 | .preview .preview-tab-panel { 214 | width: 100%; 215 | height: 100%; 216 | } 217 | 218 | .preview iframe { 219 | width: 100%; 220 | height: 100%; 221 | flex-grow: 1; 222 | border: none; 223 | margin: 0; 224 | padding: 0; 225 | } 226 | 227 | /* Preview tabs. */ 228 | .preview-tabs { 229 | display: flex; 230 | flex-direction: row; 231 | flex-wrap: wrap; 232 | width: 100%; 233 | border-bottom: 1px solid var(--color-border); 234 | background: var(--color-base); 235 | justify-content: center; 236 | } 237 | 238 | .preview-tabs-tab { 239 | display: flex; 240 | flex-direction: column; 241 | flex: 0 1 auto; 242 | color: var(--color-text); 243 | } 244 | 245 | .preview-tabs-tab:hover { 246 | color: var(--color-contrast); 247 | } 248 | 249 | .preview-tabs-tab.selected { 250 | cursor: default; 251 | box-shadow: inset 0 1.5px 0 0 var(--color-contrast); 252 | } 253 | 254 | .preview-tabs-tab > * { 255 | cursor: pointer; 256 | } 257 | 258 | .preview-tabs-tab label { 259 | padding: var(--spacing-sm) var(--spacing-lg); 260 | } 261 | 262 | .preview-tabs-tab input { 263 | display: none; 264 | } 265 | 266 | /* Posts */ 267 | .toolbar { 268 | display: flex; 269 | margin-bottom: var(--spacing-lg); 270 | gap: var(--spacing-md); 271 | } 272 | 273 | /* Section pickers */ 274 | fieldset { 275 | border-radius: var(--radius-sm); 276 | border: 1px solid var(--color-border); 277 | margin-bottom: var(--spacing-lg); 278 | } 279 | 280 | fieldset .field-description { 281 | margin-bottom: var(--spacing-md); 282 | } 283 | 284 | legend { 285 | text-transform: capitalize; 286 | } 287 | 288 | /* Parsed strings */ 289 | .string { 290 | background: var(--color-gray-100); 291 | border-radius: var(--radius-sm); 292 | word-break: break-word; 293 | } 294 | -------------------------------------------------------------------------------- /src/ui/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |{ navigateMessage }
76 |
77 | );
78 |
79 | return <>{ isLoading ? 'Loading...' : element };
80 | }
81 |
--------------------------------------------------------------------------------
/src/ui/components/Breadcrumbs.tsx:
--------------------------------------------------------------------------------
1 | import { Link, useLocation } from 'react-router-dom';
2 | import { Screens } from '@/ui/App';
3 | import { useSessionContext } from '@/ui/session/SessionProvider';
4 |
5 | export function Breadcrumbs( props: { className: string } ) {
6 | const { className } = props;
7 | const { session } = useSessionContext();
8 | const location = useLocation();
9 |
10 | const showSession = location.pathname.startsWith( '/session' );
11 |
12 | return (
13 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/ui/components/ContentEventHandler.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef } from 'react';
2 | import { stopListening, startListening, Listener } from '@/bus/Bus';
3 | import { EventType, EventWithResponder } from '@/bus/Event';
4 |
5 | // Listen to events coming from the content script.
6 | export function ContentEventHandler( props: {
7 | eventType: EventType;
8 | onEvent: ( event: EventWithResponder ) => void;
9 | } ) {
10 | const { eventType, onEvent } = props;
11 | const listenerRef = useRef< Listener >();
12 | const callback = useCallback( onEvent, [ onEvent ] );
13 |
14 | // Start listening for events.
15 | useEffect( () => {
16 | if ( listenerRef.current ) {
17 | stopListening( listenerRef.current );
18 | }
19 | listenerRef.current = startListening( eventType, callback );
20 | // eslint-disable-next-line react-hooks/exhaustive-deps
21 | }, [ callback ] );
22 |
23 | // Stop listening on unmount.
24 | useEffect( () => {
25 | return () => {
26 | if ( listenerRef.current !== undefined ) {
27 | stopListening( listenerRef.current );
28 | }
29 | };
30 | // eslint-disable-next-line react-hooks/exhaustive-deps
31 | }, [] );
32 |
33 | return <>;
34 | }
35 |
--------------------------------------------------------------------------------
/src/ui/components/FieldsEditor/FieldsEditor.tsx:
--------------------------------------------------------------------------------
1 | import { Field } from '@/model/field/Field';
2 | import { ReactElement, useEffect, useState } from 'react';
3 | import { CommandTypes, sendCommandToContent } from '@/bus/Command';
4 | import { SingleFieldEditor } from '@/ui/components/FieldsEditor/SingleFieldEditor';
5 | import { EventTypes } from '@/bus/Event';
6 | import { ContentEventHandler } from '@/ui/components/ContentEventHandler';
7 | import { Subject } from '@/model/Subject';
8 | import { getSchema } from '@/model/Schema';
9 |
10 | // Displays a list of fields that can be "edited" by selecting the content of each field,
11 | // which is done by clicking on elements in the source site.
12 | export function FieldsEditor( props: {
13 | subject: Subject;
14 | selectors?: Record< string, string >;
15 | onFieldChanged: ( name: string, field: Field, selector: string ) => void;
16 | } ) {
17 | const { subject, selectors, onFieldChanged } = props;
18 | const schema = getSchema( subject.type );
19 | const [ fieldWaitingForSelection, setFieldWaitingForSelection ] = useState<
20 | false | { field: Field; name: string }
21 | >( false );
22 |
23 | // Enable or disable highlighting according to whether a field is waiting for selection.
24 | useEffect( () => {
25 | const type =
26 | fieldWaitingForSelection === false
27 | ? CommandTypes.SwitchToDefaultMode
28 | : CommandTypes.SwitchToGenericSelectionMode;
29 | void sendCommandToContent( { type, payload: {} } );
30 | }, [ fieldWaitingForSelection ] );
31 |
32 | // Render each field.
33 | const elements: ReactElement[] = [];
34 | for ( const name in subject.fields ) {
35 | const field = subject.fields[ name ];
36 | const schemaField = schema.fields[ name ];
37 |
38 | const isWaitingForSelection =
39 | !! fieldWaitingForSelection &&
40 | fieldWaitingForSelection.name === name;
41 |
42 | elements.push(
43 | { props.children }
;
5 | }
6 |
--------------------------------------------------------------------------------
/src/ui/hooks/useBlueprint.ts:
--------------------------------------------------------------------------------
1 | import { Blueprint } from '@/model/Blueprint';
2 | import { useSessionContext } from '@/ui/session/SessionProvider';
3 | import { useEffect, useState } from 'react';
4 |
5 | export function useBlueprint(
6 | blueprintId: string
7 | ): [ Blueprint | undefined, ( blueprint: Blueprint ) => void ] {
8 | const [ blueprint, setBlueprint ] = useState< Blueprint >();
9 | const { apiClient } = useSessionContext();
10 |
11 | useEffect( () => {
12 | if ( apiClient ) {
13 | apiClient.blueprints
14 | .findById( blueprintId )
15 | .then( ( bp ) => {
16 | if ( ! bp ) {
17 | throw Error(
18 | `blueprint with id ${ blueprintId } not found`
19 | );
20 | }
21 | setBlueprint( bp );
22 | } )
23 | .catch( console.error );
24 | }
25 | }, [ blueprintId, apiClient ] );
26 |
27 | return [ blueprint, setBlueprint ];
28 | }
29 |
--------------------------------------------------------------------------------
/src/ui/hooks/useSubject.ts:
--------------------------------------------------------------------------------
1 | import { Subject, SubjectType } from '@/model/Subject';
2 | import { useEffect, useState } from 'react';
3 | import { useSessionContext } from '@/ui/session/SessionProvider';
4 |
5 | // Create or load a Subject by its source URL.
6 | // If a Subject already exists for the source URL, we use that Subject,
7 | // otherwise we create a new one.
8 | export function useSubject(
9 | type: SubjectType | undefined,
10 | sourceUrl: string | undefined
11 | ): [ Subject | undefined, ( subject: Subject ) => void ] {
12 | const [ subject, setSubject ] = useState< Subject >();
13 | const { apiClient } = useSessionContext();
14 |
15 | useEffect( () => {
16 | async function loadSubject() {
17 | if ( ! type || ! sourceUrl || ! apiClient ) {
18 | return;
19 | }
20 | let subj = await apiClient!.subjects.findBySourceUrl(
21 | type,
22 | sourceUrl
23 | );
24 | if ( ! subj ) {
25 | subj = await apiClient!.subjects.create( type, sourceUrl );
26 | }
27 | setSubject( subj );
28 | }
29 | loadSubject().catch( console.error );
30 | }, [ type, sourceUrl, apiClient ] );
31 |
32 | return [ subject, setSubject ];
33 | }
34 |
--------------------------------------------------------------------------------
/src/ui/import/ImportWithBlueprint.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate, useParams } from 'react-router-dom';
2 | import { useBlueprint } from '@/ui/hooks/useBlueprint';
3 | import { Toolbar } from '@/ui/components/Toolbar';
4 | import { ReactElement, useEffect } from 'react';
5 | import { Screens } from '@/ui/App';
6 | import { useSessionContext } from '@/ui/session/SessionProvider';
7 | import { Button } from '@wordpress/components';
8 | import { getSchema } from '@/model/Schema';
9 |
10 | export function ImportWithBlueprint() {
11 | const params = useParams();
12 | const blueprintId = params.blueprintId!;
13 | const [ blueprint ] = useBlueprint( blueprintId );
14 | const { session } = useSessionContext();
15 | const navigate = useNavigate();
16 |
17 | // Navigate to the blueprint's edit screen if the blueprint is not valid.
18 | useEffect( () => {
19 | if ( blueprint && ! blueprint.valid ) {
20 | navigate( Screens.blueprints.edit( session.id, blueprint.id ) );
21 | }
22 | }, [ session.id, blueprint, navigate ] );
23 |
24 | const fields: ReactElement[] = [];
25 | if ( blueprint ) {
26 | for ( const [ name, selector ] of Object.entries(
27 | blueprint.selectors
28 | ) ) {
29 | fields.push(
30 | 72 |
73 |
- { fields }
80 | Importing page { pageIndex + 1 } of { selectedPages!.length } 81 |
82 |Click on one of the entries of the navigation menu.
42 |43 | If the menu is not shown on screen, click the Back button and 44 | then open the menu. 45 |
46 |Select the pages you want to import.
71 |72 | Do not select pages that should be automatically generated, like 73 | your blog posts index page, as those will automatically be 74 | created. 75 |
76 |- { elements }
Navigate to a page that shows the navigation menu.
17 |18 | Make sure the menu is shown on screen before clicking Continue. 19 |
20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/ui/import/pages/Toolbar.tsx: -------------------------------------------------------------------------------- 1 | import { Toolbar as BaseToolbar } from '@/ui/components/Toolbar'; 2 | import { useNavigate } from 'react-router-dom'; 3 | import { Button } from '@wordpress/components'; 4 | 5 | export function Toolbar( props: { 6 | canContinue?: boolean; 7 | continueUrl?: string; 8 | backUrl?: string; 9 | } ) { 10 | const { canContinue, continueUrl, backUrl } = props; 11 | const navigate = useNavigate(); 12 | 13 | return ( 14 |
13 | 
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/ui/preview/Playground.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 | import {
3 | MountDescriptor,
4 | PlaygroundClient,
5 | StartPlaygroundOptions,
6 | startPlaygroundWeb,
7 | StepDefinition,
8 | } from '@wp-playground/client';
9 |
10 | const playgroundIframeId = 'playground';
11 |
12 | export function Playground( props: {
13 | slug: string;
14 | className?: string;
15 | blogName: string;
16 | onReady: ( client: PlaygroundClient ) => void;
17 | } ) {
18 | const { slug, className, blogName, onReady } = props;
19 | const initializationRef = useRef( false );
20 |
21 | useEffect( () => {
22 | const iframe = document.getElementById( playgroundIframeId );
23 | if ( ! ( iframe instanceof HTMLIFrameElement ) ) {
24 | throw Error( 'Playground container element must be an iframe' );
25 | }
26 | if ( iframe.src !== '' || initializationRef.current ) {
27 | // Playground is already started or initialization has been attempted.
28 | return;
29 | }
30 |
31 | initializationRef.current = true;
32 |
33 | initPlayground( iframe, slug, blogName )
34 | .then( async ( client: PlaygroundClient ) => {
35 | const url = await client.absoluteUrl;
36 | console.log( 'Playground communication established', url );
37 | onReady( client );
38 | } )
39 | .catch( ( error ) => {
40 | throw error;
41 | } );
42 | }, [ slug, blogName, onReady ] );
43 |
44 | return (
45 |
50 | );
51 | }
52 |
53 | async function initPlayground(
54 | iframe: HTMLIFrameElement,
55 | slug: string,
56 | blogName: string
57 | ): Promise< PlaygroundClient > {
58 | const opfsEnabled = process.env.OPFS_ENABLED === 'true';
59 |
60 | // TODO: We should pass the initialSyncDirection property.
61 | // @ts-ignore
62 | const mountDescriptor: MountDescriptor = {
63 | device: {
64 | type: 'opfs',
65 | path: '/try-wp-sites/' + slug,
66 | },
67 | mountpoint: '/wordpress',
68 | };
69 |
70 | const isWPInstalled = await isWordPressInstalled( slug );
71 | console.info(
72 | 'opfsEnabled:',
73 | opfsEnabled,
74 | 'isWordPressInstalled:',
75 | isWPInstalled
76 | );
77 |
78 | const options: StartPlaygroundOptions = {
79 | iframe,
80 | remoteUrl: `https://pg.ashfame.com/remote.html`,
81 | mounts: opfsEnabled ? [ mountDescriptor ] : undefined,
82 | shouldInstallWordPress: opfsEnabled ? ! isWPInstalled : undefined,
83 | blueprint: {
84 | login: true,
85 | steps: steps(),
86 | siteOptions: {
87 | blogname: blogName,
88 | },
89 | },
90 | };
91 |
92 | const client: PlaygroundClient = await startPlaygroundWeb( options );
93 | await client.isReady();
94 |
95 | if ( ! isWPInstalled ) {
96 | await setWordPressAsInstalled( slug );
97 | }
98 |
99 | return client;
100 | }
101 |
102 | async function isWordPressInstalled( slug: string ) {
103 | const localStorageKey = `${ slug }-isWordPressInstalled`;
104 | let isInstalled = false;
105 |
106 | try {
107 | const result = await browser.storage.local.get( localStorageKey );
108 | if ( result[ localStorageKey ] === 'true' ) {
109 | isInstalled = true;
110 | }
111 | return isInstalled;
112 | } catch ( error ) {
113 | console.log( `Error: ${ error }` );
114 | return false; // In case of error, assume WordPress is not installed
115 | }
116 | }
117 |
118 | async function setWordPressAsInstalled( slug: string ) {
119 | const localStorageKey = `${ slug }-isWordPressInstalled`;
120 | await browser.storage.local.set( { [ localStorageKey ]: 'true' } );
121 | }
122 |
123 | function steps(): StepDefinition[] {
124 | return [
125 | {
126 | step: 'defineWpConfigConsts',
127 | consts: {
128 | WP_ENVIRONMENT_TYPE: 'local',
129 | },
130 | },
131 | {
132 | step: 'login',
133 | username: 'admin',
134 | password: 'password',
135 | },
136 | {
137 | step: 'updateUserMeta',
138 | userId: 1,
139 | meta: {
140 | admin_color: 'modern',
141 | },
142 | },
143 | {
144 | step: 'runPHP',
145 | code: deleteDefaultContent(),
146 | },
147 | {
148 | step: 'runPHP',
149 | code: createHomePage(),
150 | },
151 | {
152 | step: 'unzip',
153 | zipFile: {
154 | resource: 'url',
155 | url: 'plugin.zip',
156 | },
157 | extractToPath: '/wordpress/wp-content/plugins/try-wordpress',
158 | },
159 | {
160 | step: 'activatePlugin',
161 | pluginName: 'Try WordPress',
162 | pluginPath: '/wordpress/wp-content/plugins/try-wordpress',
163 | },
164 | {
165 | step: 'mkdir',
166 | path: '/wordpress/wp-content/mu-plugins',
167 | },
168 | {
169 | step: 'writeFile',
170 | path: '/wordpress/wp-content/mu-plugins/authenticate-rest-request.php',
171 | data: authenticateRestRequest(),
172 | },
173 | ];
174 | }
175 |
176 | function authenticateRestRequest(): string {
177 | return `term_id;
204 | }
205 | $post_id = wp_insert_post(array(
206 | 'post_title' => 'Home',
207 | 'post_name' => 'home',
208 | 'post_type' => 'wp_template',
209 | 'post_status' => 'publish',
210 | 'tax_input' => array(
211 | 'wp_theme' => array($term_id)
212 | ),
213 | 'post_content' => '
214 |
215 |
22 | { tabBar }
54 |
61 | { previewFront }
62 |
63 |
70 | { previewAdmin }
71 |
72 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/src/ui/preview/PreviewTabBar.tsx:
--------------------------------------------------------------------------------
1 | export function PreviewTabBar( props: {
2 | entries: string[];
3 | value: number;
4 | className: string;
5 | tabClassName: string;
6 | hidden?: boolean;
7 | onChange: ( newValue: number ) => void;
8 | } ) {
9 | const { entries, value, className, tabClassName, onChange } = props;
10 |
11 | const tabs = entries.map( ( label, index ) => {
12 | const key = label.toLowerCase().replace( ' ', '-' );
13 | const classes = [ tabClassName ];
14 | if ( value === index ) {
15 | classes.push( 'selected' );
16 | }
17 | return (
18 |
19 | onChange( index ) }
24 | checked={ value === index }
25 | readOnly
26 | />
27 |
28 |
29 | );
30 | } );
31 |
32 | return { tabs }
;
33 | }
34 |
--------------------------------------------------------------------------------
/src/ui/session/NewSession.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router-dom';
2 | import { Screens } from '@/ui/App';
3 | import { createSession } from '@/storage/session';
4 | import {
5 | CommandTypes,
6 | CurrentPageInfo,
7 | sendCommandToContent,
8 | } from '@/bus/Command';
9 | import { Button } from '@wordpress/components';
10 |
11 | export function NewSession() {
12 | const navigate = useNavigate();
13 | const handleContinue = async () => {
14 | try {
15 | const info = ( await sendCommandToContent( {
16 | type: CommandTypes.GetCurrentPageInfo,
17 | payload: {},
18 | } ) ) as CurrentPageInfo;
19 | const session = await createSession( {
20 | url: info.url,
21 | title: info.title ?? new URL( info.url ).hostname,
22 | } );
23 | navigate( Screens.viewSession( session.id ) );
24 | } catch ( error ) {
25 | console.error( 'Failed to create session', error );
26 | return (
27 |
28 | Failed to create session: { ( error as Error ).message }
29 |
30 | );
31 | }
32 | };
33 |
34 | return (
35 | <>
36 | 37 | Start by navigating to the main page of your site, then click 38 | Continue. 39 |
40 | 47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /src/ui/session/SessionProvider.ts: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | import { Session } from '@/storage/session'; 3 | import { ApiClient } from '@/api/ApiClient'; 4 | import { PlaygroundClient } from '@wp-playground/client'; 5 | 6 | export interface SessionContext { 7 | session: Session; 8 | apiClient?: ApiClient; 9 | playgroundClient?: PlaygroundClient; 10 | } 11 | 12 | const sessionContext = createContext< SessionContext >( { 13 | session: { 14 | id: '', 15 | url: '', 16 | title: '', 17 | }, 18 | } ); 19 | 20 | export const SessionProvider = sessionContext.Provider; 21 | 22 | export function useSessionContext() { 23 | return useContext( sessionContext ); 24 | } 25 | -------------------------------------------------------------------------------- /src/ui/session/ViewSession.tsx: -------------------------------------------------------------------------------- 1 | import { useSessionContext } from '@/ui/session/SessionProvider'; 2 | import { useNavigate } from 'react-router-dom'; 3 | import { Screens } from '@/ui/App'; 4 | import { ManualSubjectTypes } from '@/model/Subject'; 5 | import { Button } from '@wordpress/components'; 6 | import { getSchemas } from '@/model/Schema'; 7 | 8 | const schemas = getSchemas(); 9 | 10 | export function ViewSession() { 11 | const { session } = useSessionContext(); 12 | const navigate = useNavigate(); 13 | 14 | const importButtons: { text: string; url: string }[] = Object.keys( 15 | schemas 16 | ).map( ( subjectType ) => { 17 | // Pages get a specific button. 18 | if ( subjectType === ManualSubjectTypes.Page ) { 19 | return { 20 | text: `Import Pages`, 21 | url: Screens.importPagesStart( session.id ), 22 | }; 23 | } 24 | const schema = schemas[ subjectType ]; 25 | return { 26 | text: `Import ${ schema.title }s`, 27 | url: Screens.blueprints.new( session.id, schema.slug ), 28 | }; 29 | } ); 30 | 31 | return ( 32 | <> 33 |34 | { session.title } ({ session.url }) 35 |
36 |-
37 | { importButtons.map( ( { text, url } ) => (
38 |
This is the test content.
This is the test content.
'; 21 | 22 | protected function setUp(): void { 23 | parent::setUp(); 24 | 25 | $this->endpoint = '/' . $this->namespace . '/subjects/' . $this->subject_type; 26 | $this->source_html = 'This is the test content.
This is the test content.
'; 20 | 21 | private string $inserted_post_id; 22 | private int $transformed_post_id; 23 | 24 | protected function setUp(): void { 25 | parent::setUp(); 26 | 27 | $this->liberate_controller = new Subjects_Controller( $this->storage_post_type ); 28 | 29 | $this->source_html = 'This is the test content.
This is the test content.
'; 19 | 20 | protected function setUp(): void { 21 | parent::setUp(); 22 | 23 | $this->endpoint = '/' . $this->namespace . '/subjects/' . $this->subject_type; 24 | $this->source_html = '