I'm just trying to learn how to develop with WordPress Gutenberg. No problem with GET Method however with the post method anything I try results in an errors message No route was found matching the URL and request method. How can I send the data under a POST method? Going into store is a bit much for something this simple.

edit.js

export default function Edit({attributes, setAttributes }) {

const { getCurrentPostId } = wp.data.select("core/editor");

const onPriceChange = (new_price) =>{
setAttributes({price:new_price});

if(document.readyState != 'loading'){
    woobergSendRequest(new_price);
}else {
    document.addEventListener('DOMContentLoaded', woobergSendRequest);
}

}

function woobergSendRequest(new_price){

const post_id = getCurrentPostId();
const get_url = 'wooberg/v2/product?_method&product_id='+post_id+'&product_price='+new_price;
console.log(post_id);

const sendData = {product_id:459,product_price:1.00};

apiFetch( {
    path: 'wooberg/v2/product',
    method:'POST',
    data:sendData
} ).then( data => {
    console.log( data );
} );
   }


 return (



<div { ...useBlockProps() }>

    

<NumberControl
        isShiftStepEnabled={ true }
        onChange={ onPriceChange}
        step={0.01}
        shiftStep={ 0.01 }
        value= { attributes.price}
    />

    
</div>
 );

}

index.php

add_action('rest_api_init', function () {

    register_rest_route( 'wooberg/v2', '/product', [
        'method'   => 'POST',
        'callback' => 'wooberg_product_price_callback',
        'args' => [
            'product_id' => [
                'required' => false,
                'type' => 'number,'
            ],

            'product_price' => [
                'required' => false,
                'type' => 'number,'
            ],
        ],
        'permission_callback' => function(){
            return current_user_can( 'edit_others_posts' );
           
       } 
    ]  
);


 });


  function wooberg_product_price_callback($request){



$product_id = $request->get_param('product_id');
$product_price = $request->get_param('product_price');

$product_id = $request['product_id'];
$product_price = $request['product_price'];
if(! empty($product_id)){

    $product = wc_get_product($product_id);
    $curret_price = $product->get_price;
    $product->set_price($product_price);
    $product->set_regular_price($product_price);
    $product->save();


    $response = $product->get_name() .'Has be update from '. $curret_price .' to '.$product->get_price();
     return rest_ensure_response( $response,200 );
}else{
    $response = "No Id found";
    return new WP_REST_Response( [
        'message' => 'Product was not found',
    ], 400 );
}
 
    

}

I'm just trying to learn how to develop with WordPress Gutenberg. No problem with GET Method however with the post method anything I try results in an errors message No route was found matching the URL and request method. How can I send the data under a POST method? Going into store is a bit much for something this simple.

edit.js

export default function Edit({attributes, setAttributes }) {

const { getCurrentPostId } = wp.data.select("core/editor");

const onPriceChange = (new_price) =>{
setAttributes({price:new_price});

if(document.readyState != 'loading'){
    woobergSendRequest(new_price);
}else {
    document.addEventListener('DOMContentLoaded', woobergSendRequest);
}

}

function woobergSendRequest(new_price){

const post_id = getCurrentPostId();
const get_url = 'wooberg/v2/product?_method&product_id='+post_id+'&product_price='+new_price;
console.log(post_id);

const sendData = {product_id:459,product_price:1.00};

apiFetch( {
    path: 'wooberg/v2/product',
    method:'POST',
    data:sendData
} ).then( data => {
    console.log( data );
} );
   }


 return (



<div { ...useBlockProps() }>

    

<NumberControl
        isShiftStepEnabled={ true }
        onChange={ onPriceChange}
        step={0.01}
        shiftStep={ 0.01 }
        value= { attributes.price}
    />

    
</div>
 );

}

index.php

add_action('rest_api_init', function () {

    register_rest_route( 'wooberg/v2', '/product', [
        'method'   => 'POST',
        'callback' => 'wooberg_product_price_callback',
        'args' => [
            'product_id' => [
                'required' => false,
                'type' => 'number,'
            ],

            'product_price' => [
                'required' => false,
                'type' => 'number,'
            ],
        ],
        'permission_callback' => function(){
            return current_user_can( 'edit_others_posts' );
           
       } 
    ]  
);


 });


  function wooberg_product_price_callback($request){



$product_id = $request->get_param('product_id');
$product_price = $request->get_param('product_price');

$product_id = $request['product_id'];
$product_price = $request['product_price'];
if(! empty($product_id)){

    $product = wc_get_product($product_id);
    $curret_price = $product->get_price;
    $product->set_price($product_price);
    $product->set_regular_price($product_price);
    $product->save();


    $response = $product->get_name() .'Has be update from '. $curret_price .' to '.$product->get_price();
     return rest_ensure_response( $response,200 );
}else{
    $response = "No Id found";
    return new WP_REST_Response( [
        'message' => 'Product was not found',
    ], 400 );
}
 
    

}

• plugins
• block-editor

1 Answer 1

Your apiFetch() usage is correct, but you're getting the "No route was found" error because of the 'method' => 'POST' part which should actually use methods and not method. (Note that an endpoint can allow one or more HTTP methods)

So when it's method, it's not used and thus the HTTP method defaults to GET only.

And all you need to do is use 'methods' => 'POST' (or 'methods' => 'GET,POST' if you wanted to allow both GET and POST methods), and the error would be gone.