Skip to content

Releases: naoijponly/image-pin-block

v0.3.2

Choose a tag to compare

@naoijponly naoijponly released this 04 Oct 19:46

変更

  • 「画像として保存」で、Fullscreen Editorのプレビューに開いている説明(ポップオーバー)がある場合は、その説明も画像に含めるようにしました(開いていなければ従来どおり含まれません。選択枠・リサイズハンドル等の編集用表示は含まれません)

v0.3.1

Choose a tag to compare

@naoijponly naoijponly released this 22 Sep 23:47

修正

  • 新規ブロックに画像を初めて選択したとき、通常表示(モーダルを閉じた状態)が空白のままになる問題を修正しました(今回の主な修正です)
  • ブロック名が日本語環境で「画像ピンブロック」と表示されていたのを、「Image Pin Block」表記に修正しました
  • メディアライブラリで画像を選び直す際、選択・アップロードの反映が不安定になる場合がある問題を修正しました
  • 画像選択直後の一瞬、描画枠の高さが0になりブロックが消えたように見える問題を修正しました
  • 更新後にファイルが古いまま混在した場合に気づけるよう、案内表示を追加しました

v0.3.0

Choose a tag to compare

@naoijponly naoijponly released this 21 Sep 20:59

追加

  • 吹き出しの先端のサイズを、ラベル・ポップオーバーそれぞれ大・中・小から選べるようにしました(既定は「中」で従来と同じ見た目です)

変更

  • 通常のプレビュー・Fullscreen Editor・フロント表示・拡大表示・「画像として保存」の描画を、共通のSVG描画(単一のScene Renderer)へ統一しました(保存済みのピンのデータ形式は変更していません)

修正

  • ポップオーバーの文字サイズを大きくすると、日本語が約6文字ごとに折り返されてしまう問題を修正しました
  • 説明文の表示が、PCのホバー・クリック・Fullscreen Editorで正しく動作しない場合がある問題を修正しました
  • HTTPS化前の記事のhttp画像で「画像として保存」が失敗する場合がある問題を修正しました(同一サイトの画像のみ対象)
  • 画像を超える長さの説明文のポップオーバーで、下部が欠けてスクロールできない問題を修正しました
  • 画像マーカーのリサイズハンドルを、右下隅の青い丸に修正しました

v0.2.0

Choose a tag to compare

@naoijponly naoijponly released this 15 Sep 03:06

追加

  • 画像上のピンを大きな画面で編集できるFullscreen Editorを追加しました
  • 通常の丸マーカーに加えて、任意の画像をマーカーとして使用できるようにしました
  • Fullscreen Editorでズーム・パン・「全体を表示する」が使えるようになりました
  • ピン・画像マーカー・ラベルを含めた画像をPNGとして保存できるようにしました
  • Fullscreen Editorに「編集を反映して終了」ボタンを追加しました

変更

  • ピンのラベルを画像上でドラッグして、ピンの周囲へ自由に配置できるようにしました
  • ラベル位置の扱いを編集画面・フロント表示・画像保存で統一しました
  • 画像上の空いている場所をダブルクリックしたとき、「ここにピンを追加」で確認してからピンを追加するようにしました
  • ピンを1回クリックすると選択、選択中のピンをもう一度クリックすると説明を表示する操作に変更しました
  • PCのポップオーバーとスマホの説明パネルでは、画像上に表示済みのラベルを重複表示せず、説明文のみを表示するようにしました
  • 「画像として保存」と「全体を表示する」の配置を整理しました

修正

  • 説明文が空でリンク先が設定されているピンで、操作してもリンク先へ移動できない場合がある問題を修正しました
  • ピンをドラッグしたあとに、意図せずポップオーバーが開閉する場合がある問題を修正しました
  • ピンを削除したあとに、選択状態やポップオーバーの状態が不自然になる場合がある問題を修正しました
  • 「ここにピンを追加」の確認メニューが、別の場所を操作したあとも残る場合がある問題を修正しました
  • Fullscreen Editor内の各種操作や表示を調整しました

v0.1.4

Choose a tag to compare

@naoijponly naoijponly released this 13 Sep 20:30

変更

  • ラベル未入力の丸マーカーピンで、画像上の可視ラベル・ポップオーバー・スマホの説明パネルに「Pin」の代替文字を表示しないようにしました(画像マーカーの既存の扱いに統一。スクリーンリーダー向けのaria-labelは従来どおり代替文字で補います)
  • ラベル・説明文がどちらも未入力のピンでは、ポップオーバー・スマホの説明パネル自体を表示しないようにしました(エディタのプレビュー・フロント表示の両方が対象です)

修正

  • 編集画面で、選択中のピンのポップオーバーのライブプレビューが、ブロックの選択が外れた後も表示され続ける問題を修正しました。他のブロックを選択したとき、画像の外をクリックしてブロックが非選択になったときに、プレビューが正しく消えるようになります
  • 画像上の選択中のピン以外の場所をクリックしたときに、ピンの選択(ポップオーバーのプレビュー含む)が解除されるようにしました
  • 「ここにピンを追加」メニューが、ブロックエディタのキャンバス外(ページの余白など)をクリックしても閉じないことがある問題を修正しました

v0.1.3

Choose a tag to compare

@naoijponly naoijponly released this 13 Sep 19:07

追加

  • ピンラベルの背景不透明度・縁取り(色・太さ)を設定できるようにしました
  • ポップオーバー(PC)・説明エリア(スマホ)の背景色・不透明度・文字色・縁取り(色・太さ)を設定できるようにしました(未設定時は従来どおりの見た目を維持します)
  • 編集画面で、選択中のピンのポップオーバーを実画像の上に重ねてライブプレビュー表示するようにしました

修正

  • カラーピッカーの操作中に毎回変更を記録しており、1回の操作でundo履歴(Ctrl+Z)が大量に積まれる問題を修正しました。変更の記録はドラッグを離した時点(またはテキスト入力欄の確定時)の1回のみに変更しました
  • カラーピッカーのグラデーション領域をドラッグ・クリックした際に、色の値が2値の間で往復して選んだ色が確定しないことがある問題を修正しました

v0.1.2

Choose a tag to compare

@naoijponly naoijponly released this 13 Sep 12:28

追加

  • ラベルの文字サイズを設定できるようにしました
  • マーカー画像をドラッグしてリサイズできるようにしました

変更

  • ピンのサイズ・ラベルの文字サイズが、画像の表示幅に比例して拡縮するようになりました。PC とスマホで見た目の比率が揃います
  • ピンのサイズとラベルの文字サイズの初期値を、画像の元解像度から自動計算するようにしました
  • マーカー画像の表示幅に上限(本体画像幅の 50%)を設けました
  • マーカー画像が本体画像からはみ出さないよう、移動・リサイズの範囲を制限しました

修正

  • 大きなマーカー画像を指定すると、画像の移動や他のピンの操作ができなくなる問題を修正しました
  • 数値入力欄で、入力途中の値が弾かれて打ち直せない問題を修正しました
  • スマホで説明を表示してから遷移する設定のとき、スクロール位置がずれる問題を修正しました

v0.1.1

Choose a tag to compare

@naoijponly naoijponly released this 13 Sep 06:33

修正

  • スマホで画像の拡大表示を開いたとき、初期倍率が大きすぎた問題を修正しました。
    開いた直後は画像全体が画面に収まる倍率を初期値とし、そこから拡大できるようになります。

v0.1.0 初回リリース

Choose a tag to compare

@naoijponly naoijponly released this 13 Sep 06:00

画像の上にピンを配置し、説明表示とページ内リンクができる WordPress ブロックの初回リリースです。

主な機能

  • 画像上へのピン配置(ドラッグで位置調整、%座標で保存)
  • ラベル・説明文・遷移先の設定
  • ピンごとのマーカー画像(拡縮・ラベル表示切替)
  • PC / スマホで独立した動作設定
  • 画像の拡大表示(ドラッグ/スワイプ、ホイール/ピンチ、ボタン操作)
  • ピンのサイズ・色、ラベルの背景色・文字色の設定
  • 日本語 / 英語対応

インストール

下部の Assets から Source code (zip) をダウンロードし、
WordPress 管理画面の「プラグイン」→「新規追加」→「プラグインのアップロード」から
インストールしてください。

詳しくは README をご覧ください。