Ön Uçta WordPress Bloklarında Harici API Verileri Oluşturma

WordPress bloklarıyla çalışmak için burada CSS-Tricks'te ortaya çıkan bazı yeni öğreticiler var. Onlardan biri WordPress blok geliştirmeye bir giriştir ve blokların ne olduğunu öğrenmek ve bunları sayfalarda ve gönderilerde kullanmak üzere WordPress'e kaydetmek için iyi bir yerdir.

Bu gönderide blok temelleri güzel bir şekilde ele alınmış olsa da, bir adım daha atmak istiyorum. Görüyorsunuz, o makalede, arka uç WordPress Blok Düzenleyici'de blok oluşturma ile bunları ön uç temasında oluşturma arasındaki farkı öğrendik. Örnek, her iki uçta farklı içerik ve stiller oluşturan basit bir Kısa Alıntı Bloğuydu.

Daha ileri gidelim ve kullanmaya bakalım dinamik içerik bir WordPress bloğunda. Daha spesifik olarak, harici bir API'den veri alalım ve belirli bir blok Blok Düzenleyiciye bırakıldığında ön uçta oluşturalım.

Futbolu gösteren verileri çıkaran bir blok oluşturacağız (er, futbol) sıralamalar çekildi Api-Futbol.

Bir API'yi bir WordPress bloğuyla entegre etmenin birden fazla yolu var! Blok temelleri ile ilgili makale, sıfırdan bir blok yapma sürecinden zaten geçtiğinden, aşağıdakileri kullanarak işleri basitleştireceğiz. @wordpress/create-block çalışmamızı önyüklemek ve projemizi yapılandırmak için paket.

Blok eklentimizi başlatıyoruz

Önce ilk şeyler: hadi komut satırından yeni bir proje başlatalım:

npx @wordpress/create-block football-rankings

Normalde dosyaları sıfırdan yaparak böyle bir projeyi başlatırdım, ancak bu kullanışlı yardımcı program için WordPress Core ekibine tebrikler!

Proje klasörü komutla oluşturulduktan sonra, teknik olarak eklenti olarak kayıtlı tam işlevli bir WordPress bloğumuz olur. Öyleyse devam edelim ve proje klasörünü içine bırakalım. wp-content/plugins WordPress'in kurulu olduğu dizine (muhtemelen yerel bir ortamda çalışmak en iyisidir), ardından WordPress yöneticisine giriş yapın ve Eklentiler ekranından etkinleştirin.

Artık bloğumuz başlatıldı, kuruldu ve etkinleştirildi, devam edin ve proje klasörünü adresinden açın. /wp-content/plugins/football-rankings. sen isteyeceksin cd geliştirmeye devam edebildiğimizden emin olmak için komut satırından da orada.

Şu anda konsantre olmamız gereken tek dosya bunlar:

• edit.js
• index.js
• football-rankings.php

Projedeki diğer dosyalar elbette önemlidir, ancak bu noktada gereksizdir.

API kaynağını inceleme

kullandığımızı zaten biliyoruz Api-Futbol bize nezaketle gelen RapidAPI. Neyse ki RapidAPI, 2021 Premier Lig Puan Durumu için API verilerini almak için ihtiyacımız olan gerekli komut dosyalarını otomatik olarak oluşturan bir panoya sahiptir.

JSON yapısına bir göz atmak isterseniz, ile görsel temsil oluşturabilirsiniz. JSONCrack.

Verilerin alınması edit.js dosya

RapidAPI kodunu bir React useEffect() kanca boş bir bağımlılık dizisiyle, böylece sayfa yüklendiğinde yalnızca bir kez çalışır. Bu şekilde, Blok Düzenleyici her yeniden oluşturulduğunda WordPress'in API'yi çağırmasını önleriz. kullanarak kontrol edebilirsiniz. wp.data.subscribe() eğer umursuyorsan.

İşte içe aktardığım kod useEffect(), ardından etrafına sararak fetch() RapidAPI'nin sağladığı kod:

/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
*
* @return {WPElement} Element to render.
*/

import { useEffect } from "@wordpress/element";

export default function Edit(props) {
  const { attributes, setAttributes } = props;

  useEffect(() => {
    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": "Your Rapid API key",
        "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
      },
    };

    fetch("https://api-football-v1.p.rapidapi.com/v3/standings?season=2021&league=39", options)
      .then( ( response ) => response.json() )
      .then( ( response ) => {
        let newData = { ...response };
        setAttributes( { data: newData } );
        console.log( "Attributes", attributes );
      })
      .catch((err) => console.error(err));
}, []);

  return (
    

      { __( "Standings loaded on the front end", "external-api-gutenberg" ) }
    
  );
}

bıraktığıma dikkat edin return işlev hemen hemen bozulmamış, ancak futbol sıralamasının ön uçta gösterildiğini doğrulayan bir not ekledik. Yine, bu makalede yalnızca ön uca odaklanacağız - verileri Blok Düzenleyici'de de oluşturabiliriz, ancak işleri odaklanmak için başka bir makaleye bırakacağız.

API verilerini WordPress'te saklama

Artık verileri getirdiğimize göre, onu WordPress'te bir yerde saklamamız gerekiyor. Burası attributes.data nesne işe yarar. tanımlıyoruz data.type bir olarak object veriler getirildiğinden ve JSON olarak biçimlendirildiğinden. Başka bir türünüz olmadığından emin olun, aksi takdirde WordPress verileri kaydetmez ve hata ayıklamanız için herhangi bir hata oluşturmaz.

Bütün bunları kendimizde tanımlıyoruz. index.js Dosya:

registerBlockType( metadata.name, {
  edit: Edit,
  attributes: {
    data: {
      type: "object",
    },
  },
  save,
} );

Tamam, WordPress artık aldığımız RapidAPI verilerinin bir nesne olduğunu biliyor. WordPress Block Editor'da yeni bir gönderi taslağı açar ve gönderiyi kaydedersek, veriler artık veritabanında saklanır. Aslında, eğer onu görebilirsek, wp_posts.post_content sitenin veritabanını phpMyAdmin, Sequel Pro, Adminer veya kullandığınız herhangi bir araçta açarsak alan.

Ön uçta JSON verilerinin çıktısı

Verileri ön uçtan çıkarmanın birden çok yolu vardır. Size göstereceğim yol, veritabanında depolanan öznitelikleri alır ve bunları bir parametre olarak veri tabanından geçirir. render_callback bizim işlevimizde football-rankings.php dosyası.

Endişeleri ayrı tutmayı seviyorum, bu yüzden bunu nasıl yapacağım, blok eklentisine iki yeni dosya eklemek. build Klasör: frontend.js ve frontend.css (bir frontend.scss içindeki dosyayı src içinde CSS'ye derlenen dizin build dizin). Bu şekilde, arka uç ve ön uç kodları ayrıdır ve football-rankings.php dosyasının okunması biraz daha kolaydır.

/explanation WordPress blok geliştirmeye girişe geri dönersek, editor.css ve style.css sırasıyla ön ve arka uç arasında arka uç ve paylaşılan stiller için dosyalar. Toplayarak frontend.scss (hangi için derlenir frontend.css, Yalnızca ön uç için tasarlanan stilleri ayırabilirim.

Bu yeni dosyalar için endişelenmeden önce, onları şu şekilde çağırıyoruz: football-rankings.php:

/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function create_block_football_rankings_block_init() {
  register_block_type( __DIR__ . '/build', array(
    'render_callback' => 'render_frontend'
  ));
}
add_action( 'init', 'create_block_football_rankings_block_init' );

function render_frontend($attributes) {
  if( !is_admin() ) {
    wp_enqueue_script( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.js');
    wp_enqueue_style( 'football_rankings', plugin_dir_url( __FILE__ ) . '/build/frontend.css' ); // HIGHLIGHT 15,16,17,18
  }
  
  ob_start(); ?>

  

    

      
        
      


Rank
Logo
Team name

GP
GW
GD
GL
GF
GA
Pts
Last 5 games

  <?php return ob_get_clean();

}
kullandığımdan beri render_callback() öznitelikler için yöntem olarak, kuyruğa alma işlemini tıpkı aşağıdaki gibi manuel olarak halledeceğim. Blok Düzenleyici El Kitabı önerileri. İçinde bulunan !is_admin() durumu ve düzenleyici ekranını kullanırken onları kuyruğa almaktan kaçınmamız için iki dosyayı sıraya alıyor.
Artık aradığımız iki yeni dosyamız olduğuna göre, söylediğimizden emin olmalıyız. npm onları derlemek için. Yani, bunu yap package.json, In scripts Bölüm:
"scripts": {
  "build": "wp-scripts build src/index.js src/frontend.js",
  "format": "wp-scripts format",
  "lint:css": "wp-scripts lint-style",
  "lint:js": "wp-scripts lint-js",
  "packages-update": "wp-scripts packages-update",
  "plugin-zip": "wp-scripts plugin-zip",
  "start": "wp-scripts start src/index.js src/frontend.js"
},
Dosyaları dahil etmenin başka bir yolu, onları, dosyamızda bulunan blok metadatasında tanımlamaktır. block.json dosyası, belirtildiği üzere blok geliştirme girişinde:
"viewScript": [ "file:./frontend.js", "example-shared-view-script" ],
"style": [ "file:./frontend.css", "example-shared-style" ],
ile gitmemin tek nedeni package.json yöntem, zaten kullanıyorum çünkü render_callback() yöntemi.
JSON verilerini oluşturma
Render kısmında ise sadece tek bir bloğa odaklanıyorum. Genel olarak konuşursak, ön uçta birden fazla bloğu hedeflemek istersiniz. Bu durumda, kullanmanız gerekir document.querySelectorAll() bloğun özel kimliği ile.
Temel olarak, pencerenin JSON'dan birkaç önemli nesne için veri yüklemesini ve almasını ve bunları ön uçta oluşturan bazı işaretlemelere uygulamasını bekleyeceğim. ben de çevireceğim attributes JavaScript'i okumak ve futbol ligi logosu, takım logoları ve istatistikler gibi ayrıntıları JSON'dan HTML'ye ayarlamak daha kolay olacak şekilde verileri bir JSON nesnesine aktarın.
"Son 5 maç" sütunu, bir takımın son beş maçının sonucunu gösterir. API verileri bir dize biçiminde olduğu için verileri manuel olarak değiştirmem gerekiyor. Bunu bir diziye dönüştürmek, HTML'de takımın son beş maçının her biri için ayrı bir öğe olarak kullanılmasına yardımcı olabilir.
import "./frontend.scss";

// Wait for the window to load
window.addEventListener( "load", () => {
  // The code output
  const dataEl = document.querySelector( ".data pre" ).innerHTML;
  // The parent rankings element
  const tableEl = document.querySelector( ".league-table" );
  // The table headers
  const tableHeaderEl = document.querySelector( "#league-standings .header" );
  // Parse JSON for the code output
  const dataJSON = JSON.parse( dataEl );
  // Print a little note in the console
  console.log( "Data from the front end", dataJSON );
  
  // All the teams 
  let teams = dataJSON.data.response[ 0 ].league.standings[ 0 ];
  // The league logo
  let leagueLogoURL = dataJSON.data.response[ 0 ].league.logo;
  // Apply the league logo as a background image inline style
  tableHeaderEl.style.backgroundImage = `url( ${ leagueLogoURL } )`;
  
  // Loop through the teams
  teams.forEach( ( team, index ) => {
    // Make a div for each team
    const teamDiv = document.createElement( "div" );
    // Set up the columns for match results
    const { played, win, draw, lose, goals } = team.all;

    // Add a class to the parent rankings element
    teamDiv.classList.add( "team" );
    // Insert the following markup and data in the parent element
    teamDiv.innerHTML = `
      

        ${ index + 1 }
      
      

        
      
      
${ team.team.name }
      

        
${ played }
        
${ win }
        
${ draw }
        
${ lose }
        
${ goals.for }
        
${ goals.against }
        
${ team.points }
      
      

    `;
    
    // Stringify the last five match results for a team
    const form = team.form.split( "" );
    
    // Loop through the match results
    form.forEach( ( result ) => {
      // Make a div for each result
      const resultEl = document.createElement( "div" );
      // Add a class to the div
      resultEl.classList.add( "result" );
      // Evaluate the results
      resultEl.innerText = result;
      // If the result a win
      if ( result === "W" ) {
        resultEl.classList.add( "win" );
      // If the result is a draw
      } else if ( result === "D" ) {
        resultEl.classList.add( "draw" );
      // If the result is a loss
      } else {
        resultEl.classList.add( "lost" );
      }
      // Append the results to the column
      teamDiv.querySelector( ".form-history" ).append( resultEl );
    });

    tableEl.append( teamDiv );
  });
});
Stil söz konusu olduğunda, istediğinizi yapmakta özgürsünüz! Çalışmak istediğiniz bir şey varsa, başlangıç ​​noktası olarak kullanabileceğiniz eksiksiz bir stil setim var.
O zamandan beri SCSS'de bir şeyler tasarladım. @wordpress/create-block paket, kutunun dışında destekler. Koşmak npm run start SCSS dosyalarını izlemek ve bunları kaydederken CSS'ye derlemek için komut satırında. Alternatif olarak, kullanabilirsiniz npm run build SCSS'yi derlemek ve eklenti paketinin geri kalanını oluşturmak için her kaydetmede.


          SCSS'yi Görüntüle      
body {
  background: linear-gradient(to right, #8f94fb, #4e54c8);
}

.data pre {
  display: none;
}

.header {
  display: grid;
  gap: 1em;
  padding: 10px;
  grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
  align-items: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
}

.frontend#league-standings {
  width: 900px;
  margin: 60px 0;
  max-width: unset;
  font-size: 16px;

  .header {
    .stats {
      display: flex;
      gap: 15px;

      & > div {
        width: 30px;
      }
    }
  }
}

.league-table {
  background: white;
  box-shadow:
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  padding: 1em;

  .position {
    width: 20px;
  }

  .team {
    display: grid;
    gap: 1em;
    padding: 10px 0;
    grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
    align-items: center;
  }

  .team:not(:last-child) {
    border-bottom: 1px solid lightgray;
  }

  .team-logo img {
    width: 30px;
  }

  .stats {
    display: flex;
    gap: 15px;
  }

  .stats > div {
    width: 30px;
    text-align: center;
  }

  .form-history {
    display: flex;
    gap: 5px;
  }

  .form-history > div {
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 3px;
    font-size: 15px;
  }

  .form-history .win {
    background: #347d39;
    color: white;
  }

  .form-history .draw {
    background: gray;
    color: white;
  }

  .form-history .lost {
    background: lightcoral;
    color: white;
  }
}

İşte demo!
Şuna bir bakın - verileri alan ve bir WordPress sitesinin ön ucunda işleyen bir blok eklentisi yaptık.
Bir API bulduk, fetch()-ed verileri, WordPress veritabanına kaydetti, ayrıştırdı ve ön uçta görüntülemek için bazı HTML işaretlemelerine uyguladı. Tek bir eğitim için fena değil, değil mi?
Yine, aynı şeyi yapabiliriz, böylece sıralamalar, temanın ön ucuna ek olarak Blok Düzenleyicide işlenir. Ancak bunun ön uçta odaklanmasını umarız, bir WordPress bloğunda veri almanın nasıl çalıştığını ve verilerin nasıl yapılandırılıp görüntülenmek üzere oluşturulabileceğini gösterir.