Web Design Leaves

add_theme_support( 'align-wide' ); 

<figure class="wp-block-image alignfull">
  <img src="http://example.com/wp-content/uploads/2019/07/Rio1-1024x680.jpg" alt="" class="wp-image-1393" srcset="http://example.com/wp-content/uploads/2019/07/Rio1-1024x680.jpg 1024w, http://example.com/wp-content/uploads/2019/07/Rio1-300x199.jpg 300w, http://example.com/wp-content/uploads/2019/07/Rio1-768x510.jpg 768w, http://example.com/wp-content/uploads/2019/07/Rio1-240x159.jpg 240w, http://example.com/wp-content/uploads/2019/07/Rio1-60x40.jpg 60w" sizes="(max-width: 1024px) 100vw, 1024px">
</figure>

.wp-block-image.alignfull img,
.wp-block-image.alignwide img {
  width: 100%; 
}

.alignfull {
  margin: 2rem calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio">
  <div class="wp-block-embed__wrapper">
    <iframe title="pat metheny trio" src="https://www.youtube.com/embed/VGRndhjNOoc?feature=oembed" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="500" height="375" frameborder="0"></iframe>
  </div>
</figure>

add_theme_support( 'responsive-embeds' );

.wp-block-embed {
  margin-bottom: 1em; 
}
.wp-block-embed figcaption {
  margin-top: 0.5em;
  margin-bottom: 1em;
  color: #555d66;
  text-align: center;
  font-size: 13px;
}

.wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper {
  position: relative; 
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before {
  content: "";
  display: block;
  padding-top: 50%; 
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper iframe,
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; 
}

.wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before {
  padding-top: 42.85%;
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before {
  padding-top: 50%; 
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
  padding-top: 56.25%; 
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
  padding-top: 75%; 
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before {
  padding-top: 100%; 
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-6 .wp-block-embed__wrapper::before {
  padding-top: 66.66%; 
}
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before {
  padding-top: 200%; 
}

add_theme_support( 'editor-color-palette', array(
  array(
    'name' => '深い緑',
    'slug' => 'dark-green',
    'color' => '#0A4D17',
  ),
  array(
    'name' => '明るい緑',
    'slug' => 'bright-green',
    'color' => '#3DBF38',
  ),
  array(
    'name' => 'とても薄い灰色',
    'slug' => 'very-light-gray',
    'color' => '#eee',
  ),
  array(
    'name' => 'とても暗い灰色',
    'slug' => 'very-dark-gray',
    'color' => '#444',
  ),
) );

.has-dark-green-color {
  color: #0A4D17;
}

.has-dark-green-background-color {
  background-color: #0A4D17;
}

.has-bright-green-color {
  color: #3DBF38;
}

.has-bright-green-background-color {
  background-color: #3DBF38;
}

.has-pale-pink-background-color.has-pale-pink-background-color {
  background-color: #f78da7; 
}
.has-vivid-red-background-color.has-vivid-red-background-color {
  background-color: #cf2e2e; 
}
.has-luminous-vivid-orange-background-color.has-luminous-vivid-orange-background-color {
  background-color: #ff6900; 
}
.has-luminous-vivid-amber-background-color.has-luminous-vivid-amber-background-color {
  background-color: #fcb900;
}
.has-light-green-cyan-background-color.has-light-green-cyan-background-color {
  background-color: #7bdcb5; 
}
.has-vivid-green-cyan-background-color.has-vivid-green-cyan-background-color {
  background-color: #00d084; 
}
.has-pale-cyan-blue-background-color.has-pale-cyan-blue-background-color {
  background-color: #8ed1fc; 
}
.has-vivid-cyan-blue-background-color.has-vivid-cyan-blue-background-color {
  background-color: #0693e3; 
}
.has-very-light-gray-background-color.has-very-light-gray-background-color {
  background-color: #eee; 
}
.has-cyan-bluish-gray-background-color.has-cyan-bluish-gray-background-color {
  background-color: #abb8c3; 
}
.has-very-dark-gray-background-color.has-very-dark-gray-background-color {
  background-color: #313131;
}
.has-pale-pink-color.has-pale-pink-color {
  color: #f78da7; 
}
.has-vivid-red-color.has-vivid-red-color {
  color: #cf2e2e; 
}
.has-luminous-vivid-orange-color.has-luminous-vivid-orange-color {
  color: #ff6900; 
}
.has-luminous-vivid-amber-color.has-luminous-vivid-amber-color {
  color: #fcb900; 
}
.has-light-green-cyan-color.has-light-green-cyan-color {
  color: #7bdcb5; 
}
.has-vivid-green-cyan-color.has-vivid-green-cyan-color {
  color: #00d084; 
}
.has-pale-cyan-blue-color.has-pale-cyan-blue-color {
  color: #8ed1fc; 
}
.has-vivid-cyan-blue-color.has-vivid-cyan-blue-color {
  color: #0693e3; 
}
.has-very-light-gray-color.has-very-light-gray-color {
  color: #eee; 
}
.has-cyan-bluish-gray-color.has-cyan-bluish-gray-color {
  color: #abb8c3; 
}
.has-very-dark-gray-color.has-very-dark-gray-color {
  color: #313131; 
}

/* 色のマップ */
$colors: (
  'blue' : #3B47BC,
  'green' : #20711F,
  'orange' : #D98611,
  'red' : #C81619,
);

/* @each でループ処理 */
@each $name, $color in $colors {
  .has-#{$name}-color {
    color: $color;
  }

  .has-#{$name}-background-color {
    background-color: $color;
  }
}

@each $キーの変数名, $値の変数名 in マップ {
  実行する処理
}

.has-blue-color {
  color: #3B47BC;
}

.has-blue-background-color {
  background-color: #3B47BC;
}

.has-green-color {
  color: #20711F;
}

.has-green-background-color {
  background-color: #20711F;
}

.has-orange-color {
  color: #D98611;
}

.has-orange-background-color {
  background-color: #D98611;
}

.has-red-color {
  color: #C81619;
}

.has-red-background-color {
  background-color: #C81619;
}

add_theme_support( 'disable-custom-colors' );

add_theme_support( 'editor-color-palette' );
add_theme_support( 'disable-custom-colors' );

add_theme_support( 'editor-font-sizes', array(
  array(
    'name' => '極小',
    'size' => 10,
    'slug' => 'x-small'
  ),
  array(
    'name' => '小',
    'size' => 13,
    'slug' => 'small'
  ),
  array(
    'name' => '標準',
    'size' => 16,
    'slug' => 'regular'
  ),
  array(
    'name' => '大',
    'size' => 24,
    'slug' => 'large'
  ),
  array(
    'name' => '特大',
    'size' => 36,
    'slug' => 'x-large'
  ),
  array(
    'name' => '超特大',
    'size' => 50,
    'slug' => 'huge'
  )
) );

.has-x-small-font-size {
  font-size: 10px;
}

.has-small-font-size {
  font-size: 13px;
}

.has-regular-font-size {
  font-size: 16px;
}

.has-large-font-size {
  font-size: 24px;
}

.has-x-large-font-size {
  font-size: 36px;
}

.has-huge-font-size {
  font-size: 50px;
}

.has-small-font-size {
  font-size: 13px; 
}
.has-regular-font-size,
.has-normal-font-size {
  font-size: 16px; 
}
.has-medium-font-size {
  font-size: 20px; 
}
.has-large-font-size {
  font-size: 36px; 
}
.has-larger-font-size,
.has-huge-font-size {
  font-size: 42px; 
}

$font-sizes: (
  'x-small' : 10px,
  'small' : 13px,
  'regular' : 16px,
  'large' : 24px,
  'x-large' : 36px,
  'huge' : 50px,
);

@each $name, $size in $font-sizes {
  .has-#{$name}-font-size {
    font-size: $size;
  }
}

add_theme_support('disable-custom-font-sizes');

 add_theme_support( 'editor-styles' );

<textarea id="post-title-0" class="editor-post-title__input" placeholder="タイトルを追加" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 95px;">Gutenberg Test 01</textarea>

.editor-post-title__input {
  font-family: 'Raleway', sans-serif;
  color: red;
}

body {
  background-color: #EFEFEF;
  color: #999999;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
}

function my_guten_enqueue_test() {
  wp_enqueue_style( 
    'my-guten-test-styles', 
    get_template_directory_uri() . '/test-editor.css'
  );
  
  wp_enqueue_script(
    'my-guten-test-script',
    get_template_directory_uri() . '/test.js'
  );
  
}
add_action( 'enqueue_block_editor_assets', 'my_guten_enqueue_test' );

body.block-editor-page .editor-post-title__input,
body.block-editor-page .editor-block-list__block{
  font-family: 'Raleway', sans-serif; /* Google フォント */
}

body.block-editor-page .editor-block-list__block{
  color: #999999;
  font-size: 14px;
}

console.log( "テーマの編集画面で読み込まれました！" );